wagtail使用筆記

1. 安裝訪問（https://docs.wagtail.io/en/v2.8/getting_started/index.html）

# 創建 python3 虛擬環境
virtualenv -p python3 venvpy36new --no-site-packages

# 下載安裝wagtail
pip install wagtail

# 簡單使用
 wagtail start mysite
$ pip install -r requirements.txt
$ ./manage.py migrate
$ ./manage.py createsuperuser
$ ./manage.py runserver

 

2. 中文和時區漢化

/settings/base.py 文件內 語言/時區設置如下：

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_L10N = True
USE_TZ = False

 

3. 模型構建

from django.db import models
from django import forms
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



class BlogIndexPage(Page):

    intro = RichTextField(blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('intro', classname="full")
    ]
    
    class Meta:
        verbose_name = "新聞欄目"
        verbose_name_plural = "新聞欄目"

    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')

        # make the variable 'resources' available on the template
        context['blogpages'] = blogpages
        return context


class BlogPage(Page):
    
    date = models.DateField("發佈日期")
    intro = models.CharField("文章來源", max_length=250)
    body = RichTextField("文章內容", blank=True)
    upfile = models.FileField("視頻附件", blank=True, upload_to="videos")

    search_fields = Page.search_fields + [
        index.SearchField('intro'),
        index.SearchField('body'),
    ]
    
    class Meta:
        verbose_name = "新聞內容"
        verbose_name_plural = "新聞內容"

    content_panels = Page.content_panels + [
        FieldPanel('date'),
        FieldPanel('intro'),
        InlinePanel('gallery_images', label="圖像(可選)"),
        FieldPanel('upfile'), # label="視頻"),
        FieldPanel('body', classname="full"),
    ]



    def main_image(self):
        gallery_item = self.gallery_images.first()
        if gallery_item:
            return gallery_item.image
        else:
            return None


class BlogPageGalleryImage(Orderable):
    name = "圖片長廊"
    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'),
    ]

 

4.1 首頁模板

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

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


{% block content %}

<div class="container">
<div class="text-center">
        <img src= "/static/images/yqmap.png" width="80%" />
        替換爲疫情動態圖地址，上面的圖片刪除
        <iframe name="myiframe"  id="myrame-record-query"  src="https://yiqing.ahusmart.com/"  frameborder="0" align="middle"  width="80%"  height="700px"  scrolling="yes">
        </iframe>
</div>

    <hr>

    <div class="card-deck mb-2">

        {% for post in yiqing %}
            {% with post=post.specific %}

                <div class="card" style="width: 18em;">

                        {% with post.main_image as main_image %}
                            {% if main_image %}
                                {% image main_image fill-320x240 as header_image %}
                                <a href="{% pageurl post %}">
                                    <img src="{{ header_image.url }}"  class="card-img-top" />
                                </a>
                            {% endif %}
                        {% endwith %}

                        <div class="card-body">
                        <h3 class="card-title"><a href="{% pageurl post %}">{{ post.title }}</a></h5>
                        <p class="card-text">
                            {% if post.intro %}
                                {{ post.intro|richtext }}
                            {% else %}
                                {{ post.body|richtext|truncatewords_html:80 }}
                            {% endif %}
                        </p>
                    </div>

                    <div class="card-footer">
                        <small class="text-muted"><a href="{% pageurl post %}" class="btn btn-primary">閱讀全文</a></small>
                    </div>
                </div>

            {% endwith %}
        {% endfor %}

    </div>
    <div class="row">
        <div class="col-md-6">
        <h3 class="title_bg">上級指示</h3>
        <ul class="list-group">
        {% for post in notice %}
            <a href="{% pageurl post %}" class="list-group-item">{{ post.title|richtext|truncatewords_html:25 }}</a>
        {% endfor %}
        </ul>
        </div>
        
        <div class="col-md-6">
            <a href="/上級規定"><h3 class="title_bg">上級規定</h3></a>
        <ul class="list-group">
        {% for post in guiding %}
            <a href="{% pageurl post %}" class="list-group-item">{{ post.title|richtext|truncatewords_html:25 }}</a>
        {% endfor %}
        </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <a href="/疫情動態"><h3 class="title_bg2">疫情動態</h3></a>
        <ul class="list-group">
        {% for post in budui %}
            <a href="{% pageurl post %}" class="list-group-item">{{ post.title|richtext|truncatewords_html:25 }}</a>
        {% endfor %}
        </ul>
        </div>
        
        <div class="col-md-6">
            <a href="/防控措施"><h3 class="title_bg2">防控措施</h3></a>
        <ul class="list-group">
        {% for post in cuoshi %}
            <a href="{% pageurl post %}" class="list-group-item">{{ post.title|richtext|truncatewords_html:25 }}</a>
        {% endfor %}
        </ul>
        </div>
    </div>

    <div class="container">
        <img src="/static/images/logoyqfk.png" width="100%" />
        <a href="常識教育">    <h3 id="fkcs" class="title_bg">常識教育</h3></a>

        <div class="row">
        {% for post in changshi %}
        
            {% with post=post.specific %}

                <div class="col-md-4">

                        {% with post.main_image as main_image %}
                            {% if main_image %}
                                {% image main_image fill-320x240 as header_image %}
                                <a href="{% pageurl post %}">
                                    <img class="img-thumbnail" src="{{ header_image.url }}" width="100%"/>
                                    <p class="text-info text-center">{{ post.title }}</p>
                                </a>
                            {% endif %}
                        {% endwith %}
                </div>
                {% endwith %}
        {% endfor %}
        </div>
    </div>

    <hr>
        <a class="nav-link text-center" href="http://18.xx.xx.xxx/">更多文章</a>
    <hr>

