Django渲染Markdown文章目录的方法示例
作者:杜赛 发布时间:2021-03-31 05:12:07
标签:Django,渲染,Markdown,文章目录
对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录。阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量。
博文也是同样的,好的目录对博主和读者都很有帮助。更进一步的是,还可以在目录中设置锚点,点击标题就立即前往该处,非常的方便。
文中的目录
之前我们已经为博文支持了Markdown语法,现在继续增强其功能。
有折腾代码高亮的痛苦经历之后,设置Markdown的目录扩展就显得特别轻松了。
修改文章详情视图:
article/views.py
...
# 文章详情
def article_detail(request, id):
...
article.body = markdown.markdown(article.body,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
# 目录扩展
'markdown.extensions.TOC',
]
)
...
仅仅是将将markdown.extensions.TOC
扩展添加了进去。
TOC: Table of Contents,即目录的意思
代码增加这一行就足够了。为了方便测试,往之前的文章中添加几个一级标题、二级标题等。
还记得Markdown语法如何写标题吗?一级标题:# title1
,二级标题:## title2
然后你可以在文中的任何地方插入[TOC]
字符串,目录就自动生成好了:
点击标题,页面就立即前往相应的标题处(即“锚点”的概念)。
任意位置的目录
上面的方法只能将目录插入到文章当中。如果我想把目录插入到页面的任何一个位置呢?
也简单,这次需要修改Markdown的渲染方法:
article/views.py
...
def article_detail(request, id):
...
# 修改 Markdown 语法渲染
md = markdown.Markdown(
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
]
)
article.body = md.convert(article.body)
# 新增了md.toc对象
context = { 'article': article, 'toc': md.toc }
return render(request, 'article/detail.html', context)
为了能将toc
单独提取出来,我们先将Markdown类赋值给一个临时变量md
,然后用convert()
方法将正文渲染为html页面。通过md.toc
将目录传递给模板。
注意markdown.markdown()和markdown.Markdown()的区别更详细的解释见:官方文档
为了将新的目录渲染到页面中,需要修改文章详情模板:
templates/article/detail.html
...
<div class="container">
<div class="row">
<!-- 将原有内容嵌套进新的div中 -->
<div class="col-9">
<h1 class="mt-4 mb-4">{{ article.title }}</h1>
<div class="alert alert-success">
...
</div>
</div>
<!-- 新增的目录 -->
<div class="col-3 mt-4">
<h4><strong>目录</strong></h4>
<hr>
<div>
{{ toc|safe }}
</div>
</div>
</div>
</div>
...
重新布局,将原有内容装进
col-9
的容器中,将右侧col-3
的空间留给目录toc
需要|safe
标签才能正确渲染
重新打开页面:
总结
完成了文章的目录功能,至此文章详情页面也比较完善了。
项目完整代码:Django_blog_tutorial
来源:https://segmentfault.com/a/1190000017578378
0
投稿
猜你喜欢
- 本文实例讲述了Python实现求解括号匹配问题的方法。分享给大家供大家参考,具体如下:这个在本科学习数据结构的时候已经接触很多了,主流的思想
- 实现功能QuestType 1->查询语句, 2->更新语句, 3->删除语句, 4->插入语句<
- 需求是需要用python往 SqlServer中的image类型字段中插入二进制图片核心代码,研究好几个小时的代码:安装pywin32,ad
- 最近帮朋友做了点东西,最后需要将结果在网页中展示,这就需要搭建个服务器,做几个网页把数据信息展示出来。网上找了一下,阿里腾讯都有租服务器的业
- 网上关于使用python 的发送multipart/form-data的方法,多半是采用ulrlib2 的模拟post方法,如下
- 由Oralce8.1开始,Oracle增加了一个新的特性就是Stored Outlines,或者称为Plan Stability(计划稳定性
- PDF是我们经常会接触到的一种文件格式,文献、文档...很多都是PDF格式。它以格式稳定的优势,使得我们在打印、分享、传输过程中能够最优的保
- 现在做的一个小项目需要用到python的相关知识,但是因为太久没用一些东西都忘掉了,因此在本篇博客中记录一下python的函数和类的基础知识
- 本篇阅读的代码实现了将输入的数字转化成一个列表,输入数字中的每一位按照从左到右的顺序成为列表中的一项。本篇阅读的代码片段来自于30-seco
- 之前一直对于python类的继承机制认知的比较混乱,今天学习记录一下。(1)首先使用直接继承的方式class parent():  
- 在函数参数中乱用表达式作为默认值Python允许给一个函数的某个参数设置默认值以使该参数成为一个可选参数。尽管这是这门语言很棒的一个功能,但
- 前几天,我们Python猫交流学习群 里的 M 同学提了个问题。这个问题挺有意思,经初次讨论,我们认为它无解。然而,我认为它很有价值,应该继
- 一、PsutilPython当中的Psutil模块是个跨平台库,它能够轻松获取系统运行的进程和系统利用率,包括CPU、内存、磁盘、网络等信息
- 网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一
- 1、前言 MySQL 是完全网络化的跨平台关系型数据库系统,同时是具有客户机/服务器体系结构的分布式数据库管理系统。它具有功能强、使用简便、
- 内容摘要:Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQL Server服务器系统和数据库的安全进行
- 选择自 xinyuxin912 的 Blog将一个图片以二进制值的形式存入Xml文件中try { &nbs
- Ajax 技术改变了大型商业 Web 应用程序的外观,但是许多较小的 Web 站点都不具备足够的资源重新构建完整的用户界面(UI)。Ajax
- dict的很多方法跟list有类似的地方,下面一一道来,并且会跟list做一个对比嵌套嵌套在list中也存在,就是元素是list,在dict
- Silverlight和Flash,到底谁更强?谁更有优势?很多初接触Silverlight和Flash的人总是会问这个问题,因为它们在表面