README

Twig 的一系列有用扩展和组件。

安装

composer require studiometa/twig-toolkit

用法

将 Studiometa\TwigToolkit\Extension 添加到您的 Twig 实例中

$loader = new \Twig\Loader\FilesystemLoader();
$twig = new \Twig\Environment($loader);
$twig->addExtension(new \Studiometa\TwigToolkit\Extension());

如果您将 Twig\Loader\FilesystemLoader 实例传递给扩展构造函数，将添加一个指向此包 templates/ 文件夹的 meta 命名空间。然后您将能够使用 @meta 别名包含此包中的组件。

{% include '@meta/components/signature' %}

参考

命名空间

当提供一个 \Twig\Loader\FilesystemLoader 参数时，扩展将注册一个指向此包 templates 文件夹的 @meta 命名空间。您将能够直接从您项目的模板中导入此文件夹中的文件。

{% include '@meta/components/signature.twig' %}

函数

{{ html_classes(<classes>) }}

一个管理类更简单的函数。

参数

• classes (String | Array | Object)

示例

{# The following examples will render the same HTML #}
<div class="{{ html_classes('foo bar') }}"></div>
<div class="{{ html_classes(['foo', 'bar']) }}"></div>
<div class="{{ html_classes({ foo: true, bar: true, baz: false }) }}"></div>
<div class="{{ html_classes(['foo', { bar: true, baz: false }]) }}"></div>

{# HTML #}
<div class="foo bar"></div>

{{ html_styles(<styles>) }}

一个管理样式属性更简单的函数。

参数

• styles (Object)

示例

<div style="{{ html_styles({ display: 'none', margin_top: '10px' }) }}"></div>
<div style="display: none; margin-top: 10px"></div>

<div style="{{ html_styles({ display: false, opacity: 0 }) }}"></div>
<div style="opacity: 0;"></div>

{{ html_attributes(<attrs>) }}

一个更简单地渲染 HTML 属性的函数，具有以下特性

• 自动处理 class 属性，如上面描述的 class 方法
• 将数组和对象转换为 JSON
• 将属性键从任何格式转换为短横线命名法
• 将值转义以防止 XSS 攻击

参数

• attrs (Object): 要渲染的属性

示例

<div {{ html_attributes({ id: 'one', data_options: { label: 'close' }, required: true }) }}></div>

{# HTML #}
<div id="one" data-options="{\"label\":\"close\"}" required></div>

{{ merge_html_attributes(attr, default_attr, required_attr) }}

智能合并 HTML 属性，用于在组件级别定义默认和必需属性，并允许用户添加自定义属性。

此过滤器也可以用作函数。

参数

• attr (Object): 用户提供的属性
• default (Object): 默认属性
• required (Object): 必需属性

示例

您可以在组件的模板中定义默认和必需属性

{#
/**
 * @file
 * component
 *
 * @param array $attr
 *   Custom attributes to apply to the root element.
 */
#}

{% set default_attributes = { class: 'bar' } %}
{% set required_attributes = { data_component: 'Component' } %}

{# Merge all attributes #}
{% set attributes = merge_html_attributes(attr, default_attributes, required_attributes)}

<div {{ html_attributes(attributes) }}></div>
{# or #}
{% html_element 'div' with attributes %}

然后使用自定义属性包含您的组件

{% include 'component.twig' with {
  attr: {
    class: 'mb-10',
    aria_hidden: 'true'
  }
} %}

您可以使用 命名参数 避免为默认属性参数传递值

{% set required_attributes = { id: 'block' } %}
{% set merged_attributes = merge_html_attributes(attr, required=required_attribute) %}

{{ twig_toolkit_url(string) }}

Spatie\Url\Url 类的包装器，用于轻松操作 URL。有关其 API 的详细信息，请参阅 spatie/url 文档。

参数

• url (string): 要解析以进行操作的对象

示例

{# Change host #}
{% set url = twig_toolkit_url(url).withHost('cdn.fqdn.com') %}

{# Change/add query parameters #}
{% set url = twig_toolkit_url(url).withQueryParameter('key', 'value') %}

标签

{% html_element '<tag>' with attrs %}

使用给定的属性渲染 HTML 元素。这对于避免使用 <{{ tag }}>...</{{ tag }}> 模式设置动态 HTML 元素标签非常有用。

参数

• tag (String): 标签名称
• attrs (Object): 描述元素属性的对象

示例

{# Twig #}
{% html_element 'h1' with { class: 'block' } %}
  Hello world
{% end_html_element %}

{# HTML #}
<h1 class="block">
  Hello world
</h1>