django1.10开发博客（11）——markdown与多说评论功能

在写博客的过程我们可以发现，文章正文的格式十分单一，而且没有评论功能，这怎么能和别人互动呢？这一节我们要实现markdown和多说评论功能。

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。Markdown的语法十分简单，常用的标记符号也不超过十个，而且markdown和html语法可完美兼容。本博客到目前为止的所有文章都是有markdown语法写成。

这里推荐markdown的一些资料：markdown官网，语法快速入门，Markdown——入门指南

Markdown的实现

首先安装markdown2，在PyCharm用Project Interpreter或者用虚拟环境下命令行安装都可以，不多说了。

接下来只要用markdown2过滤文章正文text就可以了。在views.py导入插件：

import markdown2

然后在post_list，post_detail，post_draft_list，search_tag，blog_search等逻辑中进行markdown过滤，过滤位置就在返回posts或者post_list参数前。比如post_list的过滤就是：

def post_list(request):
    postsAll = Article.objects.annotate(num_comment=Count('id')).filter(
        published_date__isnull=False).order_by('-published_date')
    for p in postsAll:
        p.click = cache_manager.get_click(p)
    paginator = Paginator(postsAll, 10)  # Show 10 contacts per page
    page = request.GET.get('page')
    posts = []
    try:
        posts = paginator.page(page)
    except PageNotAnInteger:
        # If page is not an integer, deliver first page.
        posts = paginator.page(1)
    except EmptyPage:
        # If page is out of range (e.g. 9999), deliver last page of results.
        posts = paginator.page(paginator.num_pages)
    finally:
        for pp in posts:
            pp.text = markdown2.markdown(pp.text, extras=['fenced-code-blocks'], )
    return render(request, 'blog/post_list.html', {'posts': posts, 'page': True})

extras=['fenced-code-blocks']使用了markdown的一个重要特性fetch code。通常markdown要标记一段代码时，必须在每行代码前缩进 4 个空格，这很不方便。而 fetch code可以让我们在写文章时只按照下面的输入就可以标记一段代码，相比每行缩进四个空格要方便很多：

[```]（实际中去掉中括号）
def test_function():
    print('fectch code like this!')
[```]

要注意的是，三个`的位置在主键盘按键1左边，tab上面，也就是波浪线~的按键，而不是单引号，而且要在英文半角下输入才有效，另外前面要空一行。

另外，与views一一对应，在显示文章正文的模板上为正文text再增加一个safe过滤器，比如post_list.html的text就由<p>{{ post.text|linebreaks|truncatewords:5 }}</p>变为<p>{{ post.text|safe|linebreaks|truncatewords:5 }}</p>

使用新学会的markdown语法试一下吧！

多说评论功能

在Django1.5版本前是有内置的评论系统的，不过现在已经放弃使用了。在多说网站上注册账号或者直接用社交账号进行登录，并生成一个short_name。

可以在个人界面中的工具中找到一段通用代码，这段代码非常重要，用于多说评论框的代码段：

<!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"请在此处替换成自己的短名"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多说公共JS代码 end -->

在mysite\templates\blog中新建一个duoshuo.html并将代码放入其中，但要做一些修改，短名请替换成自己注册的：

<!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="{{ post.id }}" data-title="{{ post.title }}" data-url="{{ post.get_absolute_url }}"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"yuanyeqing"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多说公共JS代码 end -->

多说网站还有很多可实现其他更多功能的代码模板，可以多看看多试试。

然后修改models.py：

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User
from django.core.urlresolvers import reverse

class Article(models.Model):
    author = models.ForeignKey(User)
    title = models.CharField(max_length=200)
    category = models.CharField(max_length=50, blank=True)
    text = models.TextField()
    created_date = models.DateTimeField(default=timezone.now)
    published_date = models.DateTimeField(blank=True, null=True)
    def get_absolute_url(self):
        path = reverse('post_detail', kwargs={'pk': self.id})
        return "http://127.0.0.1:8000%s" % path
    def publish(self):
        self.published_date = timezone.now()
        self.save()
    def __str__(self):
        return self.title

最后修改post_detail.html：

{% extends 'blog/base.html' %}
{% block content %}
    <div class="date">
        {% if post.published_date %}
            {{ post.published_date|date:'M d, Y' }}
        {% else %}
            {% if user.is_authenticated %}
                <a class="btn btn-default" href="{% url 'post_publish' pk=post.pk %}">Publish</a>
            {% endif %}
        {% endif %}
        {% if user.is_authenticated %}
            <a class="btn btn-default" href="{% url 'post_edit' pk=post.pk %}"><span class="glyphicon glyphicon-pencil"></span></a>
            <a class="btn btn-default" href="{% url 'post_remove' pk=post.pk %}"><span class="glyphicon glyphicon-remove"></span></a>
        {% endif %}
    </div>
    <h3>{{ post.title }}</h3>
    {% if post.category %}
        <a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}">
            <span class="glyphicon glyphicon-tag"></span>{{ post.category|title }}</a>
    {% endif %}
    <p>{{ post.text|safe|linebreaks }}</p>
    {% include "blog/duoshuo.html" %}
{% endblock %}

也就是用{% include "blog/duoshuo.html" %}把duoshuo.html加入到当前页面中。

重启就能看到多说了！

2016.10.26

django1.10开发博客（11）——markdown与多说评论功能

Markdown的实现

多说评论功能

推荐阅读更多精彩内容