如何在Django后台添加pagedown

需求描述

某公司的项目需要接入大数据，但是项目人员要求只用sql查询。经过通宵达旦的搞了一段时间，终于小有成效。然后我们又做了个大数据开发平台网站，里面放了些开发文档。以为我们队python比较熟悉，又不想在网站上浪费过多时间，选择Django后台发布文章，前端展示。添加个pagedown

如何做？

1. 安装依赖包（因为使用pagedown，可能不需要markdown，没有测试过）

pip install markdown
pip install django_markdown
pip install django_pagedown

1. 修改settings.py文件

INSTALLED_APPS = (
    ...
    #'django_markdown',
    'pagedown',
)

1. urls.py修改（可能不需要）

   # url('^markdown/', include( 'django_markdown.urls')),

1. 最重要的来了，在models.py里

...
from pagedown.widgets import AdminPagedownWidget
from django import forms
...
# Register your models here.
# 定义自己的form
class document_category( base ):
    category_name = models.CharField(max_length=200)
    insertTime = models.DateTimeField(default=timezone.now)

class categoryAdmin(admin.ModelAdmin):
    list_display = ('category_name','insertTime')
    search_fields = ['insertTime']
    # search_fields = ['name']
admin.site.register(document_category,categoryAdmin)


class api_document( lrcloud_base ):
    title =  models.CharField(max_length=200)
    content = models.TextField()
    category = models.ForeignKey(document_category)
    insertTime=models.DateTimeField( default=  timezone.now)

class ArticleForm(forms.ModelForm):
    content = forms.CharField(widget=AdminPagedownWidget())
    class Meta:
        model = api_document
        fields = '__all__'

class ArticleAdmin(admin.ModelAdmin):
    list_display = ('title', 'content', 'insertTime',)
    search_fields = ['title']
    form = ArticleForm

#注册的时候绑定
admin.site.register(api_document,ArticleAdmin)

完成这些后，在提交代码，在服务器上执行

python manage.py runserver 0.0.0.0:8080

打开网页，看看是否成功了。

markdown文件如何渲染成html，在模版里展示呢？

