包简介

Field CitoBundle

README 文档

README

Setup

Installation

clone the completed project from Github
- git clone https://github.com/field-interactive/cito-bundle.git
or create a new project with composer
- composer create-project field-interactive/cito-skeleton

To install the PHP and JS packages you need Composer and Yarn.

Configuration

If you install only the package and not the skeleton, you have to create the directories and files by hand.

Create a folder pages in your project-root. This will be the Directory, where you store your content pages.
Create a config file cito.yaml in config/packages. This file contains:
```
 cito:
     pages: '%kernel.project_dir%/pages/'
```

Create a routes config z_cito.yaml in config/routes. This file contains:

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

Add the string '%kernel.project_dir%/pages' to paths in config/packages/twig.yaml.
Add the picture_macro to filter_sets in config/packages/imagine.yaml. The content of picture_macro:
```
 jpeg_quality: 85
     png_compression_level: 8
     filters:            
         relative_resize:
             widen: 600
```
1. If config/packages/imagine.yaml is missing you can copy the file from vendor/field-interactive/cito-bundle/Resources/config/packages/imagine.yaml.

If the file config/routes/imagine.yaml does not exist, add it and set the content:

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

Twig Functions, Filters and Macros

CitoController

Search the page to the current route, if you did not define the route. The controller is searching for the page in the pages folder in your project-root.

Example: /example/page

The controller search for %project_dir%/pages/example/page.html.twig and %project_dir%/pages/example/page/index.html.twig.

Navigation

Adds an 'active' class to the current link item in the navigation list. The navigation needs to be a simple <ul> <li> list, with an <a> tag inside.

{{ navigation('path/to/nav.html') }}

You can add a parameters array:

breadcrumbs (boolean): generate breadcrumbs to the current route
- {{ navigation('path/to/nav.html', {'breadcrumbs': true}) }}
range (int/array): generate the navigation from a level
- {{ navigation('path/to/nav.html', {'range': 2}) }}
- {{ navigation('path/to/nav.html', {'range': [2,4]}) }}

Page

Loads a page object to get its blocks, link, path or name.

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

You can access the attributes like an object:

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

Pagelist

Loads a directory or set of pages as a list of page objects.

{% 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'
    ]}) %}

You can iterate over the list and access every page:

{% for page in pagelist %}

You can sort and limit the result:

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

Picture

Creates an html picture tag for an image with a set of given sizes.

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

You can set up to 6 sizes.

InlineSVG

Adds or replaces attributes to an svg image.

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

You can also add some classes:

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

Body class and id

Set the class and the id of the <body> tag.

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

IncludeUserAgent

Includes a template with user agent checks

There are two usages:

Replace 'template file' with the file you want to include. The file will be searched for in the pages directory set in cito.yml. Setting no folder will automatically choose it based on the User Agent. If the folder is set, it will take the include the file from there.

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

JavaScripts and Webpack

Lazyload

vanilla lazyload

Sass compiling

To write better and cleaner css you can use sass, which you can compile over npm build. You only need the assets/sass/default.sass where you combine your sass files.

Watcher

Auto compiles sass and minifys css and js. You can start a watcher with the command npm watch. If you want to auto refresh the browser after new compiling you can use the browser sync gulp serve.

Useful documentations

Symfony
Twig

About Us

We are Field-Interactive

field-interactive/cito-bundle 适用场景与选型建议

field-interactive/cito-bundle 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 700 次下载、GitHub Stars 达 1，最近一次更新时间为 2018 年 03 月 22 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「cito」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 field-interactive/cito-bundle 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 field-interactive/cito-bundle 我们能提供哪些服务？

定制开发 / 二次开发

基于 field-interactive/cito-bundle 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

field-interactive/cito-bundle

包简介

关键字：