In the daily operation of websites, we often encounter long content, such as tutorials, product descriptions, or in-depth analysis articles.This is particularly important to add a clear table of contents to the article (usually located in the sidebar or at the top of the article).It can not only help visitors quickly understand the structure of the article, directly jump to the part of interest, but also improve the SEO performance of the page, and enhance the user experience.In AnQiCMS, implementing this feature is actually simpler than you imagine, thanks to a very practical template tag provided by the system.

Reveal the core features:ContentTitlesThe magic use of tags

The Anqi CMS considers content display very thoroughly, providing a namedContentTitlesEnglish field.This field is not used to display article content, but is specifically designed to extract all title levels (H1 to H6) from the article content and provide it to us in a structured data format, which is very suitable for dynamically generating article navigation menus.

When we usearchiveDetailtag to get the details of the article by specifyingname="ContentTitles"The system will intelligently parse the article content, packaging all recognized titles (including title text, HTML tags, hierarchy, and possible prefix numbers) into an array for us to call in the template.

Specific implementation steps

To make use ofContentTitlesLabel building directory navigation, it can usually be divided into the following steps:

Step 1: Ensure that the article content has a clear title structure

When editing article content in the Anqi CMS backend, whether using the rich text editor to set H1-H6 titles (for example, through the "Set Title/Text" feature), or writing content using Markdown editor and using#/##Equation symbols define titles, the system will automatically recognize and save the structural information of these titles. This isContentTitlesThe basic condition for the label to work normally. Please ensure that your article content has been organized according to the HTML title specification (H1-H6).

Step 2: Call in the templateContentTitlesGet the list of titles

Then, in the template file of the article detail page (usually{模型table}/detail.htmlIn the document template you customized), we need to find the appropriate place to insert the table of contents navigation. For example, you may want it to be displayed in the sidebar or at the top of the main text of the article.

In the template, we can call it like thisContentTitlesFields:

{% archiveDetail contentTitles with name="ContentTitles" %}
    {# 此处将接收到一个名为 `contentTitles` 的数组变量 #}
    {# 接下来我们将遍历这个数组来构建目录 #}
{% endarchiveDetail %}

Here, we usearchiveDetailThe tag has obtained the current article'sContentTitlesdata, and has assigned it to a variable namedcontentTitlesthiscontentTitleswhich now contains all the detailed information of the article titles.

Step 3: Traverse and build the directory navigation

After obtaining the title data, we just need toforloop to build the directory navigation.contentTitlesEach element in the array is an object that contains the following useful properties:

  • Title: The actual text content of the title.
  • Tag: Title's HTML tag, such as 'H1', 'H2', etc.
  • Level: Title's level, number 1 represents H1, 2 represents H2, and so on.
  • Prefix: If the title has an automatic numbering, this will include a prefix (for example, “1.1”).

Using these properties, we can create a structured list:

{% archiveDetail contentTitles with name="ContentTitles" %}
    {% if contentTitles %} {# 检查是否有标题，避免空目录 #}
        <div class="article-toc">
            <h4>文章目录</h4>
            <ul class="toc-list">
                {% for item in contentTitles %}
                    <li class="toc-item toc-level-{{ item.Level }}">
                        <a href="#{{ item.Title|urlencode|lower|replace:"%20","-" }}" title="{{ item.Title }}">
                            {% if item.Prefix %}{{ item.Prefix }} {% endif %}{{ item.Title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endarchiveDetail %}

In the above example, we created a simple unordered list as a directory.toc-level-{{ item.Level }}Such CSS class names, you can easily add different indentation styles to different levels of headings, making the directory structure clear at a glance. At the same time, we have generated ahrefProperties, through settingitem.TitlePerform URL encoding, convert to lowercase, and replace spaces with dashes to create a simple anchor link.

Optimization and Advanced

To make your directory navigation function more perfect, there are still some optimization suggestions that can be considered:

  1. Implement clickable anchor links：Just generating a directory list is not enough. After clicking on a directory item, the page should smoothly scroll to the corresponding title position. This requires adding a unique<h2>/<h3>etc.") on the actual title elements in the article.idattribute, and thisidTo be displayed in the directory navigation<a>TagshrefProperty matches. You can add an ID to the title dynamically using front-end JavaScript when the page loads, or generate it in a similar way when rendering content on the backenditem.Title|urlencode|lower|replace:"%20","-"style.id.
  2. English styled directory: Utilizingitem.LevelThe property allows you to flexibly add CSS styles to different levels of directory items, for example, by increasing the left margin to simulate a tree structure, enhancing the readability and aesthetics of the directory.
  3. Conditionally Display DirectoryIf the article content is short, or the number of titles is not many, it may not be necessary to display the directory. You can use it in the template.{% if contentTitles|length > 某个数量 %}To determine the number of titles, the table of contents is only displayed when there are enough titles.

Through the above steps and optimization, you can easily generate a fully functional and aesthetically pleasing directory navigation for article content in the Aanqi CMS, significantly enhancing the user experience and content value of the website.

Common Questions (FAQ)

  1. 问：Why is there no content displayed in my article's navigation menu?答：Firstly, please check if your article content includes H1 to H6 title tags. If your article does not use any titles,ContentTitlesThe label cannot extract data naturally. Next, confirm that you have used it correctly in the template file.archiveDetail contentTitles with name="ContentTitles"The label, and iterate overcontentTitlesThe code of the variable is also correct. Sometimes, cache issues may also cause content to not be updated in time, and you can try to clear the system cache.

  2. 问：How can I make the directory item click cause the page to scroll to the corresponding title instead of just jumping to the top of the page?答：This requires setting the actual title element in the article content (for example,<h2>我是标题</h2>Add a uniqueidproperty. You can use the IDhrefthat matches the propertyid="我是标题"<a>label to point tohref="#对应的ID"a specific title within the page.

  3. Q:ContentTitlesWhat levels of titles will the label get?Answer:ContentTitlesTags are very intelligent, it will automatically identify and return all HTML standard title levels in the article content, that is, all titles from H1 to H6.item.LevelIn the properties, you will see the corresponding number level, for example, H1 corresponds to 1, H2 corresponds to 2, and so on.