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.pyINSTALLED_APPSblog アプリケーションを追加します。

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

    # 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/ からログインします。
    "LOGIN"

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

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

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

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

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

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

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

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


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を追加するサンプルが記載されていますが、最低限登録ができるようになったので、一旦別のことを進めます。
以上です。

コメント