Scroll
デバッグによるテンプレートファイルの検出
特定の要素のマークアップを生成するテンプレートを確認するには、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テンプレートのデバッグ」のセクションを参照してください。
キャッシュをクリアした後、ページのソースを確認してください。次のようなコードが表示されます：
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'node' -->
<!-- FILE NAME SUGGESTIONS:
* node--view--frontpage--page-1.html.twig
* node--view--frontpage.html.twig
* node--1--teaser.html.twig
* node--1.html.twig
* node--article--teaser.html.twig
* node--article.html.twig
* node--teaser.html.twig
x node.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->
<article data-history-node-id="1" data-quickedit-entity-id="node/1" role="article" class="contextual-region node node--type-article node--promoted node--view-mode-teaser" about="/node/1" typeof="schema:Article" data-quickedit-entity-instance-id="0">
....
</article>
<!-- END OUTPUT from 'core/themes/classy/templates/content/node.html.twig' -->このデバッグ出力で注目すべきいくつかの点：
- ファイル名の候補は、最も具体的なものから最も具体的でないものの順にリストされています。
- 現在使用されているファイル名の横に「x」記号があります。
- BEGIN OUTPUTとEND OUTPUTとともに、レンダリングされるテンプレートへの完全なパスが表示されます。