Craft CMS

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

2021-12-19
7分で読了
更新: 2025-12-26

目次

こんにちは。この記事は「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 %}
        
    {% 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 %}
        
    {% endif %}
{% endblock %}

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

この記事をシェア

関連記事