In AnQiCMS front-end template, dynamically display the document content title: the loop and application of ContentTitles

When using AnQiCMS for website content operation, we often need to provide users with a better reading experience and navigation convenience. One very practical feature is the automatic generation of the article table of contents (Table of Contents). AnQiCMS has given this aspect a lot of consideration, as it can automatically extract the titles from the document content and present them inContentTitlesThe form provided to the front-end template. Today, let's delve into how to loop and display these in your AnQiCMS front-end template.ContentTitles.

Deep Understanding of ContentTitles: The Magic of Document Content Titles

First, let's be clearContentTitlesWhat is it.When you edit document content in the AnQiCMS background, you usually use H1, H2, H3, and other title tags to organize the article structure.ContentTitles. It is not a fixed field of the article, but is dynamically generated based on the content of the article.

This feature provides significant help in enhancing user experience and SEO:

  • Enhance user experienceReaders can easily see the overall structure of the article and quickly locate the chapters of interest.
  • Optimize SEOAn article with a clear structure and a table of contents is easier for search engines to understand, which helps to improve the ranking of the article.

ContentTitlesThe array (or list, as it is sometimes called) returned contains each element as an object with title information. Each object typically includes the following key properties:

  • TitleEnglish title actual text content.
  • TagEnglish HTML tag used for the title, for exampleh2/h3.
  • LevelEnglish level of the title, the smaller the number, the higher the level (for example,h1its Level is 1,h2The Level is 2).
  • Prefix: If the title has a prefix (such as “1.1 AnQiCMS Introduction”), it will include “1.1”.

How to get ContentTitles data source

In the AnQiCMS front-end template, to obtainContentTitlesWe need to usearchiveDetailLabel. This label is specifically used to retrieve detailed information about the current document.

If you are on a document detail page, such asdetail.htmlso thatarchiveDetailLabels will automatically retrieve the document data from the current page. We just need toname="ContentTitles"specify which document data we want to retrieve, such as the list of document titles.

For example, you can define a variable like thiscontentTitles, so that it carries all the titles extracted from the current document:

