README

模块化布局系统

安装

1. 首先通过composer安装此包

   composer require becklyn/gluggi-bundle

2. 在你的 AppKernel 中加载此包

3. 在你的 routing.yaml 或 routing_dev.yaml 中加载路由

   layout:
       resource: "@GluggiBundle/Resources/config/routes.yaml"
       prefix: /_layout/

配置

你可以在你的 app/config.yaml 中定义多个配置值

默认配置

gluggi:
    layout_dir: _layout
    info_action:  ~
    title: ~
    data: []
    css: []
    js: []
    js_head: []

用法

创建一个 LayoutBundle 并在你的 AppKernel 中加载。

你可以在 LayoutBundle/Resources/views/{atom,molecule,organism,template,page} 中添加你的视图。

在视图中包含视图

特别是在包含其他子视图的视图中，最好只导入这些子视图，而不是通过布局项目粘贴它们。

Gluggi包含一个简单的twig函数来包含组件

<div class="wrapper">
    {{ gluggi("atom", "example") }}
</div>

该函数有三个参数：gluggi(type, name [, templateContext])

为了保持你的模板尽可能简洁，你应该始终使用 {{ gluggi() }} 而不是twig自带的 {{ include () }} 和 {% include "..." %}。

嵌入其他视图

你还可以在当前组件中嵌入其他组件，以扩展和更改某些块内容。在 embed 标签中使用 gluggi_template(type, name)。

{% embed gluggi_template("atom", "example") with {a: 1, b: 2} %}
    {% block some_block %}
        More content.
    {% endblock %}
{% endembed %}

该函数有两个参数：gluggi_template(type, name)

模板变量

组件可以使用变量（就像任何其他Twig模板一样）。所有模板都需要独立工作，因此变量的值必须在模板中通过 {% set variable = ... %} 定义。

为了允许覆盖某些值，可以使用twig的 |default(...) 过滤器。如果组件包含在另一个模板中，变量可以更改。

atom/list.html.twig:

<ul>
    {% for i in 1 .. entries|default(3) %}
    <li>Entry #{{ i }}</li>
    {% endfor %}
</ul>

molecule/long-list.html.twig:

<div class="long-list">
    {{ gluggi("atom", "list", {entries: 10}) }}
</div>

预定义模板变量

这是一份预定义变量的列表

你可以在包含的模板中通过传递显式值作为模板参数来覆盖预定义值

{{ gluggi("atom", "example", {standalone: true}) }}

standalone

此变量的目的是提供一个指示器，表明组件是在孤立状态下预览还是在另一个模板中嵌入。例如，如果一个组件从父组件接收其实际宽度，这一点很重要。

atom/example.html.twig:

{% if standalone %}<div style="width: 800px;">{% endif %}

    <div class="example">
        {# ... #}
    </div>

{% if standalone %}</div>{% endif %}

molecule/product.html.twig:

{# here the width is defined on the product, so the helper <div> shouldn't be in the output #}
<div class="product">
    {{ gluggi("atom", "example") }} {# includes with standalone = false by default #}
</div>

在视图中使用资源

引用的资源

将你的图像放在 Resources/public/img 下（就像在任何其他Symfony包中一样），并通过 url("../img/...") 在你的SCSS文件中引用图像。

内联资源

通过 becklyn/asset-bundle 的 asset() 函数直接从包中加载资源

<!-- Resources/views/atom/example.html.twig -->

<div class="example">
    <img src="{{ asset("@app/img/example.jpg") }}" alt="Example Image">
</div>

分离内容和布局资源

在一个常规布局项目中，有一些资源对于布局的正常运行是必需的（如徽标、背景图像等）。还有一些内容图像，在布局预览中作为占位符。

建议将这两类图像分开到两个目录中

• Resources/public/img 用于布局资源
• Resources/public/content 用于内容占位符资源

样式辅助工具

有一个样式辅助工具可用于你的布局视图。它为每个直接子元素添加顶部边距，除了第一个子元素。可以这样使用它

<div class="gluggi-variations">
    <!-- First component -->
    <!-- Second component -->
    <!-- ... -->
</div>

如果组件本身不应该有顶部边距，将组件包裹在一个单个div中

<div class="gluggi-variations">
    <div><!-- First component --></div>
    <div><!-- Second component --></div>
    <!-- ... -->
</div>

模板配置

您可以在模板中定义配置参数，例如设置 page 组件的 body 类。

模板配置以twig注释作为模板中的第一个元素定义。

{#-
    # the indention is automatically removed
    some_configuration: test
    another_value: a
-#}

配置格式为YAML。所有配置参数都是可选的。

定义配置参数

定义配置参数 "add_assets" 和 "override_assets"。

配置参数 add_assets 和 override_assets 的定义与默认配置类似。

override_assets:
    css: []
    js: []
    js_head: []
    
add_assets:
    css: []
    js: []
    js_head: []

索引信息

主应用可以将任意HTML嵌入到索引页中。这将在组件列表的右侧添加，紧邻组件列表。只需在配置中定义一个控制器操作，返回的HTML就会嵌入到页面中。如果返回的HTML为空，信息容器将被隐藏。

gluggi:
    info_action: "SomeBundle:Test:gluggiInfo"

这将调用 SomeBundle\Controller\TestController::gluggiInfo()。此配置选项内部使用 {{ render(controller("...")) }}，因此此调用接受的任何语法，Gluggi也同样接受。

模板数据

您可以定义全局数据，这些数据可以在所有组件模板中访问。

gluggi:
    data:
        key1: abc
        key2: 123
        icons:
            - "add"
            - "remove"
            - "search"

您可以通过 {{ gluggi_data(key) }} 在模板中访问这些数据。

例如

{% for icon in gluggi_data("icons") %}
    <i class="icon icon-{{ icon }}"></i>
{% endfor %}

为了便于快速调试，如果key未定义在数据数组中，twig函数将抛出异常。

示例内容

为了轻松生成一些示例页面，有一些辅助函数可以将内容渲染为示例内容。

内容

渲染示例富文本内容。

选项

• headlines：要渲染的标题级别数量（默认：4）

表单

渲染包含许多不同表单字段类型和状态的表单。