Django渲染Markdown文章目录的方法示例


Posted in Python onJanuary 02, 2019

对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录。阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量。

博文也是同样的,好的目录对博主和读者都很有帮助。更进一步的是,还可以在目录中设置锚点,点击标题就立即前往该处,非常的方便。

文中的目录

之前我们已经为博文支持了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]字符串,目录就自动生成好了:

Django渲染Markdown文章目录的方法示例

点击标题,页面就立即前往相应的标题处(即“锚点”的概念)。

任意位置的目录

上面的方法只能将目录插入到文章当中。如果我想把目录插入到页面的任何一个位置呢?

也简单,这次需要修改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渲染Markdown文章目录的方法示例

总结

完成了文章的目录功能,至此文章详情页面也比较完善了。

项目完整代码:Django_blog_tutorial

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python使用os.listdir和os.walk获得文件的路径的方法
Dec 16 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
Nov 07 Python
Django ORM 聚合查询和分组查询实现详解
Aug 09 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
Aug 27 Python
python生成器用法实例详解
Nov 22 Python
python selenium实现发送带附件的邮件代码实例
Dec 10 Python
python matplotlib 绘图 和 dpi对应关系详解
Mar 14 Python
如何理解python面向对象编程
Jun 01 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
Aug 07 Python
Python JSON常用编解码方法代码实例
Sep 05 Python
python 爬虫网页登陆的简单实现
Nov 30 Python
基于Python实现将列表数据生成折线图
Mar 23 Python
使用python 打开文件并做匹配处理的实例
Jan 02 #Python
对Xpath 获取子标签下所有文本的方法详解
Jan 02 #Python
python之验证码生成(gvcode与captcha)
Jan 02 #Python
Python lxml解析HTML并用xpath获取元素的方法
Jan 02 #Python
用xpath获取指定标签下的所有text的实例
Jan 02 #Python
在python中获取div的文本内容并和想定结果进行对比详解
Jan 02 #Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
Jan 02 #Python
You might like
正则表达式语法
2006/10/09 Javascript
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
sogou地图API用法实例教程
2014/09/11 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python常见的格式化输出小结
2016/12/15 Python
Python中防止sql注入的方法详解
2017/02/25 Python
在Python中表示一个对象的方法
2019/06/25 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
元旦红领巾广播稿
2014/02/19 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
建筑结构施工求职信
2014/07/11 职场文书
公司合作意向书范文
2014/07/30 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang