##Wagtail とは
Wagtailとは、Python・Djangoを用いてWebサイトを作るためのCMSです。
簡単にいうと、WordPressのような感じです。
公式ドキュメントのチュートリアルにしたがって進めていきます。
##インストール
###仮想環境作成
ここでは、.venvという名前の仮想環境を作ります。
この後、mysiteというディレクトリを作成し、その中に仮想環境を作ります。
python3 -m venv mysite/.venv
###インストール
pip install wagtail
インストールしたら、Wagtailのプロジェクトを作成します。
Djangoでいう、django-admin startproject <プロジェクト名>
のような感じです。
.venvと同じディレクトリにプロジェクトを作成したいので、「既にあるmysiteディレクトリの中にWagtailのプロジェクトmysiteを作ってね」と命令します。
wagtail start mysite mysite
後ろのmysiteは、プロジェクト名に変換してください。
これを実行すると、mysiteという名前のディレクトリが追加され、そこに必要なファイルが入っています。
次に、必要なライブラリをインストールします。
mysiteディレクトリ内にrequirements.txtが含まれているので、mysiteディレクトリに入ってpipインストールします。また、migrate, createsuperuserします(ここはDjango自体に必要な部分です)。
>cd mysite
>pip install -r requirements.txt
>python manage.py migrate
>python manage.py createsuperuser
ここまででサイト表示に必要な設定は完了しました。サイトを開いてみましょう。
>python manage.py runserver
ブラウザを開いて、localhost:8000にアクセスしてみましょう。
このようなページが表示されていれば、成功です!
createsuperuserしたので、管理サイトにもアクセスできます。
localhost:8000/adminにアクセスすると、こんな感じの画面が現れます。
"
usernameとpasswordを入力してログインしてみると、こんな感じです。
シンプルで、操作しやすそうですね!
##Homeページに文字を表示する
先ほど表示されたウェルカムページを編集できるようにしていきます。
Wagtailのインストール時に作成されたディレクトリに、mysite/home以下があり、この中にあるmodels.pyがホームページのデータベースを定義しています。models.pyを次のように編集します。
from django.db import models
from wagtail.core.models import Page
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel
class HomePage(Page):
body = RichTextField(blank=True)
content_panels = Page.content_panels + [
FieldPanel('body', classname="full"),
]
bodyはWagtail独自のRichTextFieldとして定義されています。content_panelsでは、ページの編集画面でできることやレイアウトを定義します。
ここまでできたら、python manage.py makemigrations
python manage.py migrate
を実行して、データベースにmodels.pyの変更を反映させましょう。
これで、Wagtailの管理サイトからホームページを編集できるようになります。
管理サイトにアクセスして、Pages→Homepage→Editの順に進みます。先ほどHomePageクラスにbodyとcontent_panelsを追加したので、下の画像のペンで囲った部分が増えました。
この管理サイト上のテキストエディタは、編集することはできるのですが、まだ保存しても内容がページに反映されません。Wagtailは、models.pyのクラス名を単語ごとに_で区切った名前のファイルをテンプレートファイルとして使用します(例:HomePageクラスのテンプレートは、home/home_page.html)。テンプレートファイルは、アプリケーション内のtemplatesディレクトリ下に配置します。(今回は、home/templates/home/home_page.html)
今はhome_page.htmlが用意されているので、それを次のように編集します。
{% extends "base.html" %}
{% load wagtailcore_tags %} <!-- Wagtail独自のテンプレートタグとフィルター --!>
{% block body_class %}template-homepage{% endblock %}
{% block content %}
{{ page.body|richtext }} <!-- ここに、管理サイトのBODYブロックで編集したテキストが入る -->
{% endblock %}
これで、管理サイトでの変更がページに反映されるようになりました。
##おわりに
この記事では、Django製CMSのWagtailを使ってWebサイトを作成する方法を簡単に書きました。
私もWagtail初心者なのですが、管理サイトがスタイリッシュで気に入りました。これからどんどん使っていこうと思います!
この記事の内容で、何か間違っていることなどがあればご意見ください。