6.4. Twig は Drupal の新しいテンプレートエンジン。

Stable テーマの page.html.twig テンプレートファイルを開くと:

/core/themes/stable/templates/layout/page.html.twig

Drupal 7 の page.tpl.php テンプレートと異なることがわかります。まず拡張子で、次に波括弧 {} が多いことで。これはすべて、Drupal が Twig テンプレートエンジンを使っているからです。

<main role="main">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

    <div class="layout-content">
      {{ page.content }}
    </div>{# /.layout-content #}

    {% if page.sidebar_first %}
      <aside class="layout-sidebar-first" role="complementary">
        {{ page.sidebar_first }}
      </aside>
    {% endif %}

    {% if page.sidebar_second %}
      <aside class="layout-sidebar-second" role="complementary">
        {{ page.sidebar_second }}
      </aside>
    {% endif %}

  </main>

twig テンプレートでは PHP を使えないので、Twig のツールだけを使う必要があり、それらでサイトをスタイリングするには十分です。

Twig の扱い方を理解しましょう。

Twig の変数

PHP では変数にドル記号 $ を使いますが、twig では波括弧を使います:

{{variable}}

したがって、変数は開き波括弧 2 つ、スペース、変数名、スペース、閉じ波括弧 2 つ、と書きます。変数を出力するために、twig 変数の前に print 関数を追加する必要はありません。twig テンプレートでは PHP をまったく使いません。変数を出力するには、二重波括弧で指定するだけです。

オブジェクトや配列の変数の扱いも便利です。以前は $node がオブジェクトで $form が配列だと知る必要がありましたが、今ではすべてがよりシンプルで、変数のプロパティにドットを通じてアクセスします:

{{node.id}}

変数を簡単に作成できます:

{% set foo="bar" %}

Hi, here's my variable: {{ foo }}

変数を設定するときはパーセント記号の括弧を使い、変数を表示するときは二重括弧を使う構文に注意してください。

文字列だけでなく、配列も指定できます:

{%
  set foo_array = [
    'foo',
    'bar',
  ]
%}

Twig フィルター

twig は本格的なプログラミング言語ではありませんが、データを扱うためのツールセットがあります。おそらく最も重要なそのようなツールがフィルターです。フィルターはパイプ | を使って指定します

{{ variable|filter }}

フィルターを使うと変数の出力を変更できます。例えば:

{{node.title | length}} - 文字列の長さの数字を出力します

{{node.title | uppercase}} - 文字列を大文字で表示します

{{node.title | lowercase}} - 文字列を小文字で出力します

Twig フィルターの完全なリストは、公式 Twig ドキュメント http://twig.sensiolabs.org/doc/filters/index.html を参照してください

Drupal の Twig フィルター

Drupal も Twig に独自のフィルター、例えば改行用のフィルターを追加します。以前は PHP で実装された t() 関数を使いましたが、今では Twig で PHP コードを使えないので、t() 関数を置き換えるツールが必要です。

次で例を見つけてください

• t
• passthrough
• placeholder
• drupal_escape
• safe_json
• without
• clean_class
• clean_id

twig テンプレートでの改行/翻訳

Twig は異なる言語に文字列を使います。行を翻訳するには、タグ {% trans %} を使う必要があります。制御構造がどう書かれるかに注目してください。変数と区別するためにパーセント記号 % を使います。

{% trans %} Hello world {% endtrans %}

翻訳のために文字列に変数を渡すこともできます:

{% trans %} Hello {{ name }} {% endtrans %}

翻訳行に表示する前に、フィルターを通じて変数を変更することもできます

{% set name = name|capitalize %}

{% trans %}
  Hello {{ name }}!
{% endtrans %}

Twig のコメント

{# Comment here #}

if 文

twig には PHP のほとんどの機能はありませんが、配列と変数を扱うための構文のセットがあります。例えば、この変数を表示する前に変数が存在するかを確認できます。

{% if site_slogan %}
  <div class="site-slogan">{{ site_slogan }}</div>
{% endif %}

Twig のループ

テンプレートでは、配列を反復処理して要素ごとに出力する必要が非常によくあります。そのために、Twig では for ループを使います（PHP の foreach に似ています）:

{% for item in items %}
  {{ item.content }}
{% endfor %}

PHP の通常の for ループのように for ループを使うこともできますが、異なる形式です:

{% for i in range(0, 3) %}
  {{ i }},
{% endfor %}

for else 構文を使うこともできます:

<ul>
{% for user in users %}
  <li>{{ user.username|e }}</li>
{% else %}
  <li><em>no user found</em></li>
{% endfor %}
</ul>