Diango博客--6.Markdown 文章自动生成目录

文章目录

    • 0.思路引导
    • 1.在文中插入目录
    • 2.在页面的任何地方插入目录
    • 3.美化标题的锚点 URL

0.思路引导

Markdown 在解析内容的同时还可以自动提取整个内容的目录结构,本文内容将从以下几个方面展开:
1)在文中插入目录;
2)在页面的任何地方插入目录;
3)美化标题的锚点 URL。

1.在文中插入目录

博客的 Post(文章)模型,其中 body 是我们存储 Markdown 文本的字段:

文件位置:blog/models.py

from django.db import modelsclass Post(models.Model):# Other fields ...body = models.TextField()

再来回顾一下文章详情页的视图,我们在 detail 视图函数中将 post 的 body 字段中的 Markdown 文本解析成了 HTML 文本,然后传递给模板显示
文件位置:blog/views.py

def detail(request, pk):post = get_object_or_404(Post, pk=pk)post.body = markdown.markdown(post.body,extensions=['markdown.extensions.extra','markdown.extensions.codehilite','markdown.extensions.toc',])return render(request, 'blog/detail.html', context={'post': post})

markdown.markdown() 方法把 post.body 中的 Markdown 文本解析成了 HTML 文本。同时我们还给该方法提供了一个 extensions 的额外参数。其中 markdown.extensions.toc 就是自动生成目录的拓展。

在渲染 Markdown 文本时加入了 toc 拓展后,就可以在文中插入目录了。方法是在书写 Markdown 文本时,在你想生成目录的地方插入 [TOC] 标记即可。

后台输入如下:
在这里插入图片描述
效果展示如下:
在这里插入图片描述

2.在页面的任何地方插入目录

上述方式的一个局限性就是只能通过 [TOC] 标记在文章内容中插入目录。如果想在页面的其它地方,比如侧边栏插入一个目录该怎么做呢?只需要稍微改动一下解析 Markdown 文本内容的方式即可。

以detail.py中的模板标签{% block toc %}为例,其渲染的位置位于详情页的侧边栏,现在想要在侧边栏中生成目录。

{% block toc %}
...
{% endblock toc %}

需要修改的代码如下:

文件位置:blog/views.py

def detail(request, pk):post = get_object_or_404(Post, pk=pk)md = markdown.Markdown(extensions=['markdown.extensions.extra','markdown.extensions.codehilite','markdown.extensions.toc',])post.body = md.convert(post.body)m = re.search(r'<div class="toc">\s*<ul>(.*)</ul>\s*</div>', md.toc, re.S)post.toc = m.group(1) if m is not None else ''return render(request, 'blog/detail.html', context={'post': post})

文件位置:detail.html

{% block toc %}{% if post.toc %}<div class="widget widget-content"><h3 class="widget-title">文章目录</h3><div class="toc"><ul>{{ post.toc|safe }}</ul></div></div>{% endif %}
{% endblock toc %}

在这里,我们没有直接用 markdown.markdown() 方法来渲染 post.body 中的内容,而是先实例化了一个 markdown.Markdown 对象 md,和 markdown.markdown() 方法一样,也传入了 extensions 参数。

接着我们便使用该实例的 convert 方法将 post.body 中的 Markdown 文本解析成 HTML 文本。而一旦调用该方法后,实例 md 就会多出一个 toc 属性,这个属性的值就是内容的目录,我们把 md.toc 的值通过整个表达式的处理,赋给 post.toc 。

注意:为了防止文章目录为空的情况,使用正则表达式来测试 ul 标签中是否包裹有元素,从而来确定是否存在目录。并使用新的模板标签 {% if %},来对post.toc做条件判断。

效果展示如下:
在这里插入图片描述

3.美化标题的锚点 URL

文章内容的标题被设置了锚点,点击目录中的某个标题,页面就会跳到该文章内容中标题所在的位置,这时候浏览器的 URL 显示的值可能不太美观,比如像下面的样子:
在这里插入图片描述
#1_1 就是锚点,Markdown 在设置锚点时利用的是标题的值,由于通常我们的标题都是中文,Markdown 没法处理,所以它就忽略的标题的值,而是简单地在后面加了个1 _1 这样的锚点值。为了解决这一个问题,需要修改一下传给 extentions 的参数,其具体做法如下:

文件位置:blog/views.py

from django.utils.text import slugify
from markdown.extensions.toc import TocExtensiondef detail(request, pk):post = get_object_or_404(Post, pk=pk)md = markdown.Markdown(extensions=['markdown.extensions.extra','markdown.extensions.codehilite',# 记得在顶部引入 TocExtension 和 slugifyTocExtension(slugify=slugify),])post.body = md.convert(post.body)m = re.search(r'<div class="toc">\s*<ul>(.*)</ul>\s*</div>', md.toc, re.S)post.toc = m.group(1) if m is not None else ''return render(request, 'blog/detail.html', context={'post': post})

和之前不同的是,extensions 中的 toc 拓展不再是字符串 markdown.extensions.toc ,而是 TocExtension 的实例。

TocExtension 在实例化时其 slugify 参数可以接受一个函数,这个函数将被用于处理标题的锚点值。

Markdown 内置的处理方法不能处理中文标题,所以我们使用了 django.utils.text 中的 slugify 方法,该方法可以很好地处理中文。

效果展示如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452505.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中对象和引用的理解

2019独角兽企业重金招聘Python工程师标准>>> 偶然想起Java中对象和引用的基本概念&#xff0c;为了加深下对此的理解和认识&#xff0c;特地整理一下相关的知识点&#xff0c;通过具体实例从两者的概念和区别两方面去更形象的认识理解&#xff0c;再去记忆。12一、对…

android怎样封装,如何封装属于自己的博客网站安卓APP 源码家园

说实话我今天在写这个文章的时候是我使用易语言(E4A\易安卓)的第一天&#xff0c;我也是易小白&#xff0c;但是的确可以用&#xff01;我为什么写这个文章呢&#xff1f;因为之前我也想封装自己的网站&#xff0c;然后去网上找的在线封装生成APP&#xff0c;果然能封装好了&am…

程序员常犯的5个非技术性错误

一个好的软件开发人员需要培养两种技能&#xff1a;技术技能和非技术技能。不幸的是一些开发者只注重技术的部分&#xff0c;以致养成一些陋习&#xff0c;下面是最常犯的5个非技术性错误&#xff1a; 0. 缺乏自律 Jim Rohn曾经说过&#xff1a;自律是目标和成果之间的桥梁。我…

Redis进阶实践之二十 Redis的配置文件使用详解

一、引言   写完上一篇有关redis使用lua脚本的文章&#xff0c;就有意结束Redis这个系列的文章了&#xff0c;当然了&#xff0c;这里的结束只是我这个系列的结束&#xff0c;但是要学的东西还有很多。但是&#xff0c;好多天过去了&#xff0c;总是感觉好像还缺点什么…

web流程设计器 工作流的 整合视频教程 activiti画图 SSM和独立部署

本视频为activiti工作流的web流程设计器整合视频教程整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器&#xff09;本视频共讲了两种整合方式1. 流程设计器和其它工作流项目分开部署的方式2. 流程设计器和SSM框架项目整合在一起的方式视频大小 1.13 GB ~【…

Diango博客--7.自动生成文章摘要

文章目录0.思路引导1.方法一&#xff1a;覆写 save 方法2.方法二&#xff1a;使用 truncatechars 模板过滤器0.思路引导 博客文章的模型有一个 excerpt 字段&#xff0c;这个字段用于存储文章的摘要。 若在 django admin 后台手动为文章输入摘要&#xff0c;每次手动输入摘要…

android 增加触摸范围,android seekBar 增加点击和滑动范围

seekBar的的范围有限&#xff0c;有时候设计师要求高度为4dp&#xff0c;此时范围太小&#xff0c;很难滑动成功。因此&#xff0c;我们需要在不改变 UI 的前提下&#xff0c;增加点击和滑动范围。直接上代码&#xff1a;public class MainActivity extends AppCompatActivity …

特斯拉股价暴跌,疯狂烧钱是否真的能够带来高额回报?

“疯狂烧钱”并不能成为公司持续亏损的理由&#xff0c;反而可能成为公司升级转型的关键所在。 上周三&#xff0c;特斯拉发布第四季度财报&#xff0c;其后特斯拉CEO马斯克在电话会议上表示&#xff0c;特斯拉亏损收窄&#xff0c;营收同比增长88%&#xff0c;但与此同时其首…

android gravity参数,Gravity - [ Android中文手册 ] - 在线原生手册 - php中文网

Gravity版本&#xff1a;Android 4.0 r1结构继承关系public class Gravity extends Objectjava.lang.Objectandroid.view.Gravity类概述用来在一个更大容器中布置对象的标准常量和工具。常量public static final intAXIS_CLIP原始位控制右/底边界是否被剪切到它的容器中&#x…

Diango博客--8.解锁博客侧栏

文章目录0.思路引导1.[最新文章] 模板标签2.[归档] 模板标签3.[分类] 模板标签4.[标签云] 模板标签5.使用自定义的模板标签0.思路引导 博客侧边栏有四项内容&#xff1a;最新文章、归档、分类和标签云&#xff0c;效果展示如下&#xff1a; 这些内容相对比较固定和独立&…

十五、详述 IntelliJ IDEA 插件的安装及使用方法

正文 首先&#xff0c;进入插件安装界面&#xff1a; Mac&#xff1a;IntelliJ IDEA -> Preferences -> Plugins;Windows&#xff1a;File -> Settings -> Plugins.标注 1&#xff1a;显示 IntelliJ IDEA 的插件分类&#xff0c; All plugins&#xff1a;显示 Inte…

编程巨星的唯一秘诀

别以为是那些软件开发定律&#xff0c;别以为是开发出那些特殊用途的软件&#xff0c;别以为是软件设计技术本身。只有一条真理决定了一个软件程序员的成功还是失败。由于坚持这个真理&#xff0c;一个资深的程序员能在一天的时间里学会一门新的编程语言&#xff0c;而由于不坚…

面向数据流的设计方法

面向数据流的设计方法的目标是给出设计软件结构的一个系统化的途径。 在软件工程的需求分析阶段&#xff0c;信息流是一个关键考虑。通常用数据流图描绘信息在系统中加工和流动的 情况。面向数据流的设计方法定义了一些不同的“映射”&#xff0c;利用这些映射可以把数据流图…

AI研究的盲点:无解的神经网络内在逻辑

论人工神经网络内在逻辑的研究历史及现状。 伴随着大数据&#xff0c;人工智能&#xff08;AI&#xff09;在沉寂了多年之后&#xff0c;又迎来了新的高潮。在这场涉及大部分科学的革命中&#xff0c;人工神经网络释放了人工智能&#xff08;AI&#xff09;。但科学家们发现&a…

Diango博客--9.归档、分类和标签页

文章目录0.思路引导1.回顾2.归档页面3.分类页面4.标签页面0.思路引导 侧边栏已经正确地显示了最新文章列表、归档、分类、标签等信息&#xff0c;现在来完善归档、分类和标签功能。 当用户点击归档下的某个日期、分类栏目下的某个分类或者标签栏目下的某个标签时&#xff0c;…

android studio1.2.6,1.2.2 使用Android Studio开发Android APP | 菜鸟教程

写在前面本节将介绍如何使用Android Studio开发Android APP&#xff0c;和前面Eclipse ADT SDK搭建Android开发环境一样&#xff0c;本节也只是介绍一些基本东西&#xff0c;深入的&#xff0c;比如快捷键&#xff0c;小技巧等会再另一篇文章中详细地介绍&#xff01;1.下载A…

软件工程中的启发规则

1.改进软件结构提高模块独立性 2. 模块规模应该适中 3.深度、宽度、扇出和扇入都应适当 4.模块的作用域应该在控制域之内 5.力争降低模块接口的复杂程度 6.设计单入口单出口的模块 7.模块功能应该可以预测

C#指南,重温基础,展望远方!(4)表达式

表达式是在操作数和运算符的基础之上构造而成。 表达式的运算符指明了向操作数应用的运算。 运算符的示例包括 、-、*、/ 和 new。 操作数的示例包括文本、字段、局部变量和表达式。 如果表达式包含多个运算符&#xff0c;那么运算符的优先级决定了各个运算符的计算顺序。 例如…

UPS开始尝试“货车+无人机”的投递方式,不必再担心快递员离职了

继亚马逊“空中仓库”&#xff0c;无人机送货再现新形式。 作为世界上最大的快递承运商与包裹递送公司&#xff0c;UPS当然也没有放过“送货无人机”这一新颖业务。与亚马逊推出“空中仓库”的理念类似&#xff0c;UPS并没有选择让无人机从仓库直接起飞&#xff0c;而是将之与…