wagtail Your first Wagtail site を参考に、Blog を作る

wagtail は、素のアプリケーションをインストールすると、テンプレート等はインストールされません。
Blog 用途で使用する場合は、springload/awesome-wagtail: A curated list of awesome packages, articles, and other cool resources from the Wagtail community. に記載されている Blog 用途の拡張プラグインを使うのがよさそうです。

個人的な目的で、イチから Model を作りたかったので、Your first Wagtail site — Wagtail 1.13.1 documentation を参考に Blog を作成してみました。
結果を以下に記載します。

前提

以下の環境で作業は実施しています。

• OS
  

  % sw_vers
  ProductName:    Mac OS X
  ProductVersion: 10.13.1
  BuildVersion:   17B1003
  

• Python の Version
  

  % python3 -V
  Python 3.6.2
  

Blog作成

Blog アプリケーションの作成

Blog 用のアプリケーションを作成します。

python3 manage.py startapp blog 

BlogIndexPage の作成

作成した blog アプリケーションの、models.py に、BlogIndex を追加します。

• blog/models.py
  

  from wagtail.wagtailcore.models import Page
  from wagtail.wagtailcore.fields import RichTextField
  from wagtail.wagtailadmin.edit_handlers import FieldPanel
  
  
  class BlogIndexPage(Page):
      intro = RichTextField(blank=True)
  
      content_panels = Page.content_panels + [
          FieldPanel('intro', classname="full")
      ]
  

この BlogIndexPage に対するテンプレートファイルを作成します。

• blog/templates/blog/blog_index_page.html
  

  {% extends "base.html" %}
  
  {% load wagtailcore_tags %}
  
  {% block body_class %}template-blogindexpage{% endblock %}
  
  {% block content %}
      <h1>{{ page.title }}</h1>
  
      <div class="intro">{{ page.intro|richtext }}</div>
  
      {% for post in page.get_children %}
          <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
          {{ post.specific.intro }}
          {{ post.specific.body|richtext }}
      {% endfor %}
  
  {% endblock %}
  

BlogPage の作成

model.py に BlogPage を追加します。
BlogIndexPage に更に追記する形になりますので、全量を記載します。

• blog/models.py
  

  from django.db import models
  
  # Create your models here.
  from wagtail.wagtailcore.models import Page
  from wagtail.wagtailcore.fields import RichTextField
  from wagtail.wagtailadmin.edit_handlers import FieldPanel
  from wagtail.wagtailsearch import index
  
  
  class BlogIndexPage(Page):
      intro = RichTextField(blank=True)
  
      content_panels = Page.content_panels + [
          FieldPanel('intro', classname="full")
      ]
  
  
  class BlogPage(Page):
      date = models.DateField("Post date")
      intro = models.CharField(max_length=250)
      body = RichTextField(blank=True)
  
      search_fields = Page.search_fields + [
          index.SearchField('intro'),
          index.SearchField('body'),
      ]
  
      content_panels = Page.content_panels + [
          FieldPanel('date'),
          FieldPanel('intro'),
          FieldPanel('body', classname="full"),
      ]
  

• blog/templates/blog/blog_page.html
  

  {% extends "base.html" %}
  
  {% load wagtailcore_tags %}
  
  {% block body_class %}template-blogpage{% endblock %}
  
  {% block content %}
      <h1>{{ page.title }}</h1>
      <p class="meta">{{ page.date }}</p>
  
      <div class="intro">{{ page.intro }}</div>
  
      {{ page.body|richtext }}
  
      <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
  
  {% endblock %}
  

Migrationを実施

Migration を実施します。実施前に、base.py の　INSTALLED_APPS に blog アプリケーションを追加します。

• アプリケーションの追加
  

  # Application definition
  INSTALLED_APPS = [
      'home',
      'search',
      'blog',
  

• Migrationの実行
  

  python3 manage.py makemigrations
  python3 manage.py migrate
  

Blog の投稿をしてみる

この状態でBlog の投稿を行います。

• サーバ起動
  

  python3 manage.py runserver
  

• ログイン
  http://127.0.0.1:8000/admin/ からログインします。
  

• ページメニューから遷移
  左メニューから、サイトの Root ページ に遷移します。
  

• Rootページ
  
  既存サイトにページ追加する場合は、Home ページの 子ページとして、ページは追加する旨の説明があります。
  Home ページ配下に移動します。

• 子ページを追加をクリック
  HOMEページに移動して、子ページを追加をクリックします。
  

• BlogIndexページを追加
  Blog Index Page を追加します。
  

• コンテンツの内容の入力 コンテンツの内容を入力して、プロモートタブをクリックします。
  

• URLの変更
  スラッグに、URL を入力します。HOME がドメイン直下で、ドメイン直下からのURLになります。
  この場合は、http://127.0.0.1/blog でアクセスできます。
  入力後画面下部のプルダウンから公開を選択します。
  

• Blogページを追加
  続いて BlogIndex ページの子ページとして、Blog ページを追加します。
  手順は BlogIndex 追加時と同様です。以下は Blog ページを3ページ子ページとして追加しています。
  

• フロント側から閲覧
  以下のように表示されます。
  

wagtail の機能について補足

以下、wagtail の template、model の機能について補足します。

• {% for post in page.get_children %} について
  page.get_children で、表示対象ページの子ページが取得できます。
  今回の場合、BlogIndex の 子ページとして、3ページあるので、それらが取得されています。

• page.get_parent.url について
  表示対象ページの親ページのURLが取得できます。

• content_panels について
  model の content_panels ですが、このList に追加したフィールドがADMIN で編集可能になります。
  試しに削除してみたところ、ADMIN に対象項目が表示されなくなりました。

このほかにも、Your first Wagtail site — Wagtail 1.13.1 documentation には、Image や、Tagを追加するサンプルが記載されていますが、最低限登録ができるようになったので、一旦別のことを進めます。
以上です。