How to display the list of internal titles (H1, H2, etc.) of the article content on the article detail page?
In Anqi CMS, in order to enhance the reading experience and page SEO effect of long articles, we usually hope to display a list of internal titles (H1, H2, etc.) on the side or above the article content on the article detail page, which is what we usually call the article catalog or navigation.This makes it convenient for readers to quickly jump to the chapters of interest, and also helps search engines better understand the structure of the article.
AnQi CMS provides a very convenient way to implement this function, the core lies in its powerful template tags and content field extraction capabilities.
Understand how AnQi CMS handles the structure of article content
When publishing or editing articles on Anqi CMS backend, you can easily set the title levels within the article using the rich text editor, such as H1, H2, H3, etc.The system saves the article content while also intelligently parsing this structural information and storing it as a callable field of the article.This is the key fieldContentTitles.
ContentTitlesIt is a very practical field that returns an array containing all the title information of the article. Each element of this array is an object that records the text content of the title in detail (Title）、Title's HTML tag type（Tag，such as 'H1'、'H2'）、Title's level（Level，represented by numbers，for example H1 is 1，H2 is 2），and possiblePrefix. With these structured data, we can flexibly build the article catalog in the template.
Steps to implement the title list on the article detail page.
To display this internal title list on the article detail page, we mainly complete it by modifying the template file of the article detail page.
Step 1: Locate the article detail template file
The template files of AnQi CMS are usually stored in/templateIn the directory, and organize according to the template package name and model type. For the article detail page, you need to find the corresponding article model underdetail.htmlfile. For example, if your article model table name isarchive, then the template file path may be similar to/template/{你的模板目录}/archive/detail.html. If you are using a flat file organization mode, it may bearchive_detail.html. Please make sure you are modifying the template file currently being used by the website.
Step two: Obtain the title data of the article content
After locating the correct template file, you can usearchiveDetailtags to get the details of the current article, includingContentTitlesfield. Due toContentTitlesis a complex data type (array), we need to assign it to a variable first so that we can iterate over it later.
You can get it like this in the template.ContentTitles:
{% archiveDetail contentTitles with name="ContentTitles" %}
here,contentTitlesIs the variable name you defined, which now contains all the internal title data of the article.
The third step is to write loop code to display the title list
obtaining tocontentTitlesAfter the variable, the next step is to go throughforLoop through this array and build a nested list structure based on the level of each title (LevelorTag). A common practice is to use<ul>and<li>Create an unordered list by tag, and reflect the level feeling through CSS style.
Here is a basic template code example for implementing a title list.
{# 假设我们把这个目录放在文章内容之前或者侧边栏 #}
<div class="article-toc">
<h3>文章目录</h3>
<ul class="toc-list">
{% for item in contentTitles %}
{# 根据标题层级添加不同的类名，方便CSS控制样式和缩进 #}
<li class="toc-item toc-level-{{ item.Level }}">
<a href="#{{ item.Tag | lower }}-{{ loop.index }}">
{{ item.Prefix }}{{ item.Title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{# 这里是文章内容的显示部分，通常是这样调用的： #}
<div>
{%- archiveDetail articleContent with name="Content" %}
{{articleContent|safe}}
</div>
Some notes:The above.<a>in the labelhref="#{{ item.Tag | lower }}-{{ loop.index }}"This is to allow directory items to be clickable. This means you need to manually or through other means (such as JavaScript or custom content filters) add a unique identifier to each H tag in the article content.idProperty, making it correspond to the directory inhrefThe value. For example, if there is one in the article<h2>小节标题</h2>Then you need to make sure it is rendered as<h2 id="h2-1">小节标题</h2>Click the corresponding link in the catalog to navigate to the correct location.loop.indexIt is the built-in variable of the for loop in Pongo2 template engine, indicating the current loop index (starting from 1).
Step 4: Style beautification and interaction enhancement
Just having HTML structure is not enough, you also need to beautify the title list through CSS to match the overall style of the website. For example, you can make differenttoc-level-XSet the class name with different indentation to make the directory look more hierarchical.
/* 示例CSS样式 */
.article-toc {
border: 1px solid #eee;
padding: 15px;
margin-bottom: 20px;
background-color: #f9f9f9;
}
.article-toc h3 {
font-size: 1.2em;
margin-top: 0;
margin-bottom: 10px;
}
.toc-list {
list-style: none;
padding-left: 0;
}
.toc-item {
margin-bottom: 5px;
}
.toc-item a {
text-decoration: none;
color: #333;
display: block;
padding: 3px 0;
}
.toc-item a:hover {
color: #007bff;
}
/* 不同层级的缩进 */
.toc-level-1 { padding-left: 0; }
.toc-level-2 { padding-left: 15px; }
.toc-level-3 { padding-left: 30px; }
.toc-level-4 { padding-left: 45px; }
/* ...更多层级 */
To achieve click jump, a more efficient solution is to use JavaScript. After the article content is rendered, traverse through it using JS.archive.ContentAdd dynamic tags to all H labels.idand update the catalog in<a>label'shrefTo achieve a smooth scrolling effect. This can avoid the麻烦 of manually adding IDs and is more universal.
Actual application and benefits
By following these steps, you will be able to dynamically display a clear, navigable internal title list on the article detail page of AnQi CMS.This significantly improves the user experience when browsing long articles, helps them quickly locate information, reduce the bounce rate, and also provides clearer page structure signals for search engines, which is beneficial for the crawling and ranking of page content, thereby indirectly optimizing the SEO performance.
Frequently Asked Questions (FAQ)
1. Why did I add code to the template but the front-end page did not display the title list?
There may be several reasons. First, please check if you have added the code to the correct article detail template file (such asarchive/detail.htmlIn the first place. Secondly, whether the content of the article you published indeed contains internal titles such as H1, H2, etc. If the content of the article does not have these titles, ...ContentTitlesThe field will be empty, naturally, the directory will not be displayed. Finally, Anqi CMS has a cache mechanism, after modifying the template file, you may need to clear the system cache in the "Update Cache" feature on the background, so that the changes take effect.
How to make the generated title list clickable and jump to the corresponding position of the article content?
ContentTitlesThe field itself only provides the title text and hierarchy information, and does not automatically add it to the HTML tags of the article contentid. To implement click-through, you need to dynamically add unique attributes to the H tags in the article content through JavaScript.idattributes and ensure that the attributes in the directory.<a>label'shrefmatch these.idMatch. A common method is to: use JavaScript to traverse after the page has loadedarchive.ContentAll the H tags rendered (such asdocument.querySelectorAll('h1, h2, h3, h4, h5, h6')), generate and set unique for themid, while updating the corresponding directory<a>label'shref.
3.ContentTitlesCan the field retrieve all H tags in the article, such as H1 to H6?
Yes,ContentTitlesThe field can retrieve the title information corresponding to all levels of H tags (H1 to H6) in the article content editor. The system will display the titles according to the title level you set in the editor, inContentTitlesEach object in the array accurately reflectsTagsuch as "H1", "H2", andLevelsuch as 1, 2 properties. This means regardless of how many levels of