Craft CMS で質問と答えのサービスを作ってみる - STEP04：ベーステンプレートを作成
ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみるシリーズのステップ4です。今日からテンプレートの実装を始めます。
こんにちは。この記事は「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
- base-page.twig
- base.twig
という順で継承していっています。
これらの中にある block を、継承した子のテンプレートで上書きしていく形になります。これらのテンプレートの役割は以下の通りです。
global-variables.twig
全テンプレートで共通して利用する変数やマクロはここに書きます。
base.twig
HTML ページの大枠を書きます。このテンプレートはほとんどいじりません。
base-page.twig
このテンプレートはウェブページの基本となるテンプレートです。今はざっくりしか書いていませんが、共通パーツはこのテンプレートでパーツのテンプレートを読み込んだりしていきます。構築中はちょくちょくいじるテンプレートです。
index.twig
このテンプレートはトップページ用のテンプレートです。そのページ固有のコンテンツやパーツを書いていきます。
Twig のテンプレートの書き方は実装担当者や会社、プロジェクトによって違いでしょうから参考までに。
今日はここまでにします。次回からテンプレートを実装していこうと思います。
See you next time 👋
, Updated 2022-01-05