9.2 Twig
增加一个 Twig 模板
我们已经定义了基本的主题元素,现在可以创建一个 Twig 模板了。Twig 是 Drupal 8 的默认主题系统。
默认 Twig 模板文件的命名规则与 Drupal 7 中的 .tpl.php 模板文件相同: 使用 – 代替 _,以 .html.twig 为扩展名。
我们的 Twig 模板
首先,看下模板文件 templates/my-element.html.twig(见辅助内容区),你可以使用 {{element}} 打印整个渲染元素或者使用代码 {{element.field}} 打印个别字段或孩子元素。
Twig 中的变量
模板文档可以参考 Twig’s documentation states 。
Drupal 在主题层向模板文件传递可操作的变量,变量本身也可以有能够访问的属性或元素。
{#
/**
* @file
* Default theme implementation to my_element.
*
* Available variables:
* - element: Element that will be rendered.
* - element['link'] : a link
* - element['description'] : a description
* - element['pre_render_addition'] : added during the #pre_render function
* - element['random_number'] : a random number variable, won't be printed with the element.
*
* @ingroup themeable
*/
#}
<div>
<div>Random Number: {{ element['#random_number'] }}</div>
<p>{{ element.description }}</p>
{{ element.link }}
</div>
{# Debug output #}
<div>
<h3>We print the element</h3>
{{ element }}
<h3>Link</h3>
{{ element.link }}
<h3>Description</h3>
{{ element.description }}
<h3>#pre_render addition</h3>
{{ element.pre_render_addition }}
<h3>Random number (not printed when we printed the whole element</h3>
{{ element['#random_number'] }}
</div>
调试 Twig
有两种方式可以调试 Twig:
- 激活“Twig debugging”,这将帮助你判断当前正在使用那个模板。
- 在页面中添加标记,这允许我们探讨模板中那些变量可用。
判断模板建议
激活 Twig debugging 后会在页面源码中输出一些标记,告诉你现在正在使用什么模板。Drupal.org 上有调试 Twig 方法的简要概述 Debugging Twig templates 。
简而言之,象下面这样在 sites/default/services.yml 内激活 Twig 调试:
parameters:
twig.config:
debug: true
之后你使用开发工具查看模板信息。
调试 Twig 变量
Twig 调试比 Drupal 7 中的方法容易。Twig 也可以在模板中查看所有或个别变量是否有效。
要做这个我们需要安装 Devel 和 Kint 模块。之后我们可以使用下面命令把所有变量输出到屏幕上:
{{ kint() }}
或者输出个别变量:
{# Or one variable. #}
{{ kint(element) }}
{# Or one part of the render array. #}
{{ kint(element.hello) }}
通过上面的例子,你也知道 Twig 的注释格式 {# comment #} 。