Django Blog | 09 這么簡單！實(shí)現(xiàn)博客markdown輸入和顯示

一、前情回顧

在前面，我們完成了Django Blog博客發(fā)布功能，但是前面發(fā)布的博客內(nèi)容都是富文本的，沒有任何樣式，輸入框也比較簡陋，這一節(jié)中我們將一起來優(yōu)化博客發(fā)布頁面：給博客添加上markdown輸入和顯示方法。

Django Blog系列文章

Django Blog|01 創(chuàng)建環(huán)境和項(xiàng)目

Django Blog|02 創(chuàng)建admin賬戶&settings.py介紹

Django Blog|03 創(chuàng)建一個(gè)blog app和Article模型

Django Blog|04 創(chuàng)建blog視圖和完成MVT框架開發(fā)

Django Blog|05 修改首頁顯示博客列表

Django Blog|06 添加博客詳情頁視圖，顯示博客詳情

Django Blog|07 引入Bootstrap前端框架，優(yōu)化頁面

Django Blog|08 添加編寫+發(fā)布博客功能

二、引入django-mdeditor，實(shí)現(xiàn)markdown輸入和顯示

2.1 基本介紹

django-mdeditor是一個(gè)開源的Django組件，基于Editor.md的Django的Markdow編輯器插件應(yīng)用程序，你可以理解成一個(gè)用django寫app。

項(xiàng)目地址：https://github.com/pylixm/django-mdeditor

2.2 安裝并配置

首先我們需要安裝django-mdeditor模塊，終端下進(jìn)入項(xiàng)目目錄Project/brief_blog/myblog，然后通過指令進(jìn)入虛擬環(huán)境，然后直接pip install即可安裝。

pipenv?shell
pip?install?django-mdeditor

安裝成功后，需要將django-mdeditor注冊到項(xiàng)目設(shè)置中，打開Project/brief_blog/myblog/myblog/settings.py文件，找到INSTALLED_APPS，之前我們在里面注冊了自己寫的blogapp，現(xiàn)在我們將mdeditor注冊進(jìn)去即可，如下所示，加入一行'mdeditor',即可：

INSTALLED_APPS?=?[
????...
????'blog',??#?博客app
????'mdeditor',??#?markdown編輯器
]

除此之外，還需要進(jìn)一步添加其他相關(guān)設(shè)置，都添加到settings.py的末尾即可：

#?設(shè)置框架?django-mdeditor（django3.0+需要設(shè)置）
X_FRAME_OPTIONS?=?'SAMEORIGIN'

#?添加MEDIA的相關(guān)配置?圖片相關(guān)文件會在uploads/editor目錄下
MEDIA_ROOT?=?os.path.join(BASE_DIR,?'uploads')
MEDIA_URL?=?'/media/'

#?django-mdeditor?設(shè)置
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',??#?預(yù)覽區(qū)顯示主題,?dark?/?default
????????'editor_theme':?'default',??#?編輯區(qū)顯示主題,?pastel-on-dark?/?default
????????'toolbar_autofixed':?True,??#?工具欄是否固定在頂部
????????'search_replace':?True,??#?是否打開搜索替換?
????????'emoji':?True,??#?是否打開表情顯示
????????'tex':?True,??#?是否打開?tex?圖表顯示
????????'flow_chart':?True,??#?是否打開流程圖顯示
????????'sequence':?True,?#?是否打開時(shí)序圖顯示
????????'watch':?True,??#?實(shí)時(shí)預(yù)覽
????????'lineWrapping':?True,??#?是否換行
????????'lineNumbers':?True,??#?是否顯示行數(shù)
????????'language':?'zh'??#?語言
????}
????
}

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

urlpatterns?=?[
????path('admin/',?admin.site.urls),
????#?第一個(gè)參數(shù)?路由地址
????#?第二個(gè)參數(shù)：include添加blog子應(yīng)用路由
????path('',?include('blog.urls')),
????url(r'mdeditor/',?include('mdeditor.urls'))
]

2.3 模塊設(shè)置

前面配置好django-mdeditor的基本設(shè)置，接下來我們需要修改Model模型中的內(nèi)容字段為markdown類型，我們打開Project/brief_blog/myblog/blog/models.py，原來content字段為models.TextField類型，現(xiàn)在需要修改為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內(nèi)容后，我們需要重新遷移、建立新的數(shù)據(jù)映射，更新數(shù)據(jù)表，在終端虛擬環(huán)境中依次執(zhí)行下面語句即可。

python?manage.py?makemigrations
python?manage.py?migrate

注意哈，python manage.py ?xxx的意思是 在python環(huán)境中運(yùn)行manage.py這個(gè)文件，所以你執(zhí)行這個(gè)命令的目錄里必須有manage.py這個(gè)文件，按本系列操作的話，該文件在Project/brief_blog/myblog這個(gè)目錄下。

