Drupal 8 テンプレート構造について

--広告--

ポイント

Drupalのテンプレート構造についての説明をします。

主要なテンプレートについての簡単なまとめです。

閲覧数 758 回

Drupal では各コンポーネントごとにテンプレートファイルが分かれています。

基本的には対象のコンポーネントの箇所のテンプレートファイルを利用して、テンプレートを上書きして開発していくようになります。

下の図は、どの箇所でどのテンプレートが読まれているのかを簡単に説明した図です。

drupaltehme_setp1

 

各テンプレートファイルについて

以下に各テンプレートファイルについてそれぞれ簡単に説明します。

html.html.twig

ページ全体のテンプレートファイルです。

<html>、<head>、<body>タグはこちらに記載します。

page.html.twig

ページの<body>タグ内のテンプレートファイルです。

node.html.twig

ページのメイン部分のテンプレートファイルです。 

region.html.twig

リージョン部分のテンプレートファイルです。 

block.html.twig  

ブロック部分のテンプレートファイルです。

 

派生テンプレートファイルについて

上記テンプレートファイルをもう少し細かく設定することが可能です。

例えば、下記2テンプレートがある場合

page--node.html.twig

page.html.twig

nodeのページは「page--node.html.twig」が読み込まれ、その他のページは「page.html.twig」が読まれるようになります。

派生テンプレート例一覧

以下に派生テンプレート一覧を記載します。

なお、数字の順に優先的に読み込まれます。

html.html.twig

  1. html--internalviewpath.html.twig
  2. html--node--id.html.twig
  3. html.html.twig

page.html.twig

  1. page--node--edit.html.twig
  2. page--node--1.html.twig
  3. page--node.html.twig
  4. page.html.twig

node.html.twig

  1. node-[content type].html.twig
  2. node.html.twig 

region.html.twig

  1. region--[region].html.twig
  2. region.html.twig 

block.html.twig  

  1. block--[module--delta].html.twig
  2. block--[module].html.twig
  3. block.html.twig

 

テーマ構造についてまとめ

Drupalのテンプレート構造は大まかにはこのようになります。

他にも細かく分けることができるのですが、とりあえずはこちらのファイルを覚えておけば

ある程度のデザインに対応できると思います。

 

カテゴリ

関連タグ

併せて読みたい

--広告--

同じカテゴリのコンテンツ

・非常に簡易的なDrupalのテーマ作成方法を説明します。

ここでは「記事」「基本ページ」等のコンテンツタイプごとに

node.html.tiwgは、page.html.twigの …

ここではテーマにスタイルシートを追加する方法を説明します。

Drupalの関数をフックするためのファイル、thme名.themeについ…