For people who can read, the first thing to do when reading a book is to carefully read the table of contents of the book. Reading the table of contents gives an idea of the overall content and improves the quality of reading by knowing exactly where the parts of interest are.
The same goes for blog posts, and a good table of contents is helpful for both the blogger and the reader. To take it a step further, it's also handy to have anchors in the table of contents, so that clicking on the title immediately takes you to that place.
Table of contents in the text
We have previously supported Markdown syntax for blog posts and now continue to enhance it.
Setting up Markdown's directory extensions is especially easy after the painful experience of tossing code highlighting.
Modify the article details view:
article/ ... # Article details def article_detail(request, id): ... = (, extensions=[ '', '', # Catalog extensions '', ] ) ...
It's just a matter of putting it together.Extension added in.
TOC: Table of Contents.
The addition of this line to the code is sufficient. For testing purposes, add a few first level headings, second level headings, etc. to the previous post.
Remember how Markdown syntax writes headings? First-level headings:# title1, secondary headings:## title2
You can then insert anywhere in the text[TOC]string, the catalog is automatically generated well:
By clicking on the title, the page immediately goes to the corresponding title (i.e., the concept of an "anchor point").
Catalog in any location
The above method can only insert the table of contents into the article. What if I want to insert the table of contents anywhere on the page?
It's also simple, and this time it requires a change in Markdown's rendering method:
article/
...
def article_detail(request, id):
...
# Modify Markdown syntax rendering
md = (
extensions=[
'',
'',
'',
]
)
= ()
# New objects have been added
context = { 'article': article, 'toc': }
return render(request, 'article/', context)
In order to be able to puttocExtracted separately, we start by assigning the Markdown class to a temporary variablemdThen use theconvert()method renders the body as an html page. The body is rendered into an html page via thePass the catalog to the template.
Note the difference between () and ().For a more detailed explanation see:official document
In order to render the new catalog into the page, the article detail template needs to be modified:
templates/article/
...
<div class="container">
<div class="row">
<!-- Nest the original content into the newdivcenter -->
<div class="col-9">
<h1 class="mt-4 mb-4">{{ }}</h1>
<div class="alert alert-success">
...
</div>
</div>
<!-- New catalogs added -->
<div class="col-3 mt-4">
<h4><strong>catalogs</strong></h4>
<hr>
<div>
{{ toc|safe }}
</div>
</div>
</div>
</div>
...
- Rearrange the layout to fit the original content into
col-9in the container of the right-hand side of thecol-3space reserved for catalogs -
tocneed|safeLabeling in order to render correctly
Reopen the page:
summarize
Finished the article's catalog function, so the article details page is also relatively complete.
Project Complete Code:Django_blog_tutorial
This is the whole content of this article.