2.4 查看效果

模型也重構(gòu)后，我們就可以直接啟動項(xiàng)目啦～（可以直接vscode 快捷鍵Shift F5啟動，也可以在終端輸入下面指令啟動）

python?manage.py?runserver

啟動的項(xiàng)目后，我們通過瀏覽器訪問http://127.0.0.1:8000/admin/，登錄admin后臺，進(jìn)入文章管理頁面，選擇添加文章，就可以看到已經(jīng)支持markdown輸入和實(shí)時(shí)顯示了，nice～

但是我們會發(fā)現(xiàn)前端寫博客頁面還是沒有生效，很簡單，我們打開Project/brief_blog/myblog/templates/article_add.html文件，然后添加一行代碼即可：

...??#?和之前一樣
<h1>寫博客h1>
<form?method="POST">
????
????{%?csrf_token?%}
????{{?form.media?}}??
????{{?form.as_p?}}
????<input?type="submit"?value="發(fā)布">
form>
...??#?和之前一樣

2.5 文章詳情頁修改

完成了寫文章添加markdown功能后，我們會發(fā)現(xiàn)發(fā)布的文章顯示還是按富文本進(jìn)行顯示的，所以我們還需要修改下文章詳情頁，讓其能解析出markdown內(nèi)容的格式，至少就像我們在寫的時(shí)候預(yù)覽里的格式一樣。

從邏輯上來說，就靠django-mdeditor是肯定能實(shí)現(xiàn)的，預(yù)覽的效果顯示到前端頁面，我們找到相關(guān)方法和渲染的js、html就行。

從項(xiàng)目的issues中我們可以找到類似的問題，

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

項(xiàng)目作者也有很好的回答，其實(shí)在項(xiàng)目中作者就給我們提供了一個(gè)demo，大家感興趣，也可以去跑一下這個(gè)demo。

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

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

從上圖我們知道，需要加載靜態(tài)文件，但是這個(gè)文件從哪里來呢？

有三個(gè)地方你可以拿(xia)到(zai)它，最簡單的直接在公眾號：簡說Python后臺回復(fù)：DjangoBlog，你可以獲得目前項(xiàng)目所有源碼，在目錄myblog/static中就有該文件，復(fù)制到自己項(xiàng)目的static目錄下即可；

其次就是django-mdeditor項(xiàng)目的github中就有這個(gè)文件，直接下載整個(gè)項(xiàng)目后，將mdeditor目錄內(nèi)容復(fù)制到自己項(xiàng)目的static目錄下即可。

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

最后一種獲取方式就是去你的python環(huán)境包里找，

#?找到自己虛擬環(huán)境路徑
pipenv?--venv

如果你和我一樣用pipenv安裝的虛擬環(huán)境，直接在環(huán)境中輸入上面指令就能知道自己的虛擬環(huán)境安裝目錄，進(jìn)入該目錄，在這個(gè)目錄中你能看到mdeditor文件夾lib/python3.10/site-packages/mdeditor/static，直接復(fù)制到自己項(xiàng)目中的static目錄下即可。

為啥提供三種方式呢，希望大家多思考，學(xué)習(xí)就是要多思考嘛～

接下來我們就可以修改詳情頁啦，首先改下Project/brief_blog/myblog/templates/base.html，添加一個(gè)可以拓展link的塊，注意只新增了三行代碼，其他不變。

{%?load?static?%}???
html>
<html?lang="zh-CN">

<head>
??...??
??{%?block?link?%}??

??{%?endblock?%}??
??
??<title>
????{%?block?title?%}

????{%?endblock?%}
??...??

然后我們打開文件Project/brief_blog/myblog/templates/article_detial.html，將文件內(nèi)容替換成下面即可：

{%?extends?'base.html'?%}

{%?load?static?%}

{%?block?link?%}

<link?href="{%?static?'mdeditor/css/editormd.min.css'?%}"?rel="stylesheet">
<link?href="{%?static?'mdeditor/css/editormd.preview.css'?%}"?rel="stylesheet">
{%?endblock?%}

{%?block?title?%}
老表愛技術(shù)-{{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,??//?默認(rèn)不解析
????????flowChart???????:?true,??//?默認(rèn)不解析
????????sequenceDiagram?:?true,??//?默認(rèn)不解析
????});

????$(".reference-link").each(function?(i,obj)?{
??????console.log(obj)
????})
})

script>
{%?endblock?%}

完成修改后，我們刷新頁面，會發(fā)現(xiàn)，博客詳情頁面的markdown也正常顯示啦～

掃碼即可加我微信
老表朋友圈經(jīng)常有贈書/紅包福利活動