Django實戰之添加markdown編寫文章的支持

書接https://dongfangyou.blog.csdn.net/article/details/105323313
Markdown 主要依賴於Python第三方庫,相關的庫有很多
這裏我們選擇mistune這個庫 其他庫用起來類似
Markdown的格式,就不過多說了,它已經是現在比較流行的文檔格式了
mistune這個庫的使用非常的簡單,只需要傳入寫好的Markdown格式文本
就會返回格式化好的HTML代碼
首先使用pip3 install mistune

import mistune
html=mistune.markdown("ddddddddddd")

評論支持
我們先來對 評價內容增加Markdown,那麼在什麼位置出庫合適呢,要找到合適的位置,必須聊些數據的傳遞流程,用戶提交評論到評論展示的流程如下,
用戶填寫評論,提交表單-CommentForm處理表單-驗證通過保存數據到instance-instance.save 方法把數據保存到數據庫-用戶刷新頁面,通過comment_block模板自定義標籤獲取並展示數據
從這個流程中看,我們發現幾個點可以用來對內容的格式進行處理,

在form成保存數據之前,我們對數據進行轉換,讓保存到數據庫中的數據是Markdown處理之後的
給Comment模型新增屬性content_markdown這個屬性的作用是將原內容,進行markdown處理,然後在模板中不使用,comment.content而使用comment.content_markdown
顯然,對於博客這種讀大於寫的系統來說,我更傾向於在寫數據時進行轉換,因爲這種業務下大部分只有一次寫的操作。
所以我們在comment/forms.py中修改clean_content方法,在return content 之前增加一句content=mistune.markdown(content)
當然,別忘了在文件最上面加上語句

import mistune

這樣重啓項目後會遇到問題
因爲Django有自動轉碼功能
所以在comment/block.html代碼中的{{comment.content}}位置上下增加autoescape off 的處理,如下

{%autoescape off%}
{{comment.content}}
{%endautoescape%}

此外,側邊欄評論展示模板config/blocks/sidebar_comments.html也要關閉自動轉碼
文章正文使用Markdown
接着,再來處理文章的內容,其邏輯跟上面一致,我們同樣可以在adminform中來處理但是有一個問題,評論的內容目前沒有設置可修改功能,但是文章正文我們可能隨時都會修改
如果直接把content轉爲HTML格式然後存儲,不便於下次修改,因此,我們需要新增一個字段content_html來代替之前的content
我們正在Post模型中新增如下字段,

content_html=models.TextField(verbose_name="正文html代碼",blank=True,editable=False)

這裏之所以配置editable=False,是因爲這個字段不需要人爲處理,編寫完代碼後,需要進行遷移操作,接着需要重寫,save方法,因爲在form中處理這種,類型的轉換已經不合適了:

class Post(models.Model):
	#省略其他代碼
	def save(self,*args,**kwargs):
		self.content_html = mistune.markdown(self.content)
		super().save(*arg,**kwargs)
		

最後,調整模板中展示的部分。修改blog/detail.html中的部分代碼爲:

{% autoescape off %}
{{post.content_html}}
{% endautoescape %}

再次運行,然後在後臺新增markdown格式的內容,如果不知道markdown格式,那麼可以搜索一下,找片文章看看
配置代碼高亮
在上面的代碼中,我們已經完成了對markdown文本處理但是,對於程序員來說,寫的內容大部分都會包含代碼,默認情況下,markdown,只是幫助我們把代碼放到了 標籤中,沒做特殊處理,因此需要藉助另外的工具,
做代碼高亮需要依賴前端的庫,這裏有集中選擇,一個是Google出的code-prettfy,另外一個是highlights.js當然,還有其他的選擇,不過這裏我們選擇highlight.js來做,code-prettify用起來大同小異,在此之前,我們需要先來修改blog/base.html模板,在上面增加一個新的block塊,用來在子模板中實現特定邏輯,你可以理解爲開放一個吃那個的block給子模板填充數據用

{% block extra_head %}
{% endblock%}

然後在blog/detail.html的{% block main %}上面新增如下代碼

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.boot.css.com/highlight.js/9.12.0/styles/googlecode.min.css">
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
{% endblock %}

我們既可直接使用網上開放的cdn來使用highlight突出顯示代碼,也可以像,Booststrap那樣,
把內容下載到本地,通過我們的靜態文件服務來處理,你可以到highlight官網https://highlightjs.org/download/進行定製下載
通常情況下,

##背景##內容
‘’‘
import Django
print(你好)
’‘’

我們markdown處理之後

<h2></h2>
<pre><code></code></pre>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章