ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみるシリーズのステップ4です。今日からテンプレートの実装を始めます。
こんにちは。この記事は「Craft CMS Advent Calendar 2021」11日目の記事です。
Craft CMS を使って質問と答えをやり取りできるサービスをステップ・バイ・ステップで作ってみるという企画をやっていて、今日はその4日目です。
STEP 3 で管理画面からサンプルデータを投稿しました(記事で触れたものの他にも追加しました)ので、今回からテンプレートでその情報を表示してみたいと思います。
今回のサービスを作りに当たって、本当ならば React や Vue を使って構築したいところですが、それだと Craft CMS 以外の必要な知識が増えてしまいますので、今回は普通に Twig でテンプレートを書いていきます。
まずは Craft CMS のプロジェクトディレクトリ(インストールしたディレクトリ)にある templates
ディレクトリに _layout
というディレクトリを作成します。そしてその中に下記の内容を書いた global-variables.twig
というテンプレートを作ります。
{# --- 出力 --- #}
{% block htmlPage %}{% endblock %}
次に _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
を作ります。
{#=======================================================
#
# 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
これらのテンプレートを、
という順で継承していっています。
これらの中にある block を、継承した子のテンプレートで上書きしていく形になります。これらのテンプレートの役割は以下の通りです。
全テンプレートで共通して利用する変数やマクロはここに書きます。
HTML ページの大枠を書きます。このテンプレートはほとんどいじりません。
このテンプレートはウェブページの基本となるテンプレートです。今はざっくりしか書いていませんが、共通パーツはこのテンプレートでパーツのテンプレートを読み込んだりしていきます。構築中はちょくちょくいじるテンプレートです。
このテンプレートはトップページ用のテンプレートです。そのページ固有のコンテンツやパーツを書いていきます。
Twig のテンプレートの書き方は実装担当者や会社、プロジェクトによって違いでしょうから参考までに。
今日はここまでにします。次回からテンプレートを実装していこうと思います。
See you next time 👋