ステップ・バイ・ステップで Craft CMS を使って質問と答えをやり取りできるサービスを作ってみるシリーズのステップ6です。引き続きテンプレートを実装します。
こんにちは。この記事は「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 %}
でループして処理しています。これでトップページを表示すると以下のように表示されます。
おっと、これだと他のユーザーのプロジェクトも表示されてしまっていてまずいですよね(ここではメインのユーザーの僕のプロジェクトとテスト太郎さんのプロジェクト)。
そこで、ベースクエリを以下のようにします。
{% 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 %}
今日はここまでにしましょう。