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解析xml中dom元素的方法
Mar 12 Python
通过数据库对Django进行删除字段和删除模型的操作
Jul 21 Python
Python实现时钟显示效果思路详解
Apr 11 Python
python操作mysql代码总结
Jun 01 Python
Python简单爬虫导出CSV文件的实例讲解
Jul 06 Python
pytorch中的embedding词向量的使用方法
Aug 18 Python
安装PyInstaller失败问题解决
Dec 14 Python
Python读取表格类型文件代码实例
Feb 17 Python
使用Python项目生成所有依赖包的清单方式
Jul 13 Python
pymysql模块使用简介与示例
Nov 17 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
Jan 05 Python
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
Mar 29 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
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php目录拷贝实现方法
2015/07/10 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
逻辑链路控制协议
2016/10/01 面试题
物业门卫岗位职责
2013/12/28 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
Java中的Kotlin 内部类原理
2022/06/16 Java/Android