Craft CMS で質問と答えのサービスを作ってみる - STEP04:ベーステンプレートを作成

ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみるシリーズのステップ4です。今日からテンプレートの実装を始めます。

Craft CMS Logo

こんにちは。この記事は「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 %}
<!DOCTYPE html>
{% block htmlTag %}<html>{% endblock %}
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
{% block prependHtmlHead %}{% endblock %}
{% block htmlHead %}{% endblock %}
{% block appendHtmlHead %}{% endblock %}
</head>
{% block bodyTag %}<body>{% endblock %}
{% block prependHtmlBody %}{% endblock %}
{% block htmlBody %}{% endblock %}
{% block appendHtmlBody %}{% endblock %}
</body>
</html>
{% endblock %}

_layout/base-page.twig

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

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

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

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

{#=======================================================
 #
 # 出力
 #
 =======================================================#}
{% block htmlHead %}
    <title>{{ siteName }}</title>
{% 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 %}
<h1>{{ siteName }}</h1>
{% 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

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

Clean Shot 2021 12 11 20 28 02

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

global-variables.twig

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

base.twig

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

base-page.twig

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

index.twig

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

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

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

See you next time 👋

Published 2021-12-11
Updated 2022-01-05