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之前,去它的github地址看了一下.

Get the code: pip install django-pagedown

Add pagedown to your INSTALLED_APPS

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里面就可以直接使用了.