{% endblock %}

 

4.2. 新聞欄目頁

<!-- blog/templates/blog/blog_index_page.html   -->

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

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

{% block content %}
    
    <div class="box-container newscontent">

    {% for post in blogpages %}
        {% with post=post.specific %}
            <h2><a href="{% pageurl post %}">{{ post.title }}</a></h2>
            <p class="text-muted">{{ post.date}}  |  {{ post.intro }} </p>
            {% with post.main_image as main_image %}
                {% if main_image %}
                    {% image main_image fill-320x200 %}
                {% elif post.upfile %}
                <video class="col-md-4">
                    <source src="/media/{{ post.upfile }}" type="video/mp4">
                    <source src="/media/{{ post.upfile }}" type="video/ogg">
                    <source src="/media/{{ post.upfile }}" type="video/webm">
                        瀏覽器不支持，請下載谷歌瀏覽器播放
                </video>
                {% endif %}
            {% endwith %}
            <div class="newscategory">{{ post.body|richtext|truncatewords_html:2 }}</div>
        {% endwith %}
        <hr />
    {% endfor %}
    </div>
{% endblock %}

 

4.3. 新聞內容頁

blog/templates/blog/blog_page.html

{% extends "base.html" %}

{% load wagtailcore_tags wagtailimages_tags %}

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

{% block content %}

    <div class="box-container">
        <img src="/static/images/疫情.jpg" width="100%" height="250px" />

    <h1 class="page-header text-center">
        <div class="newstitle">{{ page.title }}</div>
    </h1>
    <div class="row text-center">
        <br />
    <p class="meta date col-md-6">發佈時間： {{ page.date }}</p>
    <div class="intro col-md-6">信息來源： {{ page.intro }}</div>
    </div>
    <hr />
    <div class="newscontent xx-large">
        {{ page.body|richtext }}
        {% if page.upfile %}
            <video width='100%' controls>
                <source src='/media/{{ page.upfile }}' type='video/mp4'>
                <source src='/media/{{ page.upfile }}' type='video/ogg'>
                <source src='/media/{{ page.upfile }}' type='video/webm'>
                    抱歉，瀏覽器不支持該視頻，請下載安裝谷歌瀏覽器
            </video>
        {% endif %}

        {% for item in page.gallery_images.all %}
            <div class="container text-center">
                {% image item.image width-900 %}
                <p>{{ item.caption }}</p>
            </div>
        {% endfor %}
    
    </div>
    <p class="text-muted text-center"><a href="{{ page.get_parent.url }}" style="color:#222">【返回上級】</a> &nbsp; &nbsp;
    <a href="javascript:self.print();" class="btn-a" style="color:#222;">【打印本頁】</a>
    </p>
    </div>

{% endblock %}