資訊專欄INFORMATION COLUMN
摘要：博文也是同樣的，好的目錄對(duì)博主和讀者都很有幫助。文中的目錄之前我們已經(jīng)為博文支持了語(yǔ)法，現(xiàn)在繼續(xù)增強(qiáng)其功能。修改文章詳情視圖文章詳情目錄擴(kuò)展僅僅是將將擴(kuò)展添加了進(jìn)去。通過(guò)將目錄傳遞給模板。
對(duì)會(huì)讀書的人來(lái)說(shuō)，讀一本書要做的第一件事，就是仔細(xì)閱讀這本書的目錄。閱讀目錄可以對(duì)整體內(nèi)容有所了解，并清楚地知道感興趣的部分在哪里，提高閱讀質(zhì)量。
博文也是同樣的，好的目錄對(duì)博主和讀者都很有幫助。更進(jìn)一步的是，還可以在目錄中設(shè)置錨點(diǎn)，點(diǎn)擊標(biāo)題就立即前往該處，非常的方便。
文中的目錄之前我們已經(jīng)為博文支持了Markdown語(yǔ)法，現(xiàn)在繼續(xù)增強(qiáng)其功能。
有折騰代碼高亮的痛苦經(jīng)歷之后，設(shè)置Markdown的目錄擴(kuò)展就顯得特別輕松了。
修改文章詳情視圖：
article/views.py
...
# 文章詳情
def article_detail(request, id):
...
article.body = markdown.markdown(article.body,
extensions=[
"markdown.extensions.extra",
"markdown.extensions.codehilite",
# 目錄擴(kuò)展
"markdown.extensions.TOC",
]
)
...
僅僅是將將markdown.extensions.TOC擴(kuò)展添加了進(jìn)去。
TOC: Table of Contents，即目錄的意思
代碼增加這一行就足夠了。為了方便測(cè)試，往之前的文章中添加幾個(gè)一級(jí)標(biāo)題、二級(jí)標(biāo)題等。
還記得Markdown語(yǔ)法如何寫標(biāo)題嗎？一級(jí)標(biāo)題：# title1，二級(jí)標(biāo)題：## title2
然后你可以在文中的任何地方插入[TOC]字符串，目錄就自動(dòng)生成好了：
點(diǎn)擊標(biāo)題，頁(yè)面就立即前往相應(yīng)的標(biāo)題處（即“錨點(diǎn)”的概念）。
任意位置的目錄上面的方法只能將目錄插入到文章當(dāng)中。如果我想把目錄插入到頁(yè)面的任何一個(gè)位置呢？
也簡(jiǎn)單，這次需要修改Markdown的渲染方法：
article/views.py
...
def article_detail(request, id):
...
# 修改 Markdown 語(yǔ)法渲染
md = markdown.Markdown(
extensions=[
"markdown.extensions.extra",
"markdown.extensions.codehilite",
"markdown.extensions.toc",
]
)
article.body = md.convert(article.body)
# 新增了md.toc對(duì)象
context = { "article": article, "toc": md.toc }
return render(request, "article/detail.html", context)
為了能將toc多帶帶提取出來(lái)，我們先將Markdown類賦值給一個(gè)臨時(shí)變量md，然后用convert()方法將正文渲染為html頁(yè)面。通過(guò)md.toc將目錄傳遞給模板。
注意markdown.markdown()和markdown.Markdown()的區(qū)別更詳細(xì)的解釋見：官方文檔
為了將新的目錄渲染到頁(yè)面中，需要修改文章詳情模板：
templates/article/detail.html ......{{ article.title }}
...目錄
{{ toc|safe }}
重新布局，將原有內(nèi)容裝進(jìn)col-9的容器中，將右側(cè)col-3的空間留給目錄
toc需要|safe標(biāo)簽才能正確渲染
重新打開頁(yè)面：
總結(jié)完成了文章的目錄功能，至此文章詳情頁(yè)面也比較完善了。
有疑問(wèn)請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。
或Email私信我：dusaiphoto@foxmail.com
項(xiàng)目完整代碼：Django_blog_tutorial
轉(zhuǎn)載請(qǐng)注明出處。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/42913.html
摘要：重新打開一個(gè)命令行窗口，進(jìn)入虛擬環(huán)境，安裝是一種通用語(yǔ)法高亮顯示器，可以幫助我們自動(dòng)生成美化代碼塊的樣式文件。 上一章我們實(shí)現(xiàn)了文章詳情頁(yè)面。為了讓文章正文能夠進(jìn)行標(biāo)題、加粗、引用、代碼塊等不同的排版（像在Office中那樣?。覀儗⑹褂肕arkdown語(yǔ)法。 安裝Markdown Markdown是一種輕量級(jí)的標(biāo)記語(yǔ)言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉(zhuǎn)換成有效的或...
摘要：后面兩個(gè)編輯器自帶，不用單獨(dú)下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯(cuò)在前臺(tái)使用為了讓用戶在前臺(tái)也能使用富文本編輯器，還得對(duì)代碼稍加改動(dòng)。對(duì)于有些不喜歡的人來(lái)說(shuō)，甚至可以連博文都使用提供的富文本編輯器。 前面我們已經(jīng)實(shí)現(xiàn)了用Markdown語(yǔ)法寫文章了。但是文章的評(píng)論用Markdown就不太合適了，你不能強(qiáng)求用戶也花時(shí)間去熟悉語(yǔ)法啊。另外評(píng)論中通常還有表情、帶顏色的字體...
摘要：語(yǔ)法支持再次打開文件，在文件的最后添加指明了使用語(yǔ)法標(biāo)記，做了兩個(gè)拓展，其中表示支持語(yǔ)法高亮，包含的特性請(qǐng)參見相關(guān)文檔。語(yǔ)法高亮支持注意這一步必須在安裝完主題之后。 目前網(wǎng)上搭建個(gè)人博客的方案很多，雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高性能個(gè)人博客，但是本文將嘗試一種更為小眾化的方案 —— 一款基于 dj...
摘要：學(xué)習(xí)小組是由我發(fā)起的一個(gè)促進(jìn)新手互相學(xué)習(xí)互相幫助的組織。當(dāng)然如果你不喜歡英文，可以看我們的中文翻譯版本入門教程中文翻譯版。如果模板文件中有如下代碼那么渲染時(shí)就會(huì)循環(huán)渲染篇文章，并且也會(huì)被存儲(chǔ)在數(shù)據(jù)庫(kù)中文章的標(biāo)題取代。 本教程內(nèi)容已過(guò)時(shí)，更新版教程請(qǐng)?jiān)L問(wèn)： django 博客開發(fā)入門教程。 本節(jié)是 Django Blog 項(xiàng)目的開篇，是?Django 學(xué)習(xí)小組的集體學(xué)習(xí)成果。Django...
摘要：一些表單界面元素文本框或復(fù)選框非常簡(jiǎn)單并內(nèi)置在中，而其他會(huì)復(fù)雜些像彈出日期選擇等操作控件。和標(biāo)簽中的屬性指定了當(dāng)前文本框提交的數(shù)據(jù)的名稱，它必須與表單類中的字段名稱對(duì)應(yīng)，否則服務(wù)器無(wú)法將字段和數(shù)據(jù)正確的對(duì)應(yīng)起來(lái)。 前面我們已經(jīng)學(xué)會(huì)如何用Markdown語(yǔ)法書寫文章了。 但是還有問(wèn)題呀。之前寫文章都是在后臺(tái)中進(jìn)行的，萬(wàn)一有別的普通用戶也要發(fā)表文章怎么辦？萬(wàn)一我想拓展些后臺(tái)中沒有的提交驗(yàn)證...
閱讀 3647·2021-10-15 09:43
閱讀 3549·2021-09-02 15:21
閱讀 2264·2021-08-11 11:23
閱讀 3303·2019-08-30 15:54
閱讀 1991·2019-08-30 13:54
閱讀 3260·2019-08-29 18:35
閱讀 729·2019-08-29 16:58
閱讀 1819·2019-08-29 12:49
