Twig 入門書

これは Craft のテンプレートエンジンである Twig のコアコンセプトの要約です。

これはあくまで入門書であり、 Twig が行うことができるすべての包括的なドキュメントではありません。

より詳しいことは、このページの下段にある「続きを読む」セクションを見るか、Twig 公式ドキュメントを直接参照してください。

3種類の Twig タグ

Twig には3種類のタグがあります。

  • ロジックタグ
  • 出力タグ
  • コメントタグ

それぞれについて、詳しく見てみましょう。

ロジックタグ

ロジックタグは、テンプレート内で起きることをコントロールします。変数を設定したり、条件文をテストしたり、配列をループしたり、他にもいろいろなことができます。

ロジックタグは、それ自身でテンプレートに何も出力しません。

構文は常に {% ではじまり %} で終わります。その間に記述した内容が、あたなが使うタグになります。

<p>Is it quitting time?</p>

{% set hour = now|date("G") %}
{% if hour >= 16 and hour < 18 %}
    <p>Yes!</p>
{% else %}
    <p>Nope.</p>
{% endif %}

出力タグ

出力タグは、レンダリングされた HTML にプリントする責任があります。

構文は常に {{ ではじまり }} で終わります。Twig が文字列として評価できるものであれば、その中にほぼ何でも記述できます。

<p>The current time is {{ now|date("g:i a") }}.</p>

出力タグはテンプレートにアプトプットするためのものなので、 Twig の命令タグ内に記述することは絶対にできません

これらの例は、正しくありません。

{% set entry = craft.entries.section( {{ sectionId }} ).one() %}
{% set entry = craft.entries.section( {% if filterBySection %} sectionId {% endif %} ) %}

こちらは正しいです。

{% set entry = craft.entries.section( sectionId ).one() %}
{% set entry = craft.entries.section( filterBySection ? sectionId : null ) %}

リソース:

コメントタグ

コメントタグを利用して、コード内に将来の自分に向けたコメントを残すことができます。Twig はコメントタグの内容を何も評価しません。単にそれが存在しないものとして振る舞います。

コメント構文は常に {# ではじまり #} で終わります。

{# Loop through the recipes #}

コメントタグの内側に記述された内容は、HTML コメントとは異なり、最終的なテンプレートにレンダリングされません。

変数

Twig の変数は、JavaScript や他のプログラミング言語の変数に似ています。変数には、文字列、配列、ブール値、オブジェクトなど、いろいろな種類があります。それらをファンクションに渡したり、操作したり、出力することができます。

set タグを利用して、独自の変数を割り当てることができます。

{% set style = 'stirred' %}

{{ style }}

さらに、すべての Craft テンプレートは、いくつかのグローバル変数があらかじめロードされています。

  • 一致するルートの結果として読み込まれたテンプレートには、ルートのトークンによって定義された変数があらかじめロードされています。
  • 一致するエントリ URL の結果として読み込まれたテンプレートでは、変数 entry を取得できます。(詳細は、ルーティングを見てください)

フィルタ

フィルタで変数を操作できます。構文は、変数名に続けてパイプ(|)とフィルタ名となります。

{{ siteName|upper }}

いくつかのフィルタは、パラメータを受け取ります。

{{ now|date("M d, Y") }}

リソース:

ファンクション

Twig と Craft は、テンプレートタグ内で利用できるいくつかのファンクションを提供します。

<h3>Watch me count to ten!</h3>
<ul>
    {% for num in range(1, 10) %}
        <li class="{{ cycle(['odd', 'even'], loop.index0) }}">
            {{ num }}
        </li>
    {% endfor %}
</ul>

リソース:

続きを読む

Twig を学ぶためにオンラインで利用できるいくつかの学習リソースがあります。

  • Twig for Template Designers は、すべての Twig の機能を詳細なドキュメントです。時として過度に専門的なところもありますが、読んでおくことをお勧めします。
  • Twig Templates in Craft は、Craft の Twig を快適に使えるようになることを目的とした、Mijingo によるビデオコースです。
  • Straight up Craft は、Craft での Twig の使い方に関する素晴らしい記事があります。
  • Twig for Designers は進行中の eBook で、非開発者が Twig をどのように使えるか説明することを目的としています。