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 #} 。

本书共39小节。


评论 (0)