Django搭建博客網站(四)

最後一篇主要講講在後臺文章編輯加入markdown,已經在文章詳情頁對markdown的解析.
Django搭建博客網站(一)
Django搭建博客網站(二)
Django搭建博客網站(三)

要用到的package

• django-pagedown
• markdown2

django-pagedown用來在後臺生成markdown編輯器,markdown2則是用來將markdown解析成html顯示在網頁上.

install

$ pip install django-pagedown
$ pip install markdown2

後臺markdown編輯器

使用django-pagedown

1. Get the code: pip install django-pagedown
2. Add pagedown to your INSTALLED_APPS
3. Make sure to collect the static files: python manage.py collectstatic --noinput (and if you are working in a development environment, make sure you are properly serving your static files)
   可以知道安裝了package,還要將django-pagedown
   安裝到項目中:

# settings.py
INSTALLED_APPS = [
    ‘pagedown‘,
    ‘post.apps.PostConfig‘,
    ‘django.contrib.admin‘,
    ‘django.contrib.auth‘,
    ‘django.contrib.contenttypes‘,
    ‘django.contrib.sessions‘,
    ‘django.contrib.messages‘,
    ‘django.contrib.staticfiles‘,
]

但是運行上面第三點裏面的命令,出現了錯誤,最後上stackoverflow查了一下,原來是在settings.py

# settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.normpath(os.path.join(BASE_DIR, ‘staticfiles‘))
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, ‘static‘),
)

此時再運行python manage.py collectstatic --noinput就沒問題了.

接下啦自然就是在後臺添加markdown編輯器了,其實只需要讓文章的內容部分支持markdown就行了,也就是post這個model裏的post_content,修改admin.py文件就夠了:

# admin.py
from django.contrib import admin
from .models import Post, PostTag
from pagedown.widgets import AdminPagedownWidget
from django import forms

class PostForm(forms.ModelForm):
    post_content = forms.CharField(widget=AdminPagedownWidget(show_preview=True))

    class Meta:
        model=Post
        fields=‘__all__‘

class PostAdmin(admin.ModelAdmin):
    form = PostForm
    filter_horizontal = (‘posttag‘,)

admin.site.register(Post,PostAdmin)
admin.site.register(PostTag)

show_preview設置成True會在編輯的時候顯示預覽.
此時運行項目再進後臺,就能使用markdown編輯文章內容了.

markdown解析

當後臺使用markdown編輯後,存入數據庫的文章內容是markdown代碼,直接傳到網頁上顯示的話,也是顯示的markdown代碼.
在django裏面允許每個app為模板添加過濾器.
這裏就可以通過過濾器來實現使用markdown2對markdown的解析.
django的過濾器功能,在每個app的templatetags文件夾下面,需要自行創建,註意創建的時候是一個package,而不是dictionary,也就是包含一個__init__.py文件.
然後,在templatetags文件夾下面創建一個djangomarkdown.py:

# post/templatetags/djangomarkdown.py
import markdown2

from django import template
from django.template.defaultfilters import stringfilter
from django.utils.safestring import mark_safe

register = template.Library()

@register.filter(is_safe=True)
@stringfilter
def djangomarkdown(value):
    return mark_safe(markdown2.markdown(value,
                                        extras=["fenced-code-blocks", "cuddled-lists", "metadata","tables", "spoiler"]))

既然創建了一個過濾器,那麽要怎麽用呢?
其實是直接在html文件裏邊就可以用的,不過要先在html文件裏面加載(以post.html為例):

{% extends ‘post/base.html‘ %}
{% load djangomarkdown %}
{% block title %}
    <title>{{ post.post_title }}</title>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="page-header"><h1>{{ post.post_title }}</h1></div>
        <div class="description">
            <span class="col-md-2"><a href="{% url ‘post:user‘ ‘Chain‘ %}">Chain</a></span><span
                class="col-md-2">{{ post.pub_date }}</span>
            {% if post.pub_date < post.change_date %}
                <span class="col-md-4">last change:{{ post.change_date }}</span>
            {% endif %}
        </div>
        <br>
        <hr>
        <div class="content">
            {{ post.post_content|djangomarkdown }}
        </div>
        <br>
        <hr>
        <div class="btn-group" role="group" aria-label="...">
            {% for tag in post.posttag.all %}
                <a href="{% url ‘post:tag‘ tag.tag_name %}">
                    <button type="button" class="btn btn-info">#{{ tag.tag_name }}</button>
                </a>
            {% endfor %}
        </div>
    </div>
{% endblock %}

先在文件開頭加載自定義的過濾器,然後html裏面就可以直接使用了.

Django搭建博客網站(四)