鍍金池/ 教程/ Python/ 多說(shuō),markdown和代碼高亮
更上一層樓
歸檔, AboutMe和標(biāo)簽分類
動(dòng)態(tài)URL
Django簡(jiǎn)介
Models
項(xiàng)目與APP
Template
開發(fā)環(huán)境和Django安裝
多說(shuō),markdown和代碼高亮
Admin
Views和URL
搜索和ReadMore
RSS和分頁(yè)

多說(shuō),markdown和代碼高亮

添加多說(shuō)

在Django1.5版本前是有內(nèi)置的評(píng)論系統(tǒng)的, 不過現(xiàn)在已經(jīng)放棄使用了, 在國(guó)內(nèi)比較常用的是多說(shuō), 在國(guó)外是disqus, 因?yàn)槲恼轮饕鎸?duì) 國(guó)內(nèi)用戶, 所以采用多說(shuō)

在網(wǎng)站上注冊(cè)賬號(hào)或者直接用社交賬號(hào)進(jìn)行登錄,并會(huì)生成一個(gè)short_name, 可以在個(gè)人界面中的工具中找到一段通用代碼, 這段代碼非常重要, 用于多說(shuō)評(píng)論框的代碼段:

<!-- 多說(shuō)評(píng)論框 start -->
    <div class="ds-thread" data-thread-key="請(qǐng)將此處替換成文章在你的站點(diǎn)中的ID" data-title="請(qǐng)?zhí)鎿Q成文章的標(biāo)題" data-url="請(qǐng)?zhí)鎿Q成文章的網(wǎng)址"></div>
<!-- 多說(shuō)評(píng)論框 end -->
<!-- 多說(shuō)公共JS代碼 start (一個(gè)網(wǎng)頁(yè)只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"請(qǐng)?jiān)诖颂幪鎿Q成自己的短名"};
    (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>
<!-- 多說(shuō)公共JS代碼 end -->

在templates中新建一個(gè)duoshuo.html并將代碼放入其中, 并做一些修改

<!-- 多說(shuō)評(píng)論框 start -->
    <div class="ds-thread" data-thread-key="{{ post.id }}" data-title="{{ post.title }}" data-url="{{ post.get_absolute_url }}"></div>
<!-- 多說(shuō)評(píng)論框 end -->
<!-- 多說(shuō)公共JS代碼 start (一個(gè)網(wǎng)頁(yè)只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"andrewliu"};
    (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>
<!-- 多說(shuō)公共JS代碼 end -->

然后在my_blog/article/models.py中重寫get_absolute_url方法

from django.db import models
from django.core.urlresolvers import reverse

# Create your models here.
class Article(models.Model) :
    title = models.CharField(max_length = 100)  #博客題目
    category = models.CharField(max_length = 50, blank = True)  #博客標(biāo)簽
    date_time = models.DateTimeField(auto_now_add = True)  #博客日期
    content = models.TextField(blank = True, null = True)  #博客文章正文

 #獲取URL并轉(zhuǎn)換成url的表示格式
    def get_absolute_url(self):
        path = reverse('detail', kwargs={'id':self.id})
        return "http://127.0.0.1:8000%s" % path

    def __str__(self) :
        return self.title

    class Meta:
        ordering = ['-date_time']

然后修改post.html

{% extends "base.html" %}
{% load custom_markdown %}

{% block content %}
<div class="posts">
        <section class="post">
            <header class="post-header">
                <h2 class="post-title">{{ post.title }}</h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content|custom_markdown }}
                    </p>
                </div>
        </section>
        {% include "duoshuo.html" %}
</div><!-- /.blog-post -->
{% endblock %}

只需要將duoshuo.html加入到當(dāng)前頁(yè)面中, {% include "duoshuo.html" %}這句代碼就是將duoshuo.html加入到當(dāng)前的頁(yè)面中

