Django Blog | 09 这么简单！实现博客markdown输入和显示-阿里云开发者社区

简说Python，号主老表，Python终身学习者，数据分析爱好者，从18年开始分享Python知识，原创文章227篇，写过Python、SQL、Excel入门文章，也写过Web开发、数据分析文章，老表还总结整理了一份2022Python学习资料和电子书资源，关注后私信回复：2022 即可领取。

一、前情回顾

在前面，我们完成了Django Blog博客发布功能，但是前面发布的博客内容都是富文本的，没有任何样式，输入框也比较简陋，这一节中我们将一起来优化博客发布页面：给博客添加上markdown输入和显示方法。

Django Blog系列文章

Django Blog|01 创建环境和项目

Django Blog|02 创建admin账户&settings.py介绍

Django Blog|03 创建一个blog app和Article模型

Django Blog|04 创建blog视图和完成MVT框架开发

Django Blog|05 修改首页显示博客列表

Django Blog|06 添加博客详情页视图，显示博客详情

Django Blog|07 引入Bootstrap前端框架，优化页面

Django Blog|08 添加编写+发布博客功能

二、引入django-mdeditor，实现markdown输入和显示

2.1 基本介绍

django-mdeditor是一个开源的Django组件，基于Editor.md的Django的Markdow编辑器插件应用程序，你可以理解成一个用django写app。

项目地址：https://github.com/pylixm/django-mdeditor

2.2 安装并配置

首先我们需要安装django-mdeditor模块，终端下进入项目目录Project/brief_blog/myblog，然后通过指令进入虚拟环境，然后直接pip install即可安装。

pipenv shell
pip install django-mdeditor

安装成功后，需要将django-mdeditor注册到项目设置中，打开Project/brief_blog/myblog/myblog/settings.py文件，找到INSTALLED_APPS，之前我们在里面注册了自己写的blogapp，现在我们将mdeditor注册进去即可，如下所示，加入一行'mdeditor',即可：

INSTALLED_APPS = [
    ...
    'blog',  # 博客app
    'mdeditor',  # markdown编辑器
]

除此之外，还需要进一步添加其他相关设置，都添加到settings.py的末尾即可：

# 设置框架 django-mdeditor（django3.0+需要设置）
X_FRAME_OPTIONS = 'SAMEORIGIN'
# 添加MEDIA的相关配置 图片相关文件会在uploads/editor目录下
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
MEDIA_URL = '/media/'
# django-mdeditor 设置
MDEDITOR_CONFIGS = {
    'default':{
        'width': '90%',  # Custom edit box width
        'height': 500,  # Custom edit box height
        'toolbar': ["undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime",
                    "emoji", "html-entities", "pagebreak", "goto-line", "|",
                    "help", "info",
                    "||", "preview", "watch", "fullscreen"],  # custom edit box toolbar 
        'upload_image_formats': ["jpg", "jpeg", "gif", "png", "bmp", "webp"],  # image upload format type
        'image_folder': 'editor',  # 图片保存路径
        'theme': 'dark',  # 工具栏显示主题, dark / default
        'preview_theme': 'default',  # 预览区显示主题, dark / default
        'editor_theme': 'default',  # 编辑区显示主题, pastel-on-dark / default
        'toolbar_autofixed': True,  # 工具栏是否固定在顶部
        'search_replace': True,  # 是否打开搜索替换 
        'emoji': True,  # 是否打开表情显示
        'tex': True,  # 是否打开 tex 图表显示
        'flow_chart': True,  # 是否打开流程图显示
        'sequence': True, # 是否打开时序图显示
        'watch': True,  # 实时预览
        'lineWrapping': True,  # 是否换行
        'lineNumbers': True,  # 是否显示行数
        'language': 'zh'  # 语言
    }
}

接下来，我们需要到Project/brief_blog/myblog/myblog/urls.py中添加mdeditor路由：

urlpatterns = [
    path('admin/', admin.site.urls),
    # 第一个参数 路由地址
    # 第二个参数：include添加blog子应用路由
    path('', include('blog.urls')),
    url(r'mdeditor/', include('mdeditor.urls'))
]

2.3 模块设置

前面配置好django-mdeditor的基本设置，接下来我们需要修改Model模型中的内容字段为markdown类型，我们打开Project/brief_blog/myblog/blog/models.py，原来content字段为models.TextField类型，现在需要修改为mdeditor.fields.MDTextField。

from django.contrib.auth.models import User
from django.urls import reverse
from mdeditor.fields import MDTextField  # 新增
# Create your models here.
class Article(models.Model):
    ...  # 和之前一样
    # 文章正文
    content = MDTextField()  # TextField修改为MDTextField
    ...  # 和之前一样

改好models内容后，我们需要重新迁移、建立新的数据映射，更新数据表，在终端虚拟环境中依次执行下面语句即可。

python manage.py makemigrations
python manage.py migrate

注意哈，python manage.py xxx的意思是在python环境中运行manage.py这个文件，所以你执行这个命令的目录里必须有manage.py这个文件，按本系列操作的话，该文件在Project/brief_blog/myblog这个目录下。

2.4 查看效果

模型也重构后，我们就可以直接启动项目啦～（可以直接vscode 快捷键Shift F5启动，也可以在终端输入下面指令启动）

python manage.py runserver

启动的项目后，我们通过浏览器访问http://127.0.0.1:8000/admin/，登录admin后台，进入文章管理页面，选择添加文章，就可以看到已经支持markdown输入和实时显示了，nice～

我已经添加过，所以是修改

但是我们会发现前端写博客页面还是没有生效，很简单，我们打开Project/brief_blog/myblog/templates/article_add.html文件，然后添加一行代码即可：

...  # 和之前一样
<h1>写博客</h1>
<form method="POST">
    <!-- 添加csrf_token，防止黑客攻击，获取表单提交内容
    csrf Cross Site Request Forgery)攻击 跨站请求伪造攻击
    -->
    {% csrf_token %}
    {{ form.media }}  <!-- 新增一行 -->
    {{ form.as_p }}
    <input type="submit" value="发布">
</form>
...  # 和之前一样

2.5 文章详情页修改

完成了写文章添加markdown功能后，我们会发现发布的文章显示还是按富文本进行显示的，所以我们还需要修改下文章详情页，让其能解析出markdown内容的格式，至少就像我们在写的时候预览里的格式一样。

从逻辑上来说，就靠django-mdeditor是肯定能实现的，预览的效果显示到前端页面，我们找到相关方法和渲染的js、html就行。

从项目的issues中我们可以找到类似的问题，

https://github.com/pylixm/django-mdeditor/issues/5

项目作者也有很好的回答，其实在项目中作者就给我们提供了一个demo，大家感兴趣，也可以去跑一下这个demo。

我们按作者提供的show.html格式修改下我们的article_detial.html即可。

https://github.com/pylixm/django-mdeditor/blob/master/mdeditor_demo_app/templates/show.html

从上图我们知道，需要加载静态文件，但是这个文件从哪里来呢？

有三个地方你可以拿(xia)到(zai)它，最简单的直接在公众号：简说Python后台回复：DjangoBlog，你可以获得目前项目所有源码，在目录myblog/static中就有该文件，复制到自己项目的static目录下即可；

其次就是django-mdeditor项目的github中就有这个文件，直接下载整个项目后，将mdeditor目录内容复制到自己项目的static目录下即可。

https://github.com/pylixm/django-mdeditor

最后一种获取方式就是去你的python环境包里找，

# 找到自己虚拟环境路径
pipenv --venv

如果你和我一样用pipenv安装的虚拟环境，直接在环境中输入上面指令就能知道自己的虚拟环境安装目录，进入该目录，在这个目录中你能看到mdeditor文件夹lib/python3.10/site-packages/mdeditor/static，直接复制到自己项目中的static目录下即可。

为啥提供三种方式呢，希望大家多思考，学习就是要多思考嘛～

接下来我们就可以修改详情页啦，首先改下Project/brief_blog/myblog/templates/base.html，添加一个可以拓展link的块，注意只新增了三行代码，其他不变。

<!-- 载入静态文件 -->
{% load static %}   <!-- 新增代码 -->
<!doctype html>
<html lang="zh-CN">
<head>
  ...  <!-- 和之前一样 -->
  {% block link %}  <!-- 新增代码 -->
  {% endblock %}  <!-- 新增代码 -->
  <!-- 注意这里 标题内容添加了block标签，这样我们可以在子页面自定义title -->
  <title>
    {% block title %}
    {% endblock %}
  ...  <!-- 和之前一样 -->

然后我们打开文件Project/brief_blog/myblog/templates/article_detial.html，将文件内容替换成下面即可：

{% extends 'base.html' %}
<!-- 载入静态文件 -->
{% load static %}
{% block link %}
<!-- markdwon解析css样式 -->
<link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
<link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">
{% endblock %}
{% block title %}
老表爱技术-{{article.title}}
{% endblock %}
{% block content %}
<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
        <div class="col-12 alert alert-success">作者：{{ article.author }}</div>
        <blockquote style="margin:0 0 24px;background:#eef0f4;border-left:8px solid #dddfe4;">
            {{article.summary}}
        </blockquote>
    </div>
    <!-- 文章正文 -->
    <div id="content">
        <textarea>{{article.content}}</textarea>
    </div>
</div>
<script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
<script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
<script>
$(function () {
    // js 解析markdown
    editormd.markdownToHTML("content", {
        //htmlDecode      : "style,script,iframe",  // you can filter tags decode
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true,  // 默认不解析
    });
    $(".reference-link").each(function (i,obj) {
      console.log(obj)
    })
})
</script>
{% endblock %}

完成修改后，我们刷新页面，会发现，博客详情页面的markdown也正常显示啦～

欢迎大家点赞、在看、转发支持，点击在看，下次可以第一时间收到公众号推文～

Django Blog | 09 这么简单！实现博客markdown输入和显示

一、前情回顾

Django Blog系列文章

二、引入django-mdeditor，实现markdown输入和显示

2.1 基本介绍

2.2 安装并配置

2.3 模块设置

2.4 查看效果

2.5 文章详情页修改

热门文章

最新文章

相关课程

相关电子书

相关实验场景