{% archiveDetail contentTitles with name="ContentTitles" %}
    {# 在这里，contentTitles 变量就已经包含了文档的标题列表 #}
    {% comment %} 后续我们将在这个标签内部，或者在其作用域内使用 contentTitles {% endcomment %}
{% endarchiveDetail %}

If you want to get a document with a specific ID:ContentTitles, you can also do so byidParameters to specify:

{% archiveDetail otherContentTitles with name="ContentTitles" id="10" %}
    {# otherContentTitles 变量将包含ID为10的文档的标题列表 #}
{% endarchiveDetail %}

Loop and display: Display the title on the page

Once we have passed througharchiveDetailThe tag was obtainedContentTitlesList, next is how to iterate over this list in the template and display it beautifully. AnQiCMS's template engine supports syntax similar to Django templates, so we can useforLoop tags to process.

通常，我们会将这些标题组织成一个文章目录。以下是一个基本的代码示例，展示了如何循环contentTitles并显示每个标题：

{% archiveDetail contentTitles with name="ContentTitles" %}
    {% if contentTitles %} {# 确保有标题才显示目录 #}
        <div class="article-toc">
            <h3>文章目录</h3>
            <ul>
                {% for item in contentTitles %}
                    {# 利用item.Level来控制缩进，这里简单地乘以一个像素值 #}
                    <li class="{{item.Tag}}" style="margin-left: {{ item.Level|add:-1|mul:20 }}px;">
                        {# 通常会为每个标题生成一个可点击的链接，并指向文章正文对应的锚点 #}
                        {# 注意：这里的锚点（#heading-{{ loop.index }}）需要在文章正文中手动添加对应ID，或通过JavaScript动态生成 #}
                        <a href="#heading-{{ loop.index }}">
                            {% if item.Prefix %}{{item.Prefix}} {% endif %}{{item.Title}}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endarchiveDetail %}

In this code block, we:

  • Use{% if contentTitles %}to determinecontentTitlesIs it empty, to avoid displaying an empty directory when there is no title.
  • Use{% for item in contentTitles %}Traverse each title object.
  • item.TagCan be used as a CSS class name, to make it easier for you to target title tags (such ash2/h3Perform different style designs.
  • item.LevelCan be used to control the indentation of directories, simulating the hierarchical structure of titles.We use the built-in filter of AnQiCMS to reduce the level by 1 (because h1 usually does not need indentation), and then multiply it by a pixel value to achieve a visual sense of hierarchy.
  • item.PrefixOptionally display the serial number before the title.
  • item.TitleIs the actual text of the title.

Please note the examples above,href="#heading-{{ loop.index }}"Part is a commonly used practice for creating internal jump links in article contents. To make these links actually work, you need to add the corresponding links to the actual title elements in the body of the article.idProperty. For example, ifloop.indexYes1, then the first title of the main text of the article (such as a<h2>tag) needs to haveid="heading-1"This usually requires you to manually add it when editing content in the background, or dynamically implement it through some frontend scripts or backend processing.

Combined with practical application: further thinking.

  1. Style and structure：You can define rich CSS styles forarticle-tocandlielements, such as setting different font sizes, colors, or using borders and background colors to beautify the directory.item.Taganditem.LevelProvided good granularity to control the display effect of different level titles.
  2. Interactive catalogThrough combining a little JavaScript, you can make the table of contents more interactive.For example, when the user scrolls the page, the current title being read in the catalog will be automatically highlighted; or when a catalog item is clicked, the page will smoothly scroll to the corresponding position.
  3. Content editing specifications: In order toContentTitlesFunction operates at its best, when editing articles in the background, please make sure to develop good habits, using appropriate HTML title tags (H1/H2/H3等）to organize the content structure, rather than merely simulating titles by bolding or changing font sizes. A standard HTML structure is correctly extracted by AnQiCMS.ContentTitles的基础。

Through these flexible tags and simple loop logic, you can easily implement a dynamic article catalog in the AnQiCMS website's front-end template, greatly enhancing the professionalism and user-friendliness of the website content.

Common Questions and Answers (FAQ)

  1. 问：Why is my article content not displaying anything even though it has used H tags?ContentTitles却不显示任何内容？

    • 答：这可能是因为你的文章内容中没有使用标准的H1toH6Labels can be used to define titles, or these title contents are very short. AnQiCMS will generate titles based on the HTML title tags identified in the backend content editor.ContentTitlesPlease check your article content, make sure the title is as HTML<h2>>/<h3>>Presented by structure rather than just style. At the same time, if the article title is extremely short or only one, the system may also consider that there is no need to generate a table of contents.

  2. Question: Can I controlContentTitlesOnly show titles of specific levels, for example, only show H2 and H3?

    • Answer: Absolutely. In the template loopcontentTitlesWhen listing, you can use the AnQiCMS template engine'sifLogical judgment tag, based onitem.Leveloritem.TagFilter properties. For example, to only display H2 and H3 titles, you can modify the code inside the loop like this:
      
{% for item in contentTitles %}
    {% if item.Level == 2 or item.Level == 3 %}
        <li class="{{item.Tag}}" style="margin-left: {{ item.Level|add:-1|mul:20 }}px;">
            <a href="#heading-{{ loop.index }}">
                {% if item.Prefix %}{{item.Prefix}} {% endif %}{{item.Title}}
            </a>
        </li>
    {% endif %}
{% endfor %}

  3. Q:ContentTitlesHow can I jump to the corresponding position of the article text after clicking on the generated directory item?

    • 答：To implement the jump to the catalog item by clicking, you need to make sure that each actual title element in the article body has a uniqueidattribute, and thisidrelated to the catalog item'shrefThe property value matches. A common practice is, in yourarchiveDetailLabel outputContentWhen content is generated, some backend processing or JavaScript is used dynamically to add IDs to the H tags in the text. For example, if your catalog item links arehref="#heading-1"Then the first title of the article's main body needs to haveid="heading-1". You can use JavaScript to traverse the H in the main body.