現(xiàn)在啟動(dòng)web服務(wù)器, 在瀏覽器中輸入, 看看是不是每個(gè)博文頁(yè)面下都有一個(gè)多說(shuō)評(píng)論框了..

http://wiki.jikexueyuan.com/project/django-set-up-blog/images/69.png" alt="多說(shuō)" />

markdown你的博文

markdown越來(lái)越流行, 越來(lái)越多的寫博客的博主都喜歡上了makrdown這種標(biāo)記性語(yǔ)言的易用性和美觀性. 像簡(jiǎn)書, 作業(yè)部落, Mou都是比較出名的markdown在線或者離線形式

現(xiàn)在我們就來(lái)markdown自己的博客嗎, 首先是安裝markdown庫(kù), 使用下面命令

    #首先是安裝markdown
    $ pip install markdown  #記得激活虛擬環(huán)境

現(xiàn)在說(shuō)說(shuō)怎么markdown你的博文, 在article下建立新文件夾templatetags,然后我們來(lái)定義的自己的 template filter, 然后在templatetags中建立__init__.py, 讓文件夾可以被看做一個(gè)包, 然后在文件夾中新建custom_markdown.py文件, 添加代碼

    import markdown

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

    register = template.Library()  #自定義filter時(shí)必須加上

    @register.filter(is_safe=True)  #注冊(cè)template filter
    @stringfilter  #希望字符串作為參數(shù)
    def custom_markdown(value):
        return mark_safe(markdown.markdown(value,
            extensions = ['markdown.extensions.fenced_code', 'markdown.extensions.codehilite'],
                                           safe_mode=True,
                                           enable_attributes=False))

然后只需要對(duì)需要進(jìn)行markdown化的地方進(jìn)行簡(jiǎn)單的修改,

{% extends "base.html" %}
{% load custom_markdown %}

{% block content %}
<div class="posts">
        <section class="post">
            <header class="post-header">
                <h2 class="post-title">{{ post.title }}</h2>

                    <p class="post-meta">
                        Time:  <a class="post-author" href="#">{{ post.date_time|date:'Y /m /d'}}</a> <a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}">{{ post.category }}</a>
                    </p>
            </header>

                <div class="post-description">
                    <p>
                        {{ post.content|custom_markdown }}
                    </p>
                </div>
        </section>
        {% include "duoshuo.html" %}
</div><!-- /.blog-post -->
{% endblock %}

{% load custom_markdown %}添加自定義的filter, 然后使用filter的方式為{{ post.content|custom_markdown }}, 只需要對(duì)需要使用markdown格式的文本添加管道然后再添加一個(gè)自定義filter就好了.

現(xiàn)在啟動(dòng)web服務(wù)器, 在瀏覽器中輸入, 可以看到全新的的markdown效果

代碼高亮

這里代碼高亮使用一個(gè)CSS文件導(dǎo)入到網(wǎng)頁(yè)中就可以實(shí)現(xiàn)了, 因?yàn)樵谏厦鎸?code>markdown的filter中已經(jīng)添加了擴(kuò)展高亮的功能, 所以現(xiàn)在只要下載CSS文件就好了.

pygments找到你想要的代碼主題, 我比較喜歡monokai, 然后在pygments-css下載你喜歡的CSS主題, 然后加入當(dāng)博客目錄的static目錄下, 或者最簡(jiǎn)單的直接上傳七牛進(jìn)行CDN加速

修改base.html的頭部

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>{% block title %} Andrew Liu Blog {% endblock %}</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" >
    <link rel="stylesheet" >
    <link rel="stylesheet" >
</head>  

<link rel="stylesheet" >添加CSS樣式到base.html就可以了.">`添加CSS樣式到base.html就可以了.

現(xiàn)在啟動(dòng)web服務(wù)器, 添加一個(gè)帶有markdown樣式的代碼的文章, 就能看到效果了, 在瀏覽器中輸入http://127.0.0.1:8000/

http://wiki.jikexueyuan.com/project/django-set-up-blog/images/70.png" alt="高亮" />