How to retrieve and loop to display the title of single-page content (`ContentTitles`) through template tags?

As an experienced security CMS website operator, I am well aware of the importance of content organization and user experience in attracting and retaining users.When dealing with long articles or complex content, it is crucial to clearly present the structure of the content, such as through a dynamically generated table of contents, which is essential for improving user reading efficiency and the SEO performance of the website.The Anqi CMS provides very convenient template tags to help us achieve this goal.

How to use template tags to loop through a list of article content titles (ContentTitles) in AnQi CMS

In Anqi CMS, the article content title list (ContentTitles) is a very practical feature, it allows us to automatically extract the article content (ContentField) of various levels of headings (usually H1-H6 tags), and organize them into a structured array for template iteration.This is of great value for automatically generating article contents, content summaries, or optimizing in-page navigation.

To get and loop displayContentTitlesWe mainly rely onarchiveDetailTemplate tags. This tag is usually used to get the details of the current article or a specified article, andContentTitleswhich is a special field in the returned data.

Firstly, we need to use in the article detail page templatearchiveDetailtags to retrieveContentTitlesfield. This tag can specify a variable name to carry the obtained data, for example, we can name itcontentTitles.

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

In this code block,with name="ContentTitles"This clearly indicates that we want to extract the title list data from the current article details. If you need to retrieve the title list of a specific ID article, you can addid="文章ID"Parameter.

OncecontentTitlesA variable has been successfully assigned, it will contain an array. Each element of this array represents a title in the article, and each element is an object containing the following useful properties:

• Title: The text content of the title.
• Tag: The HTML tag used for the title (e.g., "H1", "H2", "H3", etc.).
• LevelTitle Level (number, H1 is usually 1, H2 is 2, and so on).
• PrefixPrefix that the system may automatically generate for the title, such as numbering.

In order to display these titles, we can usefora loop tag to traversecontentTitlesan array. Inside the loop, we can useTitle/Tag/LevelandPrefixBuild the display effect we want using properties, such as generating a hierarchical directory.

The following is a detailed code example showing how toContentTitlesAnd loop to display:

<div class="article-toc">
    <h3>文章目录</h3>
    {% archiveDetail contentTitles with name="ContentTitles" %}
        {% if contentTitles %} {# 检查是否有标题存在 #}
            <ul class="toc-list">
            {% for item in contentTitles %}
                {# 根据标题层级添加不同的类或样式 #}
                <li class="toc-item toc-level-{{ item.Level }}">
                    <a href="#{{ item.Title|urlencode }}"> {# 生成锚点链接，这里需要对标题进行url编码 #}
                        <span class="toc-prefix">{{ item.Prefix }}</span>
                        <span class="toc-title">{{ item.Title }}</span>
                    </a>
                </li>
            {% endfor %}
            </ul>
        {% else %}
            <p>本文暂无目录</p>
        {% endif %}
    {% endarchiveDetail %}
</div>

In this example, we first use{% archiveDetail contentTitles with name="ContentTitles" %}Assign the list of article titles to acontentTitlesvariable. Then, by{% for item in contentTitles %}looping through this array. In each loop,itemthe variable represents a title object, and we can access it byitem.Title/item.LevelWait to access its properties. We can even useitem.Levelto dynamically adjust the style of directory items, for example by addingtoc-level-{{ item.Level }}Such CSS classes are used to represent different levels, thereby building a clear and readable article directory.

In this way, the content operators of Anqi CMS can very flexibly control the display structure of article content, which not only improves the reading experience of users in long articles, but also helps search engines better understand the structure of page content, thereby potentially improving the SEO performance of the website.

Frequently Asked Questions (FAQ)

Q1:ContentTitlesHow to extract the title from the article content?A1:ContentTitlesTags will automatically parse the HTML structure of the article text (Contentfield) to identify standard HTML title tags (such as<h1>/<h2>/<h3>/<h4>/<h5>/<h6>）。The system will build based on the text content, tag type, and hierarchy of these tags.ContentTitlesarray. Therefore, make sure that the content of your article uses the correct title tag format, isContentTitlesThe foundation for normal operation.

Q2: Can I controlContentTitlesExtract the title of a specific level, for example, only extractH2andH3?A2: According to the current template tag design,archiveDetailtags are being retrievedContentTitleswill default to extractContentAll levels of headings (H1-H6). You cannot filter specific heading levels directly throughContentTitlesthe tag's parameters. However, you can do so in the template'sforAdd a conditional judgment inside the loop ({% if item.Level == 2 or item.Level == 3 %}) to selectively display or process titles at a specific level.

Q3: If there are no title tags in the article content,ContentTitleswhat will be returned?A3: If the article content (Contentfield) does not contain any HTML title tags (<h1>to<h6>ThenContentTitlesit will return an empty array. In the template, you can use{% if contentTitles %}Such conditional judgment is used to check if the array is empty, thereby deciding whether to display the catalog or give the corresponding prompt, such as 'This article has no catalog'.