Wagtail 教程系列 記錄了基于 Wagtail 搭建博客站點的整個過程，博客站點 所呈現(xiàn)的即是搭建過程的最新效果。
更多 Wagtail 內(nèi)容：https://slowread.cn/wagtail-tutorials
博客列表和文章正文
- 執(zhí)行 python manage.py startapp blog 創(chuàng)建 blog app.
- 編輯 slowread/settings/base.py 在 INSTALLED_APPS 中添加 blog app.
博客列表實現(xiàn)
編輯 blog/models.py 添加以下內(nèi)容：
from wagtail.core.models import Page
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel
class BlogIndexPage(Page):
intro = RichTextField(blank=True)
content_panels = Page.content_panels + [
FieldPanel('intro', classname="full")
]
Copy
執(zhí)行 python manage.py makemigrations && python manage.py migrate
因為模型名字為BlogIndexPage，因此模板文件的名字就成了blog/templates/blog/blog_index_page.html汪茧，模板文件內(nèi)容如下：
{% 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 %}
Copy
博客正文實現(xiàn)
編輯 blog/models.py 添加以下內(nèi)容：
from django.db import models
from wagtail.core.models import Page
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel
from wagtail.search import index
# Keep the definition of BlogIndexPage, and add:
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"),
]
Copy
執(zhí)行 python manage.py makemigrations && python manage.py migrate.
新建模板文件 blog/templates/blog/blog_page.html ,內(nèi)容如下：
{% 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 %}
Copy
查看效果
進入 Wagtail 管理后臺：
- 選擇 頁面裂垦，Home增显，添加子頁面胃碾，Blog index page涨享，編輯博客列表標題，發(fā)布仆百；
- 選擇 頁面厕隧，Home，點擊上一步創(chuàng)建的 Blog index page 最右側右箭頭俄周，添加子頁面吁讨，選擇 Blog page，編輯博客文章內(nèi)容峦朗，發(fā)布建丧；重復幾次發(fā)布幾篇不同文章；
打開 http://127.0.0.1:8000/blog 波势，查看效果翎朱。
一點改進
- 博客文章列表根據(jù)創(chuàng)建時間倒敘排列。
- 只顯示發(fā)布的文章尺铣。
編輯 blog/models.py 拴曲，修改以下相應內(nèi)容：
class BlogIndexPage(Page):
intro = RichTextField(blank=True)
def get_context(self, request):
# Update context to include only published posts, ordered by reverse-chron
context = super().get_context(request)
blogpages = self.get_children().live().order_by('-first_published_at')
context['blogpages'] = blogpages
return context
Copy
編輯 blog/templates/blog/blog_index_page.html，修改 {% for post in page.get_children %} 為 {% for post in blogpages %}凛忿。
現(xiàn)在澈灼，可以在管理后臺撤銷發(fā)布一篇文章，查看效果店溢。
圖像
編輯 blog/models.py 添加 BlogPageGalleryImage model叁熔，內(nèi)容如下：
from django.db import models
# New imports added for ParentalKey, Orderable, InlinePanel, ImageChooserPanel
from modelcluster.fields import ParentalKey
from wagtail.core.models import Page, Orderable
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel, InlinePanel
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtail.search import index
# ... (Keep the definition of BlogIndexPage, and update BlogPage:)
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"),
InlinePanel('gallery_images', label="Gallery images"),
]
class BlogPageGalleryImage(Orderable):
page = ParentalKey(BlogPage, on_delete=models.CASCADE, related_name='gallery_images')
image = models.ForeignKey(
'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
)
caption = models.CharField(blank=True, max_length=250)
panels = [
ImageChooserPanel('image'),
FieldPanel('caption'),
]
Copy
執(zhí)行 python manage.py makemigrations && python manage.py migrate.
編輯博客文章頁面模板文件 blog/templates/blog/blog_page.html ,內(nèi)容如下：
{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_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 }}
{% for item in page.gallery_images.all %}
<div style="float: left; margin: 10px">
{% image item.image fill-320x240 %}
<p>{{ item.caption }}</p>
</div>
{% endfor %}
<p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
{% endblock %}
Copy
現(xiàn)在，可以在管理后臺床牧，編輯一篇文章荣回，增加圖片內(nèi)容，然后發(fā)布戈咳，查看效果驹马。
再次改進博客列表顯示效果，編輯 blog/models.py 修改 BlogPage model 為下面內(nèi)容：
class BlogPage(Page):
date = models.DateField("Post date")
intro = models.CharField(max_length=250)
body = RichTextField(blank=True)
def main_image(self):
gallery_item = self.gallery_images.first()
if gallery_item:
return gallery_item.image
else:
return None
search_fields = Page.search_fields + [
index.SearchField('intro'),
index.SearchField('body'),
]
content_panels = Page.content_panels + [
FieldPanel('date'),
FieldPanel('intro'),
FieldPanel('body', classname="full"),
InlinePanel('gallery_images', label="Gallery images"),
]
Copy
編輯博客文章頁面模板文件 blog/templates/blog/blog_index_page.html ,內(nèi)容如下：
{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block body_class %}template-blogindexpage{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<div class="intro">{{ page.intro|richtext }}</div>
{% for post in blogpages %}
{% with post=post.specific %}
<h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
{% with post.main_image as main_image %}
{% if main_image %}{% image main_image fill-160x100 %}{% endif %}
{% endwith %}
<p>{{ post.intro }}</p>
{{ post.body|richtext }}
{% endwith %}
{% endfor %}
{% endblock %}
Copy
查看效果除秀，包含圖像的文章在博客列表頁面增加了縮略圖顯示糯累。
標簽
再次修改 blog/models.py , 增加/修改以下相應內(nèi)容:
from django.db import models
# New imports added for ClusterTaggableManager, TaggedItemBase, MultiFieldPanel
from modelcluster.fields import ParentalKey
from modelcluster.contrib.taggit import ClusterTaggableManager
from taggit.models import TaggedItemBase
from wagtail.core.models import Page, Orderable
from wagtail.core.fields import RichTextField
from wagtail.admin.edit_handlers import FieldPanel, InlinePanel, MultiFieldPanel
from wagtail.images.edit_handlers import ImageChooserPanel
from wagtail.search import index
# ... (Keep the definition of BlogIndexPage)
class BlogPageTag(TaggedItemBase):
content_object = ParentalKey(
'BlogPage',
related_name='tagged_items',
on_delete=models.CASCADE
)
class BlogPage(Page):
date = models.DateField("Post date")
intro = models.CharField(max_length=250)
body = RichTextField(blank=True)
tags = ClusterTaggableManager(through=BlogPageTag, blank=True)
# ... (Keep the main_image method and search_fields definition)
content_panels = Page.content_panels + [
MultiFieldPanel([
FieldPanel('date'),
FieldPanel('tags'),
], heading="Blog information"),
FieldPanel('intro'),
FieldPanel('body'),
InlinePanel('gallery_images', label="Gallery images"),
]
Copy
執(zhí)行 python manage.py makemigrations && python manage.py migrate.
進入管理后臺，編輯部分博客文章册踩，增加自定義標簽泳姐。
編輯博客文章頁面模板文件 blog/templates/blog/blog_page.html ,在文件最后增加如下內(nèi)容：
{% if page.tags.all.count %}
<div class="tags">
<h3>標簽</h3>
{% for tag in page.tags.all %}
<a href="{% slugurl 'tags' %}?tag={{ tag }}"><button type="button">{{ tag }}</button></a>
{% endfor %}
</div>
{% endif %}
Copy
修改 blog/models.py , 增加 BlogTagIndexPage model，內(nèi)容如下:
class BlogTagIndexPage(Page):
def get_context(self, request):
# Filter by tag
tag = request.GET.get('tag')
blogpages = BlogPage.objects.filter(tags__name=tag)
# Update template context
context = super().get_context(request)
context['blogpages'] = blogpages
return context
Copy
執(zhí)行 python manage.py makemigrations && python manage.py migrate.
進入管理后臺暂吉，在 Home 頁面下胖秒，增加 Blog tag index page 類型的子頁面缎患，名字為 標簽，推薦中縮略名為 tags阎肝。
新建對應標簽頁的頁面模板文件 blog/blog_tag_index_page.html挤渔，內(nèi)容如下：
{% extends "base.html" %}
{% load wagtailcore_tags %}
{% block content %}
{% if request.GET.tag|length %}
<h4>Showing pages tagged "{{ request.GET.tag }}"</h4>
{% endif %}
{% for blogpage in blogpages %}
<p>
<strong><a href="{% pageurl blogpage %}">{{ blogpage.title }}</a></strong><br />
<small>Revised: {{ blogpage.latest_revision_created_at }}</small><br />
{% if blogpage.author %}
<p>By {{ blogpage.author.profile }}</p>
{% endif %}
</p>
{% empty %}
No pages found with that tag.
{% endfor %}
{% endblock %}
Copy
打開 http://127.0.0.1:8000/blog/ ，查看效果风题。
更多 Wagtail 內(nèi)容：https://slowread.net/tags/?tag=Wagtail
