For articles that are rich in content and lengthy 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 outline of the article, but also allows them to jump to the parts they are interested in accurately, thereby improving the readability and practicality of the content.In AnQiCMS, it is not difficult to implement the content directory display on the article detail page, as the built-in functions of the system provide a simple and efficient solution.

How to understand the article structure in AnQiCMS?

AnQiCMS was designed from the beginning with flexibility in content management and SEO-friendliness in mind. When you are creating articles in the editor, whether you are setting H1, H2, H3, etc. titles using the rich text editor, or writing with a Markdown editor.#,##,###Annotated hierarchical title, AnQiCMS will intelligently parse these structures.

The system will not simply treat content as a large block of text, but will recognize the hierarchy and logic within.This intelligent recognition ability is the foundation of generating a table of contents on the article detail page.AnQiCMS internally processes article content, extracts all title information, and organizes them into a structured data list for template use.

PassContentTitlesGet directory data with tags

To display a table of contents on the article detail page, we need to add it in the corresponding template file (usuallyarchive/detail.htmlOr a custom article detail template) Use the template tags provided by AnQiCMS to obtain this structured data. The key point isarchiveDetailtags and a special field:ContentTitles.

ContentTitlesThis field is specifically used to return the list of all recognized titles in the article content. It is not a direct HTML structure, but an array of objects, each representing a title and providing the following information:

  • Title: Title text content.
  • Tag: Title's HTML tag (e.g.,)h1,h2,h3) can help us determine the title's level.
  • Level: Title's numerical level (e.g., H1 corresponds to)1，H2 corresponds to2），This is very useful for the indentation and style control of the catalog.
  • Prefix: Number or symbol that may exist before the title (if the editor generates it).

With these data, we can flexibly construct the article table of contents.

Build the table of contents step by step

Next, let's take a look at how to useContentTitlesCreate an interactive catalog actually.

1. Locate the template file.

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

2. Obtain directory data

At the appropriate position in the template file (for example, on the side of the article content or above the article content), usearchiveDetailtags to getContentTitlesdata. It is recommended to useifThe tag is used for judgment, ensuring that the table of contents 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 go through{%- archiveDetail contentTitles with name="ContentTitles" %}The table of contents data is obtained and assigned tocontentTitlesa variable.
  • {% 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. Since there is no direct filter in AnQiCMS,slugifyfunction here, we useforloop.CounterEnsure uniqueness, and usereplaceSimply replace spaces with hyphens and convert to lowercase as a basic anchor ID generation example.In practical applications, you may need more robust JavaScript code to generate the ID of the HTML title and maintain consistency with the directory links.
  • margin-left: {{ (item.Level - 1) * 20 }}px;ingeniously utilizeitem.Levelto achieve hierarchical indentation of the directory, for example, H2 titles will be indented 20 pixels more than H1 titles.
  • <a href="#{{ anchorId }}">{{ item.Prefix }}{{ item.Title }}</a>Created a directory item, linking to the anchor corresponding to the title of the article content.

3. Ensure that the article content has corresponding anchor IDs for the titles.

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