WagtailでWebサイト作成

##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にアクセスしてみましょう。
<img width=500 alt="成功した画像.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650644/543ed90b-240d-9e39-a13d-b44fcdd6fbf5.png">
このようなページが表示されていれば、成功です！

createsuperuserしたので、管理サイトにもアクセスできます。
localhost:8000/adminにアクセスすると、こんな感じの画面が現れます。
<img width=500 alt="管理画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650644/2815f930-a439-1ea2-9a53-cde00698b976.png">
"
usernameとpasswordを入力してログインしてみると、こんな感じです。
<img width=500 alt="管理画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650644/f94a1bc4-4fcd-0b79-fef8-6e450b268830.png">
シンプルで、操作しやすそうですね！


##Homeページに文字を表示する

先ほど表示されたウェルカムページを編集できるようにしていきます。
Wagtailのインストール時に作成されたディレクトリに、mysite/home以下があり、この中にあるmodels.pyがホームページのデータベースを定義しています。models.pyを次のように編集します。

```python
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を追加したので、下の画像のペンで囲った部分が増えました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650644/b68adff9-c8bb-4a14-8fea-1c929585759e.jpeg" width=500>

この管理サイト上のテキストエディタは、編集することはできるのですが、まだ保存しても内容がページに反映されません。Wagtailは、models.pyのクラス名を単語ごとに_で区切った名前のファイルをテンプレートファイルとして使用します（例：HomePageクラスのテンプレートは、home/home_page.html）。テンプレートファイルは、アプリケーション内のtemplatesディレクトリ下に配置します。（今回は、home/templates/home/home_page.html）

今はhome_page.htmlが用意されているので、それを次のように編集します。

```html
{% extends "base.html" %}

{% load wagtailcore_tags %}  <!-- Wagtail独自のテンプレートタグとフィルター　--!>

{% block body_class %}template-homepage{% endblock %}

{% block content %}
    {{ page.body|richtext }}　<!-- ここに、管理サイトのBODYブロックで編集したテキストが入る -->
{% endblock %}
```

これで、管理サイトでの変更がページに反映されるようになりました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650644/e928c497-b09a-478a-638d-a97fceb19f29.jpeg" width=400>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/650644/74cb64a4-1ea1-fdb5-9dc5-8692d75ba992.png" width=400>


##おわりに
この記事では、Django製CMSのWagtailを使ってWebサイトを作成する方法を簡単に書きました。
私もWagtail初心者なのですが、管理サイトがスタイリッシュで気に入りました。これからどんどん使っていこうと思います！
この記事の内容で、何か間違っていることなどがあればご意見ください。

##参考
[Your first Wagtail site - Wagtail 2.12 documentation](https://docs.wagtail.io/en/stable/getting_started/tutorial.html)