In AnQi CMS, in order to enhance the reading experience of long articles and the page SEO effect, 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 commonly refer to as the article table of contents or navigation.This not only makes it convenient for readers to quickly jump to the chapters of interest, but also helps search engines better understand the structure of the article.

The AnQi CMS provides a very convenient way to implement this feature, with its core strength lying in its powerful template tags and content field extraction capabilities.

Understand how the Aanqi CMS processes the structure of article content

When publishing or editing articles on the AnQi CMS backend, you can easily set the title hierarchy within the article using the rich text editor, such as H1, H2, H3, etc.The system also intelligently parses these structural information while saving the article content and stores them as callable fields of the article.ContentTitles.

ContentTitlesThis is a very practical field, which returns an array containing all the title information of the article. Each element in this array is an object, which details the text content of the title (Title）Title HTML tag type（Tag, such as "H1", "H2", title level (Level, represented by numbers, for example H1 is 1, H2 is 2), and possiblePrefixWith 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:/templateUnder 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 under thedetail.htmlfile. For example, if your article model table name isarchiveThen the template file path may be similar to/template/{你的模板目录}/archive/detail.html. If you are using a flattened file organization mode, it may bearchive_detail.html. Make sure you are modifying the template file currently in use by the website.

Step 2: Get the title data of the article content

After locating the correct template file, you can usearchiveDetailtags to get the detailed information of the current article, includingContentTitlesfields. BecauseContentTitlesIt is a complex data type (array), we need to assign it to a variable first so that we can iterate over it later.

You can retrieve it in the template like thisContentTitles:

{% archiveDetail contentTitles with name="ContentTitles" %}

Here,contentTitlesIt is the variable name you defined, which now contains the data of all internal titles in the article.

Step 3: Write the loop code to display the list of titles

Get 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) as a common practice is to use<ul>and<li>Create an unordered list using tags and use CSS styles to show the level.

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 explanations:The above<a>the tag inhref="#{{ item.Tag | lower }}-{{ loop.index }}"This is to allow directory items to be clickable and jump to the corresponding location. 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 thehrefvalue. For example, if there is an<h2>小节标题</h2>in the article, you need to make sure it is rendered as<h2 id="h2-1">小节标题</h2>Click the corresponding link in the directory to jump to the correct position.loop.indexThe built-in variable of the for loop in Pongo2 template engine, representing the current loop index (starting from 1).

Step 4: Styling beautification and interaction enhancement

It's not enough to have just HTML structure, you also need to beautify this title list with CSS to match the overall style of the website. For example, you can set differenttoc-level-XSet different indentation for class names 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-through, a more efficient approach is to use JavaScript. After the article content is rendered, traverse through it using JS.archive.ContentTo dynamically add to all H tags in itid[en] and update the directory.<a>Tagshref[en] to achieve smooth scrolling effects. This avoids the麻烦 of manually adding IDs and is more versatile.

[en] practical 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 the Anqi CMS.This significantly enhances the user experience when browsing long articles, helping them quickly locate information, reduce bounce rates, and also provides clearer page structure signals to search engines, which is beneficial for the crawling and ranking of page content, indirectly optimizing SEO performance.

Common Questions (FAQ)

1. Why didn't the title list show on the front page even though I added code in the template?

There are several possible reasons. First, please check if you have added the code to the correct article detail template file (for example,archive/detail.htmlIn the second place, whether the content of the article you published indeed includes H1, H2, and other internal titles. If the content of the article does not have these titles,ContentTitlesThe field will be empty, and thus the directory will not be displayed.Finally, Anqi CMS has a caching mechanism. After modifying the template file, you may need to clear the system cache in the 'Update Cache' feature on the backend to make 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 text and hierarchical information of the title and does not automatically add it to the HTML tags of the article contentidTo implement click-through, you need to dynamically add unique attributes to the H tags in the article content through JavaScript.idin the table of contents, and make sure that the<a>Tagshrefattributes match these.idMatch. A common method is: after the page is loaded, use JavaScript to traversearchive.Contentall the H tags rendered (such as)document.querySelectorAll('h1, h2, h3, h4, h5, h6')), and generate and set a uniqueidAt the same time, update the corresponding directory<a>Tagshref.

3.ContentTitlesCan the field obtain 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 title level you set in the editor.ContentTitlesEach object in the array accurately reflectsTag(such as "H1", "H2") andLevel(such as 1, 2) properties. This means that no matter how many levels of