Wagtail+Puputでブログ最新記事（TOP3）のリストを表示

Wagtailで作成したページにPuputのブログ更新履歴を表示したい

Wagtail+Puputでブログを更新しています。TOPページはWagtailのhome_pageで作成し、ブログはPuputを使っています。

Topページにブログの更新情報を一覧で表示しているのですが、現状は手動更新している（そもそも記事が3つしかないので更新すらしていない。。。）

ここを最新の追加記事を自動で取得するように変更したい。

参考サイト本家マニュアル　より、やり方を確認すると、

すべてのページには、テンプレートがレンダリングされるたびに呼び出され、テンプレートにバインドする変数の辞書を返すget_contextメソッドがあります。 テンプレートコンテキストにさらに変数を追加するには、このメソッドをオーバーライドできます。

https://docs.wagtail.io/en/v2.6.1/topics/pages.html#customising-template-context

home_page.htmlのget_contextメソッドを利用してもよいのですが、それではプライバシーポリシーなどもブログ一覧を取得することになります。それは性能上よろしくない（不要なIOを発生させている）ため、top_page.htmlを新たに作成し、そちらのget_contextメソッドで取得するようにします。

もちろん、TOPページのコンテキストタイプを変更する必要がありますが。

修正箇所

以下のサイトを参考にさせて頂きました。修正箇所は少なく、models.pyの修正とtop_page.htmlの追加です。

参考サイト

• Wagtail Puput の Blog Entry の更新日付を Update する
  • Puputのページモデル（EntryPage)について
• 本家マニュアル
  • ページのカスタマイズ方法
• 本家マニュアル Page QuerySet reference
  • SQLの書き方
• 本家マニュアル Model Reference
  • Page Modelが持っているエンティティ調査
• SQLのSELECT文を、DjangoのQuerySet APIで書いてみた
  • DjangoでのSQLの書き方

models.py

from puput.models import EntryPage
...
class TopPage(Page):
    body = RichTextField(blank=True)
    news = RichTextField(blank=True)
    note = RichTextField(blank=True)
    blog = RichTextField(blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('body', classname="full"),
        FieldPanel('news', classname="full"),
        FieldPanel('note', classname="full"),
        FieldPanel('blog', classname="full"),
    ]

    def get_context(self, request):
        context = super().get_context(request)

        # Add extra variables and return the updated context
        context['blog_entries'] = EntryPage.objects.live().public().order_by('-first_published_at')[:3]
        return context

top_page.html

        <dl class="date-list">
          {% for entry in blog_entries %}
            <dt>{{ entry.first_published_at|date:"Y/m/d f" }}</dt>
            <dd><a href="{% pageurl entry %}">{{ entry.title }}</a></dd>
          {% endfor %}
        </dl>

結果

DB更新

モデルを変更したのでマイグレーションを実行します。

root@823a5b2f6f52:/code/maitokublog# python manage.py makemigrations
Migrations for 'home':
  home/migrations/0005_toppage.py
    - Create model TopPage
root@823a5b2f6f52:/code/maitokublog# python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, home, puput, sessions, taggit, wagtailadmin, wagtailcore, wagtaildocs, wagtailembeds, wagtailforms, wagtailimages, wagtailredirects, wagtailsearch, wagtailusers
Running migrations:
  Applying home.0005_toppage... OK
root@823a5b2f6f52:/code/maitokublog#                               

画面にブログの更新履歴が表示されました。

見た目にはわかりづらいですが、更新履歴が表示されました。

wagtailの管理画面上は4つの記事があり、最新の記事から３つが表示されています。

所感

wagtail+puputを少しづつ勉強しています。