ether/atom

为 Craft CMS Twig 模板添加增强模块化

维护者

详情

github.com/ethercreative/atom

源代码

问题

安装次数: 1,188

依赖者: 0

建议者: 0

安全: 0

星标: 9

关注者: 5

分支: 2

公开问题: 1

类型:craft-plugin

5.0.0 2024-03-27 15:19 UTC

Requires

MIT eea070130f68b96816c8053e69ac22ae1a78b994

This package is auto-updated.

Last update: 2024-08-28 18:43:25 UTC

README

为 Craft CMS Twig 模板添加增强模块化

Atom

安装

$ composer require ether/atom

使用

在您的 templates 目录中创建一个名为 _atoms 的文件夹（这可以自定义，见 配置）。

基本

在这个文件夹中，您可以创建可重用的 Twig 模板，或原子（也称为模块、组件、分子）。您可以使用以下语法在 Twig 中访问原子

{% x:my-atom %}

上述代码将在模板中包含 _atoms/my-atom。如果 my-atom 不存在，则不会输出任何内容。

参数

您可以向原子传递参数，这些参数将在原子内公开。当前的模板上下文不会传递给原子，所以任何在原子外部定义的变量必须手动传递。

{% x:my-atom { heading: "Hello world!" } %}

在上面的例子中，my-atom 将会访问到 heading 变量。如果 heading 没有传递，则该变量将是未定义的。您可以使用 is defined 或 |default 来检查变量是否可用。

子元素

您也可以向原子传递子元素

{% x:my-atom { heading: "Hello world!" } %}
    <p>This is my atom</p>
    <p>There are many like it, but this is mine</p>
    <p>{{ myVariable }}</p>
{% endx:my-atom %}

子元素在父上下文中渲染，而不是在原子中。这意味着您传递给原子的任何变量在子元素中不可用（除非它们也在父上下文中可用）。

子元素使用 children 变量在原子中渲染，该变量将包含子元素的渲染内容或 null（如果没有定义子元素）。

{# Contents of `_atoms/my-atom` #}
<div>
    <h1>{{ heading }}</h1>
    {{ children }}
</div>

嵌套

原子可以嵌套在其他原子内部！

{% x:my-atom %}
    {% x:another-atom %}
{% endx:my-atom %}

子目录

您可以将原子存储在 _atoms 目录中的子目录中。例如，如果您有一个在 _atoms/cards/news 的原子，您可以使用以下语法来访问它

{% x:cards/news %}

动态原子

您可以通过将原子名称括在方括号中来自动化地渲染具有动态名称的原子

{% set myVar = 'example-atom' %}

{% x:[myVar] %}

{% x:[myVar] %}
    <p>hello world!</p>
{% endx:[myVar] %}

配置

您可以通过在您的 config 文件夹中创建一个 atom.php 文件来配置 Atom。有关可用的设置，请参阅 config.php。