こんにちは。この記事は「Craft CMS Advent Calendar 2021」11日目の記事です。

Craft CMS を使って質問と答えをやり取りできるサービスをステップ・バイ・ステップで作ってみるという企画をやっていて、今日はその4日目です。

STEP 3 で管理画面からサンプルデータを投稿しました（記事で触れたものの他にも追加しました）ので、今回からテンプレートでその情報を表示してみたいと思います。

今回のサービスを作りに当たって、本当ならば React や Vue を使って構築したいところですが、それだと Craft CMS 以外の必要な知識が増えてしまいますので、今回は普通に Twig でテンプレートを書いていきます。

ベースのテンプレートを作成

_layout/global-variables.twig

まずは Craft CMS のプロジェクトディレクトリ（インストールしたディレクトリ）にある templates ディレクトリに _layout というディレクトリを作成します。そしてその中に下記の内容を書いた global-variables.twig というテンプレートを作ります。

{# --- 出力 --- #}
{% block htmlPage %}{% endblock %}

_layout/base.twig

次に _layout ディレクトリの中に下記の内容を書いた base.twig を作ります。コメントアウト部分は僕の好みですので、無視していただいてOKです。

{#=======================================================
 #
 # Extends, Imports
 #
 =======================================================#}
{% extends '_layout/global-variables.twig' %}

{#=======================================================
 #
 # ページ固有変数・処理
 #
 =======================================================#}

{#=======================================================
 #
 # 共通変数（extends するページで上書きされる想定）
 #
 =======================================================#}

{#=======================================================
 #
 # 出力
 #
 =======================================================#}
{% block htmlPage %}

{% block htmlTag %}{% endblock %}

{% block prependHtmlHead %}{% endblock %}
{% block htmlHead %}{% endblock %}
{% block appendHtmlHead %}{% endblock %}

{% block bodyTag %}{% endblock %}
{% block prependHtmlBody %}{% endblock %}
{% block htmlBody %}{% endblock %}
{% block appendHtmlBody %}{% endblock %}


{% endblock %}

_layout/base-page.twig

次に _layout ディレクトリの中に下記の内容を書いた base-page.twig を作ります。

{#=======================================================
 #
 # Extends, Imports
 #
 =======================================================#}
{% extends '_layout/base.twig' %}

{#=======================================================
 #
 # ページ固有変数・処理
 #
 =======================================================#}

{#=======================================================
 #
 # 共通変数（extends するページで上書きされる想定）
 #
 =======================================================#}

{#=======================================================
 #
 # 出力
 #
 =======================================================#}
{% block htmlHead %}
    
{% endblock %}

{% block htmlBody %}
    {% block contentHeader %}{% endblock %}
    {% block contentBody %}{% endblock %}
    {% block contentFooter %}{% endblock %}
    {% block contentScript %}{% endblock %}
{% endblock %}

index.twig

次に templates ディレクトリ直下に下記の内容を書いた index.twig を作ります。

{#=======================================================
 #
 # Extends, Imports
 #
 =======================================================#}
{% extends '_layout/base-page.twig' %}

{#=======================================================
 #
 # ページ固有変数・処理
 #
 =======================================================#}

{#=======================================================
 #
 # 共通変数（extends するページで上書きされる想定）
 #
 =======================================================#}

{#=======================================================
 #
 # 出力
 #
 =======================================================#}
{% block contentBody %}
{{ siteName }}
{% endblock %}

これで https://foo-text.example.com にアクセスするとサイト名（ここでは「On The Same Page」）だけが画面に表示されます。

解説

ここまでに作ってきたテンプレートの構造は下記のようになっています。

templates
├── _layout
│   ├── base-page.twig
│   ├── base.twig
│   └── global-variables.twig
└── index.twig

これらのテンプレートを、

• global-variables.twig
  • base.twig
    • base-page.twig
      • index.twig

という順で継承していっています。

これらの中にある block を、継承した子のテンプレートで上書きしていく形になります。これらのテンプレートの役割は以下の通りです。

global-variables.twig

全テンプレートで共通して利用する変数やマクロはここに書きます。

base.twig

HTML ページの大枠を書きます。このテンプレートはほとんどいじりません。

base-page.twig

このテンプレートはウェブページの基本となるテンプレートです。今はざっくりしか書いていませんが、共通パーツはこのテンプレートでパーツのテンプレートを読み込んだりしていきます。構築中はちょくちょくいじるテンプレートです。

index.twig

このテンプレートはトップページ用のテンプレートです。そのページ固有のコンテンツやパーツを書いていきます。

Twig のテンプレートの書き方は実装担当者や会社、プロジェクトによって違いでしょうから参考までに。

今日はここまでにします。次回からテンプレートを実装していこうと思います。

See you next time ?