README

设置

安装

从 Github 克隆完成的项目
- git clone https://github.com/field-interactive/cito-bundle.git
或者使用 Composer 创建新项目
- composer create-project field-interactive/cito-skeleton

要安装所需的 PHP 和 JS 包，您需要 Composer 和 Yarn。

配置

如果您只安装了包而没有骨架，您必须手动创建目录和文件。

在您的项目根目录中创建一个名为 pages 的文件夹。这将存储您的内容页面。
在 config/packages 中创建一个名为 cito.yaml 的配置文件。此文件包含
```
 cito:
     pages: '%kernel.project_dir%/pages/'
```

在 config/routes 中创建一个路由配置 z_cito.yaml。此文件包含

 field_interactive_cito:
     resource: "@CitoBundle/Resources/config/routes.yaml"

将字符串 '%kernel.project_dir%/pages' 添加到 config/packages/twig.yaml 中的 paths。
将 picture_macro 添加到 config/packages/imagine.yaml 中的 filter_sets。picture_macro 的内容
```
 jpeg_quality: 85
     png_compression_level: 8
     filters:            
         relative_resize:
             widen: 600
```
1. 如果缺少 config/packages/imagine.yaml 文件，您可以从 vendor/field-interactive/cito-bundle/Resources/config/packages/imagine.yaml 复制文件。

如果文件 config/routes/imagine.yaml 不存在，请添加它并设置内容

 _liip_imagine:
     resource: "@LiipImagineBundle/Resources/config/routing.yaml"

Twig 函数、过滤器、宏

CitoController

搜索当前路由的页面，如果您没有定义路由。控制器在您的项目根目录中的 pages 文件夹中搜索页面。

示例：/example/page

控制器在 %project_dir%/pages/example/page.html.twig 和 %project_dir%/pages/example/page/index.html.twig 中搜索页面。

页面

加载页面对象以获取其块、链接、路径或名称。

{% set page = page('path/to/page.html.twig') %}

您可以像访问对象属性一样访问属性

{{ page('path/to/page.html.twig').blocks.title }}

页面列表

将目录或一系列页面作为页面对象的列表加载。

{% set pagelist = pagelist({'dir': 'path/to/dir'}) %}
{% set pagelist = pagelist({'files': [
    'path/to/file_1.html.twig',
    'path/to/file_2.html.twig',
    'path/to/file_1.htm3.twig'
    ]}) %}

您可以在列表中进行迭代并访问每个页面

{% for page in pagelist %}

您可以排序和限制结果

{% set pagelist = pagelist({'dir': 'path/to/dir', 'sortOrder': 'desc|asc', 'sortBy': 'link', 'limit': 10}) %}

图片

为具有一组给定尺寸的图片创建一个 HTML 图片标签。

{% import '@Cito/macros.html.twig' as macro %}
{{ macro.picture('/path/to/image.jpg', [1200, 900, 600]) }}

您可以设置多达 6 个尺寸。

InlineSVG

向 SVG 图像添加或替换属性。

{{ asset('path/to/image.svg')|inline_svg({attr: {class: 'your-class', id: 'svg-1'}})|raw }}

您还可以添加一些类

{{ asset('path/to/image.svg')|inline_svg({classes: 'add-classname another-classname'})|raw }}

主体类和 id

设置 <body> 标签的类和 id。

{% set body_class = 'your-class' %}
{% set body_id = 'your-id' %}

IncludeUserAgent

包含一个带有用户代理检查的模板

有两种用法

将“模板文件”替换为您想要包含的文件。该文件将在在 cito.yml 中设置的 pages 目录中搜索。如果没有设置文件夹，则将自动根据用户代理选择它。如果设置了文件夹，它将从那里包含文件。

{{ include_ua('template file') }}
or
{{ include_ua('template file', 'folder') }}

JavaScript 和 Webpack

懒加载

vanilla 懒加载

Sass 编译

为了编写更好、更干净的 CSS，您可以使用 Sass，您可以通过 npm build 进行编译。您只需要 assets/sass/default.sass，其中您将 Sass 文件合并在一起。

监视器

自动编译 Sass 并最小化 CSS 和 JS。您可以使用命令 npm watch 启动监视器。如果您希望在新的编译后自动刷新浏览器，可以使用浏览器同步 gulp serve。

有用的文档

Symfony
Twig

关于我们

我们是 Field-Interactive

field-interactive / cito-bundle

维护者

详细信息