如何在Django后台添加pagedown

需求描述

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

如何做？

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

pip install markdown
pip install django_markdown
pip install django_pagedown

修改settings.py文件

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

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

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

最重要的来了，在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，否则…你懂得吧，试试就知道了~