How to display the directory or title structure of article content in AnQi CMS?

On content-rich websites, providing a clear table of contents or title structure for long articles not only greatly enhances the reading experience of users, but also helps search engines better understand the hierarchical structure of page content, thereby having a positive impact on SEO performance.AnQi CMS is well-versed in this and provides flexible and powerful features to easily meet this requirement.

Understanding the article content structure of Anqi CMS

In Anqi CMS, the catalog or title structure of the article content is not simply extracted from the text, but through its built-in template tagsarchiveDetailCoordinated with specific fieldsContentTitlesto achieve.ContentTitlesThe field can intelligently parse the title tags used in the article content (such as<h1>/<h2>or HTML tags, or Markdown syntax in#/##wait), and these title information are extracted to form a structured data array for the front-end template to call.

This array contains each element with the text of the title, the original HTML tag type (for exampleh1/h2), the level of the title (Level), and an optional prefix (PrefixThis means that you can not only get the title itself, but also understand its importance in the article structure, thus building a clear, multi-level article directory.

How to enable and retrieve the article title structure

Make full use ofContentTitlesFunction, it is recommended to enable the Markdown editor in the Anq CMS background under "Global Settings" -> "Content Settings". Markdown syntax defines headings in a concise and efficient manner (such as# 一级标题/## 二级标题This makes the system able to accurately parse the structure of the article's title. Of course, even if you use the HTML tag directly in the editor,<h1>to<h6>you can define the title.ContentTitlesit can still work normally.

In your article detail template file (usually{模型table}/detail.html), you can get and traverse it in the following wayContentTitlesto generate the article table of contents:

{# 假设您已在文章详情页，archive代表当前文章对象 #}
<div class="article-toc">
    <h3>文章目录</h3>
    <ul id="toc-list">
        {%- archiveDetail contentTitles with name="ContentTitles" %}
        {%- for item in contentTitles %}
            <li class="toc-level-{{ item.Level }}">
                <a href="#{{ item.Title|urlencode }}">{{ item.Prefix }} {{ item.Title }}</a>
            </li>
        {%- endfor %}
        {%- endarchiveDetail %}
    </ul>
</div>

{# 确保文章内容正确渲染，尤其是在使用Markdown时 #}
<div class="article-content">
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{ articleContent|safe }}
</div>

In the above code example,{%- archiveDetail contentTitles with name="ContentTitles" %}This line of code assigns the title structure data of the article tocontentTitlesthe variable. Subsequently, we traverse this array by{%- for item in contentTitles %}loop. Inside the loop,item.LevelIt can help you add different CSS styles for titles at different levels (such astoc-level-1/toc-level-2), so that you can visually distinguish the title levels.item.Title|urlencodeThe title text is converted to a URL-safe string, used as the anchor for directory links, so that clicking on directory items can smoothly jump to the corresponding title position in the article content.

At the same time, the display of the article content has been used{%- archiveDetail articleContent with name="Content" render=true %}and{{ articleContent|safe }}.render=trueThe parameter ensures that if the content is in Markdown format, it will be correctly converted to HTML.|safeThe filter tells the template engine that this content is safe HTML, which does not require additional escaping, and this is crucial for displaying rich text content.

Style and interaction optimization

Although Anqi CMS provides data for title structure, the final presentation style and interactive effects (such as smooth scrolling, highlighting the current chapter, etc.) still need to be implemented through frontend CSS and JavaScript.You can define corresponding CSS styles for directory containers, list items, and links to keep them consistent with your website design style.<a>Add JavaScript events to the tag or use CSS supported by modern browsersscroll-behavior: smooth;Property.

In this way, AnQi CMS abstracts the complexity of content structuring, allowing content creators to focus on the content itself, while developers can flexibly design and implement personalized directory display effects, jointly providing users with an excellent reading experience.

Frequently Asked Questions (FAQ)

1. If I have not used the Markdown editor,ContentTitleswill it still work?

Yes,ContentTitlesthe field will still take effect. It can parse all standard HTML title tags in the article content (<h1>/<h2>/<h3>Wait).As long as you use these HTML title tags to divide the content structure when editing the article,ContentTitlesIt can correctly extract these title information. Enabling the Markdown editor is just to make it more convenient for content creators to input structured content.

2. How to make the generated directory scroll smoothly to the corresponding content after clicking?

Smooth scrolling is usually achieved with the cooperation of front-end code. In the directory links (<a>tags),hrefThe attribute should point to the ID of the corresponding title in the article content. For example, if the item in the table of contents is "Chapter 1", the link may be<a href="#chapter1">第一章</a>. Then, in the article content, the title of "Chapter 1" should have aid="chapter1"property. On this basis, you can add with CSShtml { scroll-behavior: smooth; }To implement global smooth scrolling. If you need more complex interactions or compatibility, you can use JavaScript libraries (such as jQuery's.animate()Method) or native JavaScript'selement.scrollIntoView({ behavior: 'smooth' })Method.

3.ContentTitlesCan I get the title of all content, including non-article types?

ContentTitlesField isarchiveDetailA tag attribute used to retrieve detailed data of the 'Document' type (including articles, products, and custom models under the Document type)Therefore, it mainly targets structured documents published through content management.pageDetailWhether it also provides a similar field or directly parses itContentField to extract the title. Usually,ContentTitlesIt is designed for content such as 'articles' with more levels.