How to automatically generate and display a table of contents (TOC) on the AnQiCMS article content page?

How does AnQiCMS support automatic generation of the table of contents?

AnQiCMS when processing article content, provides the ability to obtain structured information of the article. Its core lies inarchiveDetaila special field of template tags calledContentTitles. When we go througharchiveDetailWhen the tag gets the article details,ContentTitlesit will return an array that contains the details of all recognizable titles (such as H1, H2, H3, etc.) in the article content.

ContentTitlesEach element in the array is an object that provides all the data needed to generate a TOC:

• Title: The text content of the title.
• Tag: The HTML tag type corresponding to the title (such as "H1", "H2").
• Level: The level of the title (such as 1 for H1, 2 for H2).
• Prefix: If any, the custom prefix before the title.

With this information, we can traverse them in the template and dynamically build a hierarchical directory structure.

Detailed steps of implementation

To automatically generate and display the table of contents on the article content page of AnQiCMS, you can follow the following steps:

1. Locate the article detail page template

First, you need to find the template file responsible for rendering the article detail content. Usually, this will be/template/{模型table}/detail.htmlFor example, if it is an article model, it may bearticle/detail.html）or you customize the template file for a specific article.

2. Get the article title structure information

In the template file you find, the TOC is usually placed above or in the sidebar of the article content. Here, you can usearchiveDetailtags to get the current article'sContentTitlesInformation. This tag will extract all titles from the article content for processing in the template.

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

This line of code will assign the extracted array of titles tocontentTitlesThis variable, we can operate on it next.

3. Build the directory HTML structure

obtaining tocontentTitlesAfter the array, you can iterate over it to build the HTML structure of the catalog. To achieve hierarchical effects, you can useitem.Levelto create nested unordered lists(<ul>and<li>)

In addition, to make each entry in the directory clickable and jump to the corresponding position in the article content, you need to generate a unique anchor ID for each title and use it as the directory link'shrefProperty. Due toContentTitlesThe default does not provide the title ID, we can use simple JavaScript to dynamically add IDs to the titles in the article content and let the table of contents links point to these IDs.

Here is a basic HTML structure and the idea of generating anchor ID

`twig

<h4>文章目录</h4>
<ul class="toc-list">
{% set current_level = 0 %}
{% set html_output = "" %}
{% for item in contentTitles %}
    {% set item_level = item.Level %}
    {% set item_title_sanitized = item.Title|replace:"[\\s\\W]+","-"|lower %} {# 简单处理标题生成ID #}

    {% if item_level > current_level %}
        {# 层级增加，开始新一层的UL #}
        {{ html_output|safe }}
        {% set html_output = "" %}
        {% for i in range(item_level - current_level) %}
            {{ html_output|safe }}
            {% set html_output = "<ul>" %}
        {% endfor %}
    {% elif item_level < current_level %}
        {# 层级减少，闭合多余的UL #}
        {% set html_output = "" %}
        {% for i in range(current_level - item_level) %}
            {{ html_output|safe }}
            {% set html_output = "</ul>" %}
        {% endfor %}
    {% endif %}

    {{ html_output|safe }}
    {% set html_output = "<li><a href=\"#" ~ item_title_sanitized ~ "\">" ~ item.Title ~ "</a></li>" %}
    {% set current_level = item_level %}
{% endfor %}

{{ html_output|safe }} {# 输出最后一个li #}

{% for i in range(current_level) %}
    </ul>
{% endfor %}
</ul>