How does AnQiCMS display the table of contents or outline of the article content on the article detail page?

For articles that are rich in content and long in length, a clear table of contents or outline is like a navigation map, which can greatly enhance the reading experience of the reader.It not only helps readers quickly grasp the main outline of the article, but also allows them to accurately jump to the parts of interest, thereby improving the readability and practicality of the content.In AnQiCMS, implementing the content directory display on the article detail page is not difficult, the built-in functions of the system provide us with a simple and efficient solution.

How does AnQiCMS understand the structure of an article?

AnQiCMS was designed from the beginning with flexibility in content management and search engine friendliness. When you create articles in the editor, whether you use a rich text editor to set H1, H2, H3, etc., titles, or write with a Markdown editor with#,##,###The marked level title, AnQiCMS will intelligently parse these structures.

The system will not simply view the content as a large block of text, but can recognize the hierarchy and logic within it.This intelligent recognition capability is the basis for generating the table of contents on the article detail page.AnQiCMS will handle the article content internally, extract all title information, and organize them into a structured data list for template calls.

ByContentTitlesTag to get directory data

We need to display the table of contents on the article detail page, usually in the corresponding template file (usuallyarchive/detail.htmlOr customize the article detail template) Use the template tags provided by AnQiCMS to obtain these structured data. The key point lies inarchiveDetailThe tag and its special field:ContentTitles.

ContentTitlesThe field is used to return a list of all identified titles in the article content. It is not a direct HTML structure, but an array of objects that represent each title and provide the following information:

• Title: The text content of the title.
• Tag: The HTML tag of the title (e.g.,h1,h2,h3), helps us determine the level of the title.
• Level: The numeric level of the title (e.g., H1 corresponds1, H2 corresponds to2)，This is very useful for the indentation and style control of the catalog.
• Prefix: Numbers or symbols that may exist before the title (if generated by the editor).

With these data, we can flexibly construct the article directory.

Build the directory display step by step

Next, let's take a look at how to useContentTitlesGenerate an interactive directory in practice.

1. Locate the template file.

Firstly, you need to log in to the AnQiCMS backend, find the currently used template in the "Template Design" section, and locate the template file responsible for displaying the article detail page. According to the template design specifications, it is usuallytemplate/您的模板目录/{模型table}/detail.htmlOr in the specific file specified in the custom template settings.

2. Get directory data

In the appropriate position in the template file (for example, the article content sidebar or above the article content), usearchiveDetailtag to obtainContentTitlesdata. It is recommended to useifThe tag is used to judge, ensuring that the catalog is only displayed when the article content contains a title.

{%- archiveDetail contentTitles with name="ContentTitles" %}
{% if contentTitles %}
    <div class="article-outline">
        <h3>文章目录</h3>
        <ul>
        {% for item in contentTitles %}
            {# 生成唯一的锚点ID，通常基于标题内容进行简化，这里仅作简单示例 #}
            {% set anchorId = 'heading-' ~ forloop.Counter ~ '-' ~ item.Title|replace(" ", "-")|lower %}
            <li style="margin-left: {{ (item.Level - 1) * 20 }}px;">
                <a href="#{{ anchorId }}">{{ item.Prefix }}{{ item.Title }}</a>
            </li>
        {% endfor %}
        </ul>
    </div>
{% endif %}

In this code block:

• We first pass through{%- archiveDetail contentTitles with name="ContentTitles" %}The catalog data has been obtained and assigned tocontentTitlesVariable.
• {% if contentTitles %}Ensure that the directory structure is rendered only when the article has a title.
• {% for item in contentTitles %}Loop through each title.
• {% set anchorId = 'heading-' ~ forloop.Counter ~ '-' ~ item.Title|replace(" ", "-")|lower %}This line of code attempts to generate a unique ID for each title. Because the AnQiCMS filter does not have a directslugifyfunction, here we useforloop.CounterEnsure uniqueness and usereplaceEasily replace spaces with hyphens and convert to lowercase as a basic anchor ID generation example.In practice, you may need more robust JavaScript code to generate the HTML title ID and maintain consistency with the directory links.
• margin-left: {{ (item.Level - 1) * 20 }}px;Smartly utilizeitem.LevelTo achieve hierarchical indentation of the catalog, for example, H2 titles will be indented 20 pixels more than H1 titles.
• <a href="#{{ anchorId }}">{{ item.Prefix }}{{ item.Title }}</a>Created a catalog item, linking to the anchor point corresponding to the title in the article content.

3. Ensure that the article content title has the corresponding anchor ID.

To ensure that the links in the above directory can be correctly navigated, the actual HTML in the article content