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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-cli3项目展示本地Markdown文件的方法

    [版本] vue-cli3 webpack@4.33.0 [步骤]1.安装插件vue-markdown-loader npm i vue-markdown-loader -D ps:这个插件是基于markdown-it的,不需要单独安装markdown-it. 2.修改vue.config.js配置文件(如果没有,在项目根目录新建一个): module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.

  • 利用Electron简单撸一个Markdown编辑器的方法

    Markdown 是我们每一位开发者的必备技能,在写 Markdown 过程中,总是寻找了各种各样的编辑器,但每种编辑器都只能满足某一方面的需要,却不能都满足于日常写作的各种需求. 所以萌生出自己动手试试,利用 Electron 折腾一个 Markdown 编辑器出来. 下面罗列出我所理想的 Markdown 编辑器的痛点需求: 必须要有图床功能,而且还可以直接上传到自己的图片后台,如七牛: 样式必须是可以自定义的: 导出的 HTML 内容可以直接粘贴到公众号编辑器里,直接发布,而不会出现格式的

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • 漂亮的Django Markdown富文本app插件的实现

    漂亮的Django Markdown富文本app插件的实现

    django-mdeditor Github地址:https://github.com/pylixm/django-mdeditor欢迎试用,star收藏! Django-mdeditor 是基于Editor.md的一个 django Markdown 文本编辑插件应用. Django-mdeditor 的灵感参考自伟大的项目django-ckeditor. 功能 支持 Editor.md 大部分功能 支持标准的Markdown 文本. CommonMark 和 GFM (GitHub Flav

  • 利用Vue实现一个markdown编辑器实例代码

    利用Vue实现一个markdown编辑器实例代码

    前言 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个简单的,易于在源码上修改的项目,核心功能都有的,以供修改使用 本文的源码地址如下:https://github.com/jiulu313/HelloMarkDown(本地下载) 喜欢的朋友可以帮忙star一下,欢迎交流学习 先看一下本项目的效果图(图片经过压缩) 本文的目的就是实现一个有核心功能的,简单,

  • CommonMark 使用教程：将 Markdown 语法转成 Html

    CommonMark 使用教程：将 Markdown 语法转成 Html

    Markdown写作 从 2016年 开始写博客,我的写作方式一直在改变,准确的说一直在进步,因为效率越来越高. 最初在 CSDN 上写东西时非常蹩脚,在他们编辑器上写点然后调整格式,再写,碰到图片还得将图片插入进去,调整图片大小位置等等,调整完继续写. 效率非常低. 后面了解到 Markdown ,改用 MD 写东西,效率快很多.后面在 Markdown 基础上慢慢优化找到自己的写作方式. 一般我用 MD 语法写完后,得到的是一堆带 MD 符号的文字,以下简称 MD文本. 然后会通过工具转成对

  • 解决python Markdown模块乱码的问题

    有个需求需要把markdown转成html模块,查询了一下刚好有这个模块 安装 pip install amrkdown 安装完成直接转换并保存为html时,发现出现中文乱码的情况 用编辑器打开发现是缺少utf8编码 所以只需要在头增加一行<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 即可 查询Markdown包安装地址 pip install markdown

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

    对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录.阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量. 博文也是同样的,好的目录对博主和读者都很有帮助.更进一步的是,还可以在目录中设置锚点,点击标题就立即前往该处,非常的方便. 文中的目录 之前我们已经为博文支持了Markdown语法,现在继续增强其功能. 有折腾代码高亮的痛苦经历之后,设置Markdown的目录扩展就显得特别轻松了. 修改文章详情视图: article/views.py ... # 文

  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    目录 自定义 Vite 插件 使用 vite-plugin-markdown Import Front Matter attributes Import compiled HTML (Mode.HTML) Import ToC metadata (Mode.TOC) Import as a React component (Mode.REACT) Import as a Vue component (Mode.VUE) 写在最后 大部分使用 Vite2 的开发者遇到的一个问题,就是文档里并没有相

  • node.js遍历目录的方法示例

    本文介绍了node.js遍历目录的方法示例,分享给大家,也给自己留个笔记,具体如下 同步遍历 const fs = require('fs'); const path=require('path'); function travel(dir,callback){ fs.readdirSync(dir).forEach((file)=>{ var pathname=path.join(dir,file) if(fs.statSync(pathname).isDirectory()){ travel

  • Typecho插件实现添加文章目录的方法详解

    目录 添加文章标题锚点 显示文章目录 添加文章目录样式 定位到文章 定位到目录 我的长博文不少,比较影响阅读体验,有必要添加一个文章目录功能.相比 Wordpress, Typecho 的插件就比较少了.我想找一个像掘金那样为文章添加目录的插件,没一个合适的.此类教程也不是很多,而且差不多都是前台 JavaScript 来实现的,感觉这样不如后台实现来的好. 注意:我使用的是Joe主题7.3,其他主题文件路径可能不一样. 添加文章标题锚点 1.声明 createAnchor 函数 在 core/

  • C#.Net基于正则表达式抓取百度百家文章列表的方法示例

    本文实例讲述了C#.Net基于正则表达式抓取百度百家文章列表的方法.分享给大家供大家参考,具体如下: 工作之余,学习了一下正则表达式,鉴于实践是检验真理的唯一标准,于是便写了一个利用正则表达式抓取百度百家文章的例子,具体过程请看下面源码: 一.获取百度百家网页内容 public List<string[]> GetUrl() { try { string url = "http://baijia.baidu.com/"; WebRequest webRequest = We

  • Django实现单用户登录的方法示例

    Django实现单用户登录的方法示例

    最近由于要毕业了写论文做毕设,然后还在实习发现已经好久都没有写博客了.今天由于工作需求,需要用Django实现单用户登录.大概意思就是跟QQ一样的效果,每个账号只能一个地方登录使用,限制账号的登录次数.由于用的是Django自带的认证,然后校验用户是否登录其实就是通过Session实现的.下面就简单分享一下怎么实现的吧. 单用户登录实现 在做用户登录认证的时候Django自带的有is_authenticated()方法.下面就是一个简单的认证过程. if request.user.is_auth

  • go语言实现markdown解析库的方法示例

    Blackfriday是在Go中实现的Markdown处理器.您可以安全地输入用户提供的数据,速度快,支持通用扩展(表,智能标点符号替换等),并且对于所有utf-8(unicode)都是安全的输入. 当前支持HTML输出以及Smartypants扩展. 使用 首先当然要引入: import github.com/russross/blackfriday 然后 output := blackfriday.MarkdownBasic(input) 这里input是[]byte类型,可以将markdo

  • Django中cookie的基本使用方法示例

    前言 基于 Internet的各种服务系统应运而生,建立商业站点或者功能比较完善的个人站点,常常需要记录访问者的一些信息:论坛作为 Internet发展的产物之一,在 Internet 中发挥着越来越重要的作用,是用户获取.交流.传递信息的主要场所之一,论坛常常也需要记录访问者的一些基本信息(如身份识别号码.密码.用户在 Web 站点购物的方式或用户访问该站点的次数).目前公认的是,通过 Cookie 和 Session 技术来实现记录访问者的一些基本信息. 下面就来一起看看Django中coo

  • Django model序列化为json的方法示例

    本文环境 Python 3.6.5 Django 2.0.4 fix(2018.5.19):最近得知Django 的model基类需要声明为abstract,故在原来的代码加入abstract声明,以免误导 在Django中,关于如何将model类序列化为json,一般的话有两a器 将model类转为字典,再使用json库的dumps方法转为json 第一种方法就不多讲了,直接去看官方文档就好啦 一般来说,官方提供的方法应该都是比较好用和稳定的,然而,使用官方的序列化器却问题不少: 格式丑陋,格

  • django 将model转换为字典的方法示例

    平常的开发过程中不免遇到需要把model转成字典的需求,尤其是现在流行前后端分离架构,Json格式几乎成了前后端之间数据交换的标准,这种model转dict的需求就更多了,本文介绍日常使用的方法以供参考 from django.forms.models import model_to_dict from projects.models import ProjectInformation site = ProjectInformation.objects.get(id=6) dict = mode

随机推荐