上一章我們實現了文章詳情頁面。為了讓文章正文能夠進行標題、加粗、引用、代碼塊等不同的排版(像在Office中那樣!),我們將使用Markdown語法。

安裝Markdown

Markdown是一種輕量級的標記語言,它允許人們「使用易讀易寫的純文本格式編寫文檔,然後轉換成有效的或者HTML文檔。建議讀者一定要花五分鐘時間熟悉一下Markdown的語法,熟練後碼字效率一定會大幅提高。

關於Markdown語法看這裡:Markdown 語法介紹

安裝markdown也很簡單:進入虛擬環境,輸入指令pip install markdown即可。

使用Markdown

為了將Markdown語法書寫的文章渲染為HTML文本,首先改寫article/views.pyarticle_detail()

article/views.py

...

# 引入markdown模塊
import markdown

def article_detail(request, id):
article = ArticlePost.objects.get(id=id)

# 將markdown語法渲染成html樣式
article.body = markdown.markdown(article.body,
extensions=[
# 包含 縮寫、表格等常用擴展
markdown.extensions.extra,
# 語法高亮擴展
markdown.extensions.codehilite,
])

context = { article: article }
return render(request, article/detail.html, context)

代碼中markdown.markdown語法接收兩個參數:第一個參數是需要渲染的文章正文article.body;第二個參數載入了常用的語法擴展,markdown.extensions.extra中包括了縮寫、表格等擴展,markdown.extensions.codehilite則是後面要使用的代碼高亮擴展。

然後,修改templates/article/detail.html中有關文章正文的部分:

templates/article/detail.html

...

# 在 article.body 後加上 |safe 過濾器
<p>{{ article.body|safe }}</p>

Django出於安全的考慮,會將輸出的HTML代碼進行轉義,這使得article.body中渲染的HTML文本無法正常顯示。管道符|是Django中過濾器的寫法,而|safe就類似給article.body貼了一個標籤,表示這一段字元不需要進行轉義了。

這樣就把Markdown語法配置好了。

啟動伺服器,在後台中新錄入一條用markdown語法書寫的文章,內容如下:

# 國風·周南·關雎
---
**關關雎鳩,在河之洲。窈窕淑女,君子好逑。**

參差荇菜,左右流之。窈窕淑女,寤寐求之。

---
+ 列表一
+ 列表二
+ 列表二-1
+ 列表二-2
---

?```python
def article_detail(request, id):
article = ArticlePost.objects.get(id=id)
# 將markdown語法渲染成html樣式
article.body = markdown.markdown(article.body,
extensions=[
# 包含 縮寫、表格等常用擴展
markdown.extensions.extra,
# 語法高亮擴展
markdown.extensions.codehilite,
])
context = { article: article }
return render(request, article/detail.html, context)
?```

返迴文章詳情,結果如下:

很好,但是代碼塊還是不怎麼好看。

寫技術文章沒有代碼高亮怎麼行。繼續努力。

代碼高亮

static目錄中新建一個目錄md_css/,一會兒放置代碼高亮的樣式文件。

重新打開一個命令行窗口,進入虛擬環境,安裝Pygments:pip install Pygments

Pygments是一種通用語法高亮顯示器,可以幫助我們自動生成美化代碼塊的樣式文件。

在命令行中進入剛才新建的md_css目錄中,輸入Pygments指令:

pygmentize -S monokai -f html -a .codehilite > monokai.css

這裡有一點需要注意, 生成命令中的 -a 參數需要與真實頁面中的 CSS Selector 相對應,即.codehilite這個欄位在有些版本中應寫為.highlight。如果後面的代碼高亮無效,很可能是這裡出了問題。

回車後檢查一下,在md_css目錄中是否自動生成了一個叫monokai.css的文件,這是一個深色背景的高亮樣式文件。

接下來我們在base.html中引用這個文件:

templates/base.html

<head>
...
<link rel="stylesheet" href="{% static bootstrap/css/bootstrap.min.css %}">

<!-- 引入monikai.css -->
<link rel="stylesheet" href="{% static md_css/monokai.css %}">

</head>
...

重新啟動伺服器,順利的話看到如下:

除了Monokai這個深色的樣式外,Pygments還內置了很多其他的樣式,這個就看喜好選擇了。

各種不同樣式可以在這裡參照:pygments-css

總結

本章引進了Markdown語法以及代碼高亮擴展,從此可以寫排版漂亮的文章正文了。

下一章將學習如何創建一篇新的文章。

  • 有疑問請在杜賽的個人網站留言,我會儘快回復。
  • 或Email私信我:[email protected]
  • 項目完整代碼:Django_blog_tutorial

轉載請告知作者並註明出處。

推薦閱讀:

相关文章