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抓取豆瓣图片并自动保存示例学习
Jan 10 Python
python对字典进行排序实例
Sep 25 Python
python实现向ppt文件里插入新幻灯片页面的方法
Apr 28 Python
Python中shape计算矩阵的方法示例
Apr 21 Python
人机交互程序 python实现人机对话
Nov 14 Python
python中set()函数简介及实例解析
Jan 09 Python
python读取excel指定列数据并写入到新的excel方法
Jul 10 Python
利用PyCharm Profile分析异步爬虫效率详解
May 08 Python
python Web flask 视图内容和模板实现代码
Aug 23 Python
Python多个装饰器的调用顺序实例解析
May 22 Python
如何利用python web框架做文件流下载的实现示例
Jun 02 Python
基于pytorch中的Sequential用法说明
Jun 24 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
浅谈python装饰器探究与参数的领取
2017/12/01 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
电台编导求职信
2014/05/06 职场文书
花坛标语大全
2014/06/30 职场文书
纪律教育月活动总结
2014/08/26 职场文书
群教班子对照检查材料
2014/08/26 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2016新年慰问信范文
2015/03/25 职场文书
廉洁自律证明
2015/06/24 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers