Django从零搭建个⼈博客使⽤Markdown语法书写⽂章整合
原⽂章地址：
在技术博客⽂章详情页⾯中，最受程序员欢迎的便捷简约排版⽅式莫属Markdown，本⽂主要介绍Markdown格式在博⽂的前端显⽰及代码⾼亮，和Django后台admin中编辑博⽂时Markdown的实时预览。
前端显⽰
1、安装Markdown
Markdown是⼀种轻量级的标记语⾔，它允许⼈们“使⽤易读易写的纯⽂本格式编写⽂档，然后转换成有效的或者HTML⽂档。关于看这⾥。Python插件markdown默认⽀持标准的markdown语法，但标准语法⾥代码块需要每⾏前空4个空格才能识别。推荐使⽤ Python-markdown2，它是python-markdown的升级版，⽀持GFM式（GFM 是 Github 拓展的基于 Markdown 的⼀种纯⽂本的书写格式）的markdown书写格式。允许使⽤```包裹代码块。
打开CMD，进⼊虚拟环境
pip install markdown
2、使⽤Markdown
为了将Markdown语法书写的⽂章渲染为HTML⽂本，⾸先改写 Storm / views.py 的⽂章处理类 ArticleDetailView：
#Storm / views.py
from Storm import models
from django.shortcuts import render, get_object_or_404
from ic import DetailView #从数据库获取模型的⼀条记录数据DetailView
import markdown #导⼊markdown
from import slugify
import TocExtension
#⽂章详情页类处理
class ArticleDetailView(DetailView):
model=models.Article
template_name = 'article.html'
context_object_name = 'article'
def get(self, request, *args, **kwargs):
# ···
def get_object(self, queryset=None):
# 覆写 get_object ⽅法的⽬的是因为需要对 article 的 body 值进⾏渲染
# 将markdown语法渲染成html样式
article.body = markdown.markdown(article.body,
extensions=[
# 包含缩写、表格等常⽤扩展
'a',
# 语法⾼亮扩展
'dehilite',
#允许我们⾃动⽣成⽬录
'',
])
return article
代码中markdown.markdown语法接收两个参数：第⼀个参数是需要渲染的⽂章正⽂article.body；第⼆个参数载⼊了常⽤的语法扩
展，a中包括了缩写、表格、语法⾼亮、⾃动⽣成⽬录等扩展。
然后，修改前端模板有关⽂章正⽂的部分：怎么搭建个人博客
#templates/article.html
# 在 article.body 后加上 |safe 过滤器
<p>{{ article.body|safe }}</p>
safe 是 Django 模板系统中的过滤器（Filter），Django出于安全的考虑，会将输出的HTML代码进⾏转义，这使得article.body中渲染的HTML⽂本⽆法正常显⽰。⽽|safe就类似给article.body贴了⼀个标签，表⽰这⼀段字符不需要进⾏转义了。
启动服务器，在后台中新录⼊⼀条⽤markdown语法书写的⽂章，内容如下：
# 国风·周南·关雎
---
**关关雎鸠，在河之洲。窈窕淑⼥，君⼦好逑。**
参差荇菜，左右流之。窈窕淑⼥，寤寐求之。
---
+ 列表⼀
+ 列表⼆
+ 列表⼆-1
+ 列表⼆-2
---
···
def detail(request, id):
article = (id=id)
# 将markdown语法渲染成html样式
article.body = markdown.markdown(article.body,
extensions=[
# 包含缩写、表格等常⽤扩展
'a',
# 语法⾼亮扩展
'dehilite',
#允许我们⾃动⽣成⽬录
'',
])
context = { 'article': article }
return render(request, 'article/detail.html', context)
···
此时可以解析出Markdown的原⽣格式了，但后续需要代码⾼亮及其格式的美化。
3、代码⾼亮
Pygments是⼀种通⽤语法⾼亮显⽰器，可以帮助我们⾃动⽣成美化代码块的样式⽂件。（插件highlight.js也⽐较常⽤）
重新打开命令⾏窗⼝，进⼊虚拟环境安装Pygments：
pip install Pygments
安装完成后Pygments在后台为我们做了很多事，它把⾼亮的⼀些语法转为css样式，把代码分成了⼀个⼀个单词，在前端页⾯，直接右键查看源码就能看到了。需要注意的是为了让Pygments正确识别分割代码块，在后台编辑输⼊代码块时，建议在```包裹后加上代码种类，如下：
···Python
代码块
···
然后我们需要⽣成⾼亮样式，在命令⾏中进⼊static⽬录中的css⽂件中，输⼊Pygments指令后回车：
pygmentize -S default -f html -a .codehilite > default.css
1. -a .codehilite指所有css选择器都具有.codehilite这⼀优先选择器
2. -S default就是指定所需要的样式，Pygments还内置了很多其他的样式，
3. > default.css将内容输出到default.css⽂件中
这⾥有⼀点需要注意, ⽣成命令中的 -a 参数需要与真实页⾯中的 CSS Selector 相对应，即.codehilite这个字段在有些版本中应写为.highlight。如果后⾯的代码⾼亮⽆效，很可能是这⾥出了问题。
此时在css⽬录中是否⾃动⽣成了⼀个叫default.css的⽂件，接下来我们在 content-base.html 中引⽤这个⽂件，同时引⼊bootstrapc框架会使排版格式更加美观。
#templates/content-base.html
<head>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- 引⼊monikai.css -->
<link rel="stylesheet" href="{% static 'css/default.css' %}">
</head>
完成以上步骤后先退出服务器然后重新 runserver，顺利的话看到如下：
最后，还可以对markdown⽂本的整体样式进⾏⾃定义修改，为了不影响页⾯其他地⽅，最好在包裹⽂章的标签中加个class标识。
#例如修改代码框
.markdown pre {
padding: 1em;
border: none;
line-height: 1.45;
max-height: 35em;
position: relative;
background: url(/static/images/blueprint.png) #F6F6F6;
}
#...
<p class=‘markdown’>{{ article.body|safe }}</p>
4、⾃动⽣成⽂章⽬录
在使⽤markdown的步骤中，我们在 Storm / views.py 函数中的a参数中加⼊了⾃动⽣成⽬录插件，在输⼊博⽂时，在需要加⼊标题的位置加⼊[TOC]标记即可，在前端⽂章中就能看到[TOC]标记的地⽅被内容的⽬录替换了。
上述⽅式的⼀个局限局限性就是只能通过
⽬录
#Storm/views.py
from Storm import models
from django.shortcuts import render, get_object_or_404
from ic import DetailView #从数据库获取模型的⼀条记录数据DetailView
import markdown #导⼊markdown
from import slugify
import TocExtension
#⽂章详情页类处理
class ArticleDetailView(DetailView):
model=models.Article
template_name = 'article.html'
context_object_name = 'article'
def get(self, request, *args, **kwargs):
# ···
def get_object(self, queryset=None):
# 覆写 get_object ⽅法的⽬的是因为需要对 article 的 body 值进⾏渲染，⽤model的⽅法
article = super(ArticleDetailView, self).get_object(queryset=None)
md = markdown.Markdown(extensions=[
'a',
'dehilite',
#美化点击⽬录时的url显⽰模块
TocExtension(slugify=slugify),
])
#md实例的convert⽅法将markdown转为html
article.body = md.convert(article.body)
#实例 md 就会多出⼀个 toc 属性
< = md.toc
return article
注意⽂章 article 实例本⾝是没有 md 属性的，利⽤动态语⾔的特性我们给它动态添加了 md 属性。此时在前端模板的任何位置就可以进⾏渲染⽬录。
<div>
<p>⽬录</p>
{{ safe }}
<a href="javascript:void(0);" class="top">返回顶部</a>
</div>
Admin中编辑及预览
在django中有很好的插件来让我们快速完成 django admin 后台中博⽂的编辑及实时预览—django-mdeditor
1、安装配置
打开CMD，进⼊虚拟环境
pip install django-mdeditor
在项⽬的settings.py的INSTALLED_APPS中添加’mdeditor’,
INSTALLED_APPS = [
#...
"mdeditor",
#...
]
配置好上传⽬录media⽂件夹
#Myblog/settings.py
# 媒体⽂件专属参数设置（需要加url识别才能访问）
MEDIA_URL = "/media/" # 媒体⽂件别名(相对路径) 和绝对路径
MEDIA_ROOT = (
os.path.join(BASE_DIR, 'media')
)
最后将mdeditor添加到项⽬的url中：
#Myblog/urls.py
urlpatterns = [
#...
re_path(r'mdeditor/', include('mdeditor.urls')),
]
在我们的 Storm/models.py 下的⽂章模型中重写 body 字段
from mdeditor.fields import MDTextField
# ⽂章
class Article(models.Model):
#...
# ⽂章内容
body = MDTextField(verbose_name='⽂章内容')
#...
注意在 Storm/admin.py 中配置以便后台显⽰，然后迁移数据库
python manage.py makemigrations
python manage.py migrate
2、查看效果
运⾏项⽬，进⼊后台admin，进⼊博⽂的编辑页⾯，编辑Markdown及实时预览。
最后的问题就是如何做到Django admin中的预览效果与前端⼀致，因为我们的样式配置不同，Django插件mdeditor的Markdown样式位置⼀般在虚拟环境下的 Lib\site-packages\mdeditor\static\mdeditor\css 中的editormd.css⾥，可以修改成前端的样式⽂件，或者将前端引⼊这个样式，并在⽂章包裹的标签中加⼊class="markdown-body"
参考： |

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。