class Md2Html:
    def __init__(self):
        self.style = None
        self.infile = None
        print "Ready to init Parser tool!"

    def parse(self, style=None, content=None):
    #这里是css，加载风格的，可以从外部文件加载
        css = '''a {color:#4183C4;}
        a.absent {color:#cc0000;}
        a.anchor {
            display:block;
            padding-left:30px;
            margin-left:-30px;
            cursor:pointer;
            position:absolute;
            top:0;
            left:0;
            bottom:0;
        }

        p,blockquote,ol,dl,table,pre {
            margin:15px 0;
        }
        ul {
            margin:0;
        }
        hr {
            background:transparent repeat-x 0 0;
            border:0 none;
            color:#cccccc;
            height:4px;
            padding:0;
        }
        body > h2:first-child {
            margin-top:0;
            padding-top:0;
        }
        body > h1:first-child {
            margin-top:0;
            padding-top:0;
        }
        body > h1:first-child + h2 {
            margin-top:0;
            padding-top:0;
        }
        body > h3:first-child,body > h4:first-child,body > h5:first-child,body > h6:first-child {
            margin-top:0;
            padding-top:0;
        }
        a:first-child h1,a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6 {
            margin-top:0;
            padding-top:0;
        }
        h1 p,h2 p,h3 p,h4 p,h5 p,h6 p {
            margin-top:0;
        }
        li p.first {
            display:inline-block;
        }
        ul,ol {
            padding-left:30px;
        }
        ul:first-child,ol:first-child {
            margin-top:0;
        }
        ul:last-child,ol:last-child {
            margin-bottom:0;
        }
        dl {
            padding:0;
        }
        dl dt {
            font-size:14px;
            font-weight:bold;
            font-style:italic;
            padding:0;
            margin:15px 0 5px;
        }
        dl dt:first-child {
            padding:0;
        }
        dl dt >:first-child {
            margin-top:0;
        }
        dl dt >:last-child {
            margin-bottom:0;
        }
        dl dd {
            margin:0 0 15px;
            padding:0 15px;
        }
        dl dd >:first-child {
            margin-top:0;
        }
        dl dd >:last-child {
            margin-bottom:0;
        }
        blockquote {
            border-left:4px solid #dddddd;
            padding:0 15px;
            color:#777777;
        }
        blockquote >:first-child {
            margin-top:0;
        }
        blockquote >:last-child {
            margin-bottom:0;
        }
        table {
            border-collapse:collapse;
            padding:0;
        }
        table tr {
            border-top:1px solid #cccccc;
            background-color:white;
            margin:0;
            padding:0;
        }
        table tr:nth-child(2n) {
            background-color:#f8f8f8;
        }
        table tr th {
            font-weight:bold;
            border:1px solid #cccccc;
            text-align:left;
            margin:0;
            padding:6px 13px;
        }
        table tr td {
            border:1px solid #cccccc;
            text-align:left;
            margin:0;
            padding:6px 13px;
        }
        table tr th:first-child,table tr td:first-child {
            margin-top:0;
        }
        table tr th:last-child,table tr td:last-child {
            margin-bottom:0;
        }
        img {
            max-width:100%;
        }
        span.frame {
            display:block;
            overflow:hidden;
        }
        span.frame > span {
            border:1px solid #dddddd;
            display:block;
            float:left;
            overflow:hidden;
            margin:13px 0 0;
            padding:7px;
            width:auto;
        }
        span.frame span img {
            display:block;
            float:left;
        }
        span.frame span span {
            clear:both;
            color:#333333;
            display:block;
            padding:5px 0 0;
        }
        span.align-center {
            display:block;
            overflow:hidden;
            clear:both;
        }
        span.align-center > span {
            display:block;
            overflow:hidden;
            margin:13px auto 0;
            text-align:center;
        }
        span.align-center span img {
            margin:0 auto;
            text-align:center;
        }
        span.align-right {
            display:block;
            overflow:hidden;
            clear:both;
        }
        span.align-right > span {
            display:block;
            overflow:hidden;
            margin:13px 0 0;
            text-align:right;
        }
        span.align-right span img {
            margin:0;
            text-align:right;
        }
        span.float-left {
            display:block;
            margin-right:13px;
            overflow:hidden;
            float:left;
        }
        span.float-left span {
            margin:13px 0 0;
        }
        span.float-right {
            display:block;
            margin-left:13px;
            overflow:hidden;
            float:right;
        }
        span.float-right > span {
            display:block;
            overflow:hidden;
            margin:13px auto 0;
            text-align:right;
        }
        pre,code,tt {
            font-size:12px;
            font-family:Consolas,"Liberation Mono",Courier,monospace;
        }
        code,tt {
            margin:0;
            padding:0 5px;
            white-space:nowrap;
            border:1px solid #eaeaea;
            background-color:#f8f8f8;
            border-radius:3px;
        }
        pre code {
            margin:0;
            padding:0;
            white-space:pre;
            border:none;
            background:transparent;
        }
        .highlight pre {
            background-color:#f8f8f8;
            border:1px solid #cccccc;
            font-size:13px;

            line-height:19px;
            overflow:auto;
            padding:6px 10px;
            border-radius:3px;
        }
        pre {
            background-color:#cbe9ca;
            border:1px solid #cccccc;
            color:#000000;
            font-size:15px;
            line-height:19px;
            overflow:auto;
            padding:6px 10px;
            border-radius:3px;
        }
        pre code,pre tt {
            background-color:transparent;
            border:none;
        }'''

        head = """
            <style scoped>%s</style>
         """ % (css)
        try:
            content = content.decode('gbk').encode('utf-8')
        except:
            content = content
        content = markdown(content, extensions=['markdown.extensions.extra', 'markdown.extensions.codehilite'])
        return head+ content

从外部调用函数后，返回的是html的一个字符串，然后再模板里，吧这些东东放进去。

def show_document(request):
    documentId = request.GET['id']
    doc = api_document.objects.get(id=documentId)
    p = Md2Html.Parser()
    ret = p.parse('', doc.content)
    c = Context({"content": ret})
    t = loader.get_template('apis.html')
    html = t.render(c)
    response = HttpResponse(html)

在模板文件apis.html里，要这样使用

{{ content | safe }}

一定要加safe，否则…你懂得吧，试试就知道了~