【Drupal8】利用されているtwigテンプレート名を調べる

やりたいこと

• Drupal8で、現在表示しているページがレンダリングに利用しているtwigテンプレート名を知りたい
• 利用しているtwigテンプレート名がわかれば「hook_preprocess_HOOK()」の仕組みを利用して処理に手を入れたり、twigテンプレートを上書きしてレイアウトを変更したりできる

方法

参考 : https://www.drupal.org/docs/theming-drupal/twig-in-drupal/locating-template-files-with-debugging

1. sites/default/services.yml を編集し、debug: trueとなるようにする。
2. キャッシュを削除
3. カスタマイズしたいページを表示する
4. ブラウザの機能で「ソースを表示」する
5. 以下のようなコメントが記述されるようになる

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--system-main-block.html.twig
   * block--system.html.twig
   x block.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/block/block.html.twig' -->

例：検索結果ページ

• Searchモジュールによる検索結果ページ（/search/node）をカスタマイズしたい、という場合。
• 上記の方法でソースを表示させると以下のようなコメントが見つかる

検索結果（リスト）開始

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'item_list__search_results' -->
<!-- FILE NAME SUGGESTIONS:
   * item-list--search-results.html.twig
   x item-list.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/dataset/item-list.html.twig' -->

検索結果（1件分）開始

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'search_result' -->
<!-- FILE NAME SUGGESTIONS:
   * search-result--node-search.html.twig
   x search-result.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/stable/templates/content/search-result.html.twig' -->

ページネーション部分開始

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'pager' -->
<!-- BEGIN OUTPUT from 'themes/custom/{自作テーマ名}/templates/pager.html.twig' -->

↓
なので、自作テーマに以下の名前のtwigテンプレートを作ればHTMLコードを上書きできるはず。

• item-list--search-results.html.twig
• search-result--node-search.html.twig
• pager.html.twig

※ 各twigテンプレートがもともとどういう内容だったのかは、ググるとソースコードが載っているページがヒットする