资讯专栏INFORMATION COLUMN

Django搭建个人博客:渲染Markdown文章目录

Bamboy / 1878人阅读

摘要:博文也是同样的,好的目录对博主和读者都很有帮助。文中的目录之前我们已经为博文支持了语法,现在继续增强其功能。修改文章详情视图文章详情目录扩展仅仅是将将扩展添加了进去。通过将目录传递给模板。

对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录。阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量。

博文也是同样的,好的目录对博主和读者都很有帮助。更进一步的是,还可以在目录中设置锚点,点击标题就立即前往该处,非常的方便。

文中的目录

之前我们已经为博文支持了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

...

{{ article.title }}

...

目录


{{ toc|safe }}
...

重新布局,将原有内容装进col-9的容器中,将右侧col-3的空间留给目录

toc需要|safe标签才能正确渲染

重新打开页面:

总结

完成了文章的目录功能,至此文章详情页面也比较完善了。

有疑问请在杜赛的个人网站留言,我会尽快回复。

或Email私信我:dusaiphoto@foxmail.com

项目完整代码:Django_blog_tutorial

转载请注明出处。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/42913.html

相关文章

  • Django搭建个人博客:使用Markdown语法书写文章

    摘要:重新打开一个命令行窗口,进入虚拟环境,安装是一种通用语法高亮显示器,可以帮助我们自动生成美化代码块的样式文件。 上一章我们实现了文章详情页面。为了让文章正文能够进行标题、加粗、引用、代码块等不同的排版(像在Office中那样!),我们将使用Markdown语法。 安装Markdown Markdown是一种轻量级的标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的或...

    沈建明 评论0 收藏0
  • Django搭建个人博客:使用django-ckeditor富文本编辑器

    摘要:后面两个编辑器自带,不用单独下载,添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器,还得对代码稍加改动。对于有些不喜欢的人来说,甚至可以连博文都使用提供的富文本编辑器。 前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了,你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体...

    beanlam 评论0 收藏0
  • 使用 django-blog-zinnia 搭建个人博客

    摘要:语法支持再次打开文件,在文件的最后添加指明了使用语法标记,做了两个拓展,其中表示支持语法高亮,包含的特性请参见相关文档。语法高亮支持注意这一步必须在安装完主题之后。 目前网上搭建个人博客的方案很多,虽然使用诸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齐全的高性能个人博客,但是本文将尝试一种更为小众化的方案 —— 一款基于 dj...

    褰辩话 评论0 收藏0
  • Django搭建个人博客:使用Form表单类发表新文章

    摘要:一些表单界面元素文本框或复选框非常简单并内置在中,而其他会复杂些像弹出日期选择等操作控件。和标签中的属性指定了当前文本框提交的数据的名称,它必须与表单类中的字段名称对应,否则服务器无法将字段和数据正确的对应起来。 前面我们已经学会如何用Markdown语法书写文章了。 但是还有问题呀。之前写文章都是在后台中进行的,万一有别的普通用户也要发表文章怎么办?万一我想拓展些后台中没有的提交验证...

    Java3y 评论0 收藏0
  • Django 学习小组:博客开发实战第一周教程 —— 编写博客的 Model 与主页面

    摘要:学习小组是由我发起的一个促进新手互相学习互相帮助的组织。当然如果你不喜欢英文,可以看我们的中文翻译版本入门教程中文翻译版。如果模板文件中有如下代码那么渲染时就会循环渲染篇文章,并且也会被存储在数据库中文章的标题取代。 本教程内容已过时,更新版教程请访问: django 博客开发入门教程。 本节是 Django Blog 项目的开篇,是 Django 学习小组的集体学习成果。Django...

    陈江龙 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<