Craft CMS で質問と答えのサービスを作ってみる - STEP06:トップページ実装

ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみるシリーズのステップ6です。引き続きテンプレートを実装します。

Craft CMS Logo

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

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

二つ前の STEP 4 でベースとなるテンプレートを実装しましたので、さらに実装を進めていきます。

トップページ

現状のトップページのテンプレートは以下のようになっています。

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

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

{#=======================================================
 #
 # 共通変数
 #
 =======================================================#}

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

{% endblock %}

この中の「ページ固有変数・処理」のところに以下のコードを追加します。

{% set projectsQuery = craft.entries.section('projects').limit(10) %}
{% paginate projectsQuery as pageInfo, pageEntries %}

これだけで、ページ送りを想定したクエリを簡単に作成することができます。

ベースとなるクエリ(以下「ベースクエリ」といいます)は craft.entries.section('projects').limit(10) ととなっていて、セクションハンドルが projects であるセクションに属するエントリを最大 10 件取得しています。

そして、その下の Twig の patinage タグ( Craft CMS が拡張しているタグ)で、上記のベースクエリを元にして、現在のページの情報やページ送りの情報を pageInfo に、現在のページに該当するエントリを pageEntries に格納しています。「現在のページ」というのは、ベースクエリに該当するエントリが limit の件数を超える場合、1ページ目、2ページ目、、、のように続くと思いますが、その何ページ目かのページ(currentPage)と言う意味です。

次に、「出力」の中の {% block contentBody %} {% endblock %} の部分を以下のテンプレートのようにします。

{% block contentBody %}
    {% if pageEntries|length %}
        <ul>
            {% for entry in pageEntries %}
                <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}

これで pageEntries がある場合、{% for entry in pageEntries %} でループして処理しています。これでトップページを表示すると以下のように表示されます。

Clean Shot 2021 12 19 14 06 39

おっと、これだと他のユーザーのプロジェクトも表示されてしまっていてまずいですよね(ここではメインのユーザーの僕のプロジェクトとテスト太郎さんのプロジェクト)。

そこで、ベースクエリを以下のようにします。

{% set projectsQuery = craft.entries.section('projects').authorId(currentUser.id).limit(10) %}

currentUser には、現在 Craft CMS にログインしているユーザーの情報がセットされています。そのユーザーID( currentUser.id )を authorId に渡して、現在ログイン中のユーザーの記事だけに絞っているのです。

トップページ( index.twig )のテンプレートは以下のようになりました。

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

{#=======================================================
 #
 # ページ固有変数・処理
 #
 =======================================================#}
{% set projectsQuery = craft.entries.section('projects').authorId(currentUser.id).limit(10) %}
{% paginate projectsQuery as pageInfo, pageEntries %}

{#=======================================================
 #
 # 共通変数
 #
 =======================================================#}

{#=======================================================
 #
 # 出力
 #
 =======================================================#}
{% block contentBody %}
    {% if pageEntries|length %}
        <ul>
            {% for entry in pageEntries %}
                <li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}

今日はここまでにしましょう。

Published 2021-12-19
Updated 2021-12-28