Twig是Drupal8滞后使用的主题引擎，Twig是一个模板引擎，对开发人员和设计人员都很友好。它的语法直观、逻辑清晰、灵活。在这篇文章中，成都长风云Drupal开发团队将介绍10个Twig技巧，这些技巧将增强您的Drupal主题化过程，并使主题化变得有趣和高效。
1、调试器
调试是理解的门户，因此在任何提示或技巧之前，必须启用Twig调试器。这将在模板建议周围添加HTML注释，并显示正在使用的模板。
在services.yml中，设置
twig.config:
debug: true
auto_reload: true
cache: false使用dump（）进行检查
{{ dump(content) }}
// for cleaner outputs, install Devel and use kint()
{{ kint(content) }}2.模板建议
Drupal生成覆盖模板的模板建议，并允许您对模板字段进行精细控制。例如，默认的node.html.twig可以通过使用node-article.html.twig扩展为特定于内容类型，或者进一步扩展到视图模式node-article-teaser.html.twig。
专业提示：控制你的主题，不要用条件逻辑来膨胀模板，而是通过在主题中添加预处理钩子来利用模板建议：
function mytheme_preprocess_node(&$variables) {
if ($variables['node']->getType() == 'article' && $variables['view_mode'] == 'teaser') {
$variables['theme_hook_suggestions'][] = 'node__article__teaser__featured';
}
}
3.使用斜纹过滤器
Twig允许直接在模板中操纵变量。
// String filters
{{ title|lower }}
{{ title|replace({'Drupal': 'Twig'}) }}
// Date formatting
{{ node.created.value|date("F j, Y") }}
// Length checks
{% if items|length > 3 %}
<p>There are many items.</p>
{% endif %}专业提示：将过滤器与默认过滤器结合使用，以避免空值：
{{ content.field_subtitle|default('No subtitle available') }}4.使用Twig功能
Twig附带了各种可供使用的辅助功能。
path（）：生成内部链接
<a href="{{ path('entity.node.canonical', {'node': node.id}) }}">
{{ node.title.value }}
</a>url（）：输出完整的url
{{ url('entity.node.canonical', {'node': node.id}) }}include（）：重用部分模板
{{ include('@mytheme/partials/_button.html.twig', {text: 'Read More'}) }}attach_library(): 加载主题的 libraries
{{ attach_library('mytheme/custom-styles') }}5.树枝可重复使用组件
Drupal的10个重点是基于组件的主题化设计方法，因此必须使用Twig组件。
创建_card.html.twig组件
<div class="card">
<h2>{{ title }}</h2>
<p>{{ body }}</p>
<a href="#">Read more</a>
</div>将其包含在其他模板中：
{{ include('@mytheme/components/_card.html.twig', {
title: node.label,
body: content.body,
url: path('entity.node.canonical', {'node': node.id})
}) }}6.条件和循环
条件属性可用于保持最小和干净
<div class="alert {{ status == 'error' ? 'alert-danger' : 'alert-success' }}">
{{ message }}
</div>循环使用有用的变量：
{% for item in items %}
<li class="{{ loop.first ? 'first' : '' }} {{ loop.last ? 'last' : '' }}">
{{ item }}
</li>
{% endfor %}7.使用块扩展模板
Twig支持继承，例如Base模板Base.html.Twig
<html>
<head>{% block head %}{% endblock %}</head>
<body>
{% block content %}{% endblock %}
</body>
</html>可以扩展子模板
{% extends "base.html.twig" %}
{% block content %}
<h1>{{ title }}</h1>
{{ body }}
{% endblock %}这也使得构建基于组件的主题变得更加容易。
8.高级归因
Drupal的核心属性对象可以通过Twig模板访问，这是一种动态管理类和属性的强大方法。
<div{{ attributes.addClass('node', 'node--' ~ node.bundle) }}>
{{ content }}
// You could also merge attributes
{{ title_attributes.addClass('page-title') }}
</div>9.性能考虑因素
1）在生产环境中禁用调试器
2）使用包含或嵌入，而不是复制标记
3）缓存输出
10.附加库
在Drupal 10中，Twig主题可以以极其模块化的方式与第三方库相结合：
附加库：
{{ attach_library('mytheme/hero-banner') }}在mytheme.libraries.yaml中定义库
hero-banner:
css:
theme:
css/components/hero-banner.css: {}
js:
js/hero-banner.js: {}
