作者: zifanwang 发布于2020-05-19
首先修改article/views.py中的article_detail:
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:
{% 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>
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)再创建以下文章:
Title:测试
Body:
#1
##2
###3
####4
#####5
######6
查看文章:
可以看见右边已经正确显示目录了。