前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Python Django个人网站搭建13-渲染Markdown目录

Python Django个人网站搭建13-渲染Markdown目录

作者头像
zifan
发布2021-12-14 12:32:49
4730
发布2021-12-14 12:32:49
举报
文章被收录于专栏:个人编程技术学习与分享

作者: zifanwang  发布于2020-05-19

首先修改article/views.py中的article_detail:

代码语言:javascript
复制
def article_detail(request, id):
    article = ArticlePost.objects.get(id=id)
    article.total_views += 1
    article.save(update_fields=['total_views'])
    md = markdown.Markdown(
        extensions=[
            'markdown.extensions.extra',
            'markdown.extensions.codehilite',
            'markdown.extensions.toc',
        ]
    )
    article.body = md.convert(article.body)
    context = {'article': article, 'toc': md.toc}
    return render(request, 'article/detail.html', context)

为了能将toc单独提取出来,我们先将markdown类赋值给一个临时变量md,然后用convert()方法将正文渲染为html页面, 并通过md.toc将目录传递给模板。 修改article/detail.html:

代码语言:javascript
复制
{% extends "base.html" %}
{% load static %}
{% block title %}
    article
{% endblock title %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-9">
            <h1 class="col-12 mt-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">Author: {{ article.author }}</div>
        {% if user == article.author %}
            .<a href="#" onclick="confirm_delete()">Delete</a>
            .<a href="{% url "article:article_update" article.id %}">Edit</a>
        {% endif %}
            <div>
                &nbsp;&nbsp;views: {{ article.total_views }}
            </div>
            <div class="col-12">
                <p>{{ article.body|safe }}</p>
            </div>
        </div>
            {# contents #}
            <div class="col-3 mt-4">
                <h4>
                    <strong>contents</strong>
                    <hr>
                    <div>
                        {{ toc|safe }}
                    </div>
                </h4>
            </div>
        </div>
    </div>
    <script>
        function confirm_delete(){
            var r=confirm("Wanna delete?");
            if (r==true)
            {
                 window.location='{% url "article:article_delete" article.id %}';
            }
        }
    </script>
{% endblock content %}

将原来的内容装进col-9的容器中,将右侧col-3的空间留给目录,toc需要|safe标签才能正确渲染 我们运行服务器(python manage.py runserver)再创建以下文章:

代码语言:javascript
复制
Title:测试
Body:
#1
##2
###3
####4
#####5
######6

查看文章:

可以看见右边已经正确显示目录了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-05-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档