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设置windows桌面壁纸的实现代码
Jan 28 Python
Python中的choice()方法使用详解
May 15 Python
vue.js实现输入框输入值内容实时响应变化示例
Jul 07 Python
python算法与数据结构之冒泡排序实例详解
Jun 22 Python
快速解决vue.js 模板和jinja 模板冲突的问题
Jul 26 Python
Python正则表达式急速入门(小结)
Dec 16 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
Jan 04 Python
python使用ctypes调用扩展模块的实例方法
Jan 28 Python
Python正则表达式高级使用方法汇总
Jun 18 Python
Python+Xlwings 删除Excel的行和列
Dec 19 Python
pytorch查看网络参数显存占用量等操作
May 12 Python
Python制作表白爱心合集
Jan 22 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
PHP对字符串的递增运算分析
2010/08/08 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python冒泡排序注意要点实例详解
2016/09/09 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python算法题 链表反转详解
2019/07/02 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
夜班门卫岗位职责
2013/12/09 职场文书
公司活动邀请函
2014/01/24 职场文书
调研座谈会发言材料
2014/08/23 职场文书
格林童话读书笔记
2015/06/30 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技