logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
05/05/2020, by maria

Drupal 8の一般的な考え方は、カスタムモジュールのPHPコードで直接HTMLを作成することを避けることです。これをTwigテンプレートに任せたいのです。モジュールに新しいTwigテンプレートを作成するには、次の手順を実行します。

ステップ1:.moduleファイルでhook_themeを定義する
まだ存在しない場合は[module].moduleファイルを作成し、Twigテンプレートのそれぞれを定義するコードを追加します。配列の各要素のキーは、後でテンプレートを呼び出すために使用するものです。ファイル名にハイフンを使用しないでください。

04/05/2020, by maria

Drupal 8のテーマ設定を可能な限り効率的にし、Twigテンプレートでより多くのカスタマイズオプションを提供するには、次の推奨事項に従ってください:

このガイドは、Drupal 7の経験があり、Drupal 8以降で使用すべきでなくなったtheme()やdrupal_render()などの関数を削除しようとしているDrupal開発者を支援するために書かれています。ここでの「Before」の例は、一般的にDrupal 7のコードスタイルで書かれています。

04/05/2020, by maria

Twig公式ドキュメントより:「マクロは通常のプログラミング言語の関数に匹敵します。繰り返さないように、頻繁に使用されるHTMLのイディオムを再利用可能な要素に配置するのに役立ちます。」

{% macro input(name, value, type, size) %}
  <input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
{% endmacro %}

マクロはネイティブなPHP関数といくつかの点で異なります:

04/05/2020, by maria

Twigのフィルターは変数を変更するために使用できます。フィルターはパイプ記号で変数から分離されます。括弧内にオプションの引数を取ることができます。複数のフィルターをチェーンできます。1つのフィルターの出力が次のフィルターに適用されます。

例:

{{ content|safe_join(", ")|lower }}

フィルター処理の前に要素をレンダリングする必要がある場合があります:

{{ item|render|filter }}

Twigには多くの組み込みフィルターが付属しており、公式ドキュメントで確認できます。Drupalには独自のフィルターが多数あります。

04/05/2020, by maria

特定の要素のマークアップを生成するテンプレートを確認するには、Twigの組み込みdebugオプションを使用できます。このオプションは、使用されるテーマフック、推奨されるテンプレートファイル名を含むHTMLコメントをレンダリング出力とともに表示し、マークアップの特定のセクションのレンダリングに使用される正確なTwigファイルを示します。

sites/default/services.ymlでtwig.configセクションのdebug:trueを設定してTwigデバッグを有効にします(本番環境では無効にしてください)。Drupal 8をマルチサイトで使用している場合は、作成している特定のサイトのsites/currenttsiteディレクトリにあるservices.ymlファイルを編集する必要があります。services.ymlがまだ存在しない場合は、sites/defaultディレクトリからdefault.services.ymlファイルをコピーしてservices.ymlに名前を変更します。Twigデバッグの詳細な手順については、「コンパイル済みTwigテンプレートのデバッグ」のセクションを参照してください。

04/05/2020, by maria

Twigの通常の動作

デフォルトでは、TwigテーマエンジンはテンプレートをPHPコードにコンパイルし、コンパイルされたコードをメモリに保存します。コンパイルされたコードは、Twigテンプレートへの変更がDrupalサイトにすぐに反映されないため、開発には適していません。

Twigがマークアップを生成した後、Render APIに別のキャッシュ層があります。これはTwigが生成したマークアップを取得してキャッシュするため、後続のページリクエストではTwigはまったく関与せず、Twigのデバッグオプションは最終的に無視されます。

Drupalのキャッシュクリアインターフェースを使用してキャッシュをクリアできますが、開発を進めるには、TwigもRender APIも何もキャッシュしないようにDrupalの設定を変更する方が簡単です。

デバッグ用のTwigとRender APIの設定

TwigとRenderの2つのAPI層は、デバッグ目的で個別に設定する必要があります:

04/05/2020, by maria

Twigテンプレートエンジンはデバッグツールを提供します。

Drupal 8の実装には、マークアップを出力するテンプレートを見つけるための追加ツールもあります。

警告: Twigデバッグを有効にすると、特にViewsなど、サイトの一部が壊れる可能性があります。この問題を参照してください

デバッグを有効にする

sites/default/services.ymlでTwigデバッグを有効にします。

デバッグ変数をtrueに設定します。そしてキャッシュをクリアします。

04/05/2020, by maria

Twigテンプレートファイルを扱う場合、ほとんどの変数はテンプレートファイルのコメントに記載されています。しかし、そうでない場合、またはテーマやモジュールが新しい変数を導入する場合は、テンプレート内で利用可能なすべての変数を検出する方法が必要です。Twigはテンプレートファイル内の変数を検出および検査するためのdump()関数を提供します。

デバッグが有効になっていないと、dump()関数は出力を表示しません。Twigデバッグを有効にする方法を学ぶ。

有効にすると、dump()関数を使用して、テンプレート内の1つ以上の変数に関する情報を出力できます。

単一の変数の検査

テンプレートにtitle変数がある場合、次はその内容をテンプレートに出力します:

{{ dump(title) }}

テンプレートで利用可能なすべての変数の検出

利用可能なすべての変数とその内容をテンプレートに出力するには、次をテンプレートに追加します(デバッグを有効にした後):