【Craft 3 サイト構築の基本】インデックスページのテンプレート作成(準備編)

これは Craft CMS Advent Calendar 2018 24日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」として、2回に分けてインデックスページのテンプレート作成を行います。

詳細ページと同様に、公式デモサイト Happy Lager のフロントページを見ながら画面ごとの構成とテンプレートで必要な処理について確認しておきますので、「Craft 3 のデモコンテンツをインストールしてみよう」を参考に公式デモサイトをローカル環境に用意するなどしてください。

「サービス」インデックスページ

画面構成

「サービス」インデックスページ

「サービス」インデックスページのメインコンテンツは、次の要素で構成されています。

  1. 「サービス(インデックス)」エントリの大見出し
  2. 「サービス(インデックス)」エントリの本文
  3. 「サービス」セクションのエントリデータ
  4. エントリのメイン画像
  5. エントリのタイトル
  6. エントリの概要文
  7. エントリ詳細ページの URL

テンプレート

画面構成をもとに、テンプレートで必要になる処理をまとめてみます。

  1. 「サービス(インデックス)」エントリの大見出し、本文の出力
  2. 「サービス」セクションに含まれるエントリの取得・出力
    • メイン画像の取得・サムネイル生成
    • タイトル、概要文、詳細ページ URLの出力

シングル セクション「サービス(インデックス)」のテンプレート(templates/service/_index.html)が修正対象となります。

「ワークス」インデックスページ

画面構成

「ワークス」インデックスページ

「ワークス」インデックスページのメインコンテンツは、次の要素で構成されています。

  1. 「ワークス(インデックス)」エントリの大見出し
  2. 「ワークス(インデックス)」エントリの本文
  3. 「ワークス」セクションのエントリデータ
  4. エントリの大見出し
  5. エントリの小見出し
  6. エントリの概要文
  7. エントリ詳細ページの URL
  8. エントリのメイン画像
  9. エントリのタイトル
  10. エントリの概要文
  11. エントリ詳細ページの URL
  12. エントリのメイン画像

「ワークス」セクションのエントリデータ では、最新1件だけ内容が異なります。

テンプレート

画面構成をもとに、テンプレートで必要になる処理をまとめてみます。

  1. 「ワークス(インデックス)」エントリの大見出し、本文の出力
  2. 「ワークス」セクションに含まれるエントリの取得・出力
    • メイン画像の取得・サムネイル生成
    • タイトル、大見出し、小見出し、概要文、詳細ページ URLの出力

ここでのポイントは「ワークス」セクションに含まれるエントリのループ処理で、最新1件のみ出力する項目やマークアップを変化させることです。

なお、シングル セクション「ワークス(インデックス)」のテンプレート(templates/work/_index.html)が修正対象となります。

トップページ

画面構成

トップページ

トップページのメインコンテンツは、次の要素で構成されています。

  1. 「トップページ」エントリのヒーロー画像
  2. 「ワークス」セクションのエントリデータ
  3. エントリのサムネイル画像
  4. エントリのタイトル
  5. エントリの概要文
  6. エントリ詳細ページの URL
  7. 「トップページ」エントリのお客様の声(行列フィールド)
  8. お客様の声 ブロックの引用
  9. お客様の声 ブロックの画像
  10. お客様の声 ブロックの名前
  11. 「トップページ」エントリのクライアントロゴ

テンプレート

画面構成をもとに、テンプレートで必要になる処理をまとめてみます。

  1. ヒーロー画像の取得・サムネイル生成
  2. 「ワークス」セクションに含まれるエントリ最新3件の取得・出力
    • サムネイル画像の取得・サムネイル生成
    • タイトル、概要文、詳細ページ URLの出力
  3. お客様の声の出力
    • 画像の取得・出力
    • 引用、名前の出力
  4. クライアントロゴの取得・出力

シングル セクション「トップページ」のテンプレート(templates/index.html)が修正対象となります。

まとめ

ここでは完成状態のフロントエンド画面を参考に、インデックステンプレートの調整内容を洗い出してみました。
いずれのページも比較的シンプルな構成で、かつ、これまでに同様の処理を定義してきているため、実際のコードをイメージできそうですよね?

次回は、それぞれの「インデックスページのテンプレート作成」を行います。