How to extract and display the list of hierarchical titles (H1-H6) in the AnQiCMS document content?

Easily navigate: How AnQiCMS intelligently extracts and displays document分级 titles (H1-H6)

As an experienced website operations expert, I am well aware of the importance of content structure for user experience and search engine optimization.When dealing with a large amount of document content, it is crucial to clearly understand and efficiently utilize the hierarchical title structure (H1-H6) within the document to enhance the value of the website content.AnQiCMS (AnQiCMS) is an efficient enterprise-level content management system that provides very intuitive and powerful functions in this aspect.Today, let's delve deeply into how AnQiCMS helps us extract and display hierarchical titles from document content.

Understand AnQiCMS content structure and Markdown

Firstly, we need to understand that AnQiCMS manages content based on its flexible content model and supports a powerful Markdown editor. This means that when we write articles, product introductions, single-page content, and so on in the background, we can directly use Markdown syntax to define the title levels, for example, using a#Represents H1,##Represents H2, etc., up to######Represents H6.

When this Markdown formatted content is saved to the "Document" (Archive) of AnQiCMS, the system will automatically parse these contents and structure them.And it is this structured processing that provides us with the convenience of extracting and utilizing hierarchical titles.

Core tool:archiveDetailwith the tag andContentTitlesfield

AnQiCMS provides a very practical template tagarchiveDetailIt allows us to get the detailed information of the current or specified document. In the data returned by this tag, there is a field specially designed for extracting hierarchical titles, that is,ContentTitles.

ContentTitlesThe field does not directly return a string, but an array object containing all the document titles. Each element of this array represents a title in the document and provides the following key information:

• Title: The text content of the title.
• Tag: The corresponding HTML tag of the title, for example.h1,h2,h3etc.
• Level: The level number of the title, for example H1 corresponds to 1, H2 corresponds to 2.
• Prefix: Prefix before the title, such as the automatically generated chapter number.

With this information, we can easily build a dynamic document catalog or sidebar navigation in the template.

For example, to display the table of contents on the sidebar of the document detail page, we can use it like thisarchiveDetailTags andContentTitlesField:

{# 首先，我们使用 archiveDetail 标签获取当前文档的所有标题信息，并将其赋值给一个名为 contentTitles 的变量 #}
{% archiveDetail contentTitles with name="ContentTitles" %}

{# 接下来，我们判断 contentTitles 变量是否包含任何标题，如果有，则开始构建目录 #}
{% if contentTitles %}
    <aside class="document-toc">
        <h3>目录</h3>
        <nav>
            <ul>
                {# 循环遍历 contentTitles 数组中的每一个标题项 #}
                {% for item in contentTitles %}
                    {# 根据标题的层级（item.Level）添加不同的 CSS 类或缩进，以便在视觉上区分标题层级 #}
                    <li class="toc-item level-{{ item.Level }}">
                        {# 标题前缀（如果有的话）和标题文本 #}
                        <a href="#{{ item.Title | urlencode }}">{{ item.Prefix }} {{ item.Title }}</a>
                    </li>
                {% endfor %}
            </ul>
        </nav>
    </aside>
{% endif %}
{# 结束 archiveDetail 标签的调用 #}
{% endarchiveDetail %}

In this code, we have cleverly useditem.Levelto add each table of contents itemlevel-Xthe CSS class, so you can control the style and indentation of different level titles through CSS, making the directory structure clear at a glance. At the same time, we also created a link to#{{ item.Title | urlencode }}The link, this usually requires cooperation with front-end JavaScript to achieve smooth scrolling to the corresponding title on the page (usually we add H tags to the document content)id="{{ item.Title | urlencode }}"Property).

Practical Application: Build Dynamic Document Index

This ability to extract hierarchical titles significantly enhances user reading experience and website content management efficiency.

1. Automatically generate page directory (Table of Contents, TOC)As shown in the above example, we can according toContentTitlesDynamically generated document internal navigation directory. Users do not need to scroll through long arguments to quickly locate the chapters of interest, greatly improving the readability and accessibility of the content.
2. Enhanced content navigationIn some long technical documents or tutorials, a clear table of contents can help users better understand the document structure and quickly navigate to relevant content, reducing the cost of searching.
3. Support SEO optimization: Structured title content is inherently search engine friendly. ThroughContentTitlesThe title data obtained can be used as a basis for generating anchor links within the page, which helps search engines better understand the structure of the page content, and may even be displayed as a "Featured Summary" or "Quick Link" in search results, improving click-through rate.

Optimization and expansion: Improve document readability

In addition to the basic directory construction, we can also further utilizeContentTitlesMore advanced optimization of the data provided by the field:

• Sidebar "current position" highlighted: Combine with front-end JavaScript, you can listen to user scroll events, and dynamically highlight the corresponding title in the sidebar directory when the user reads a certain chapter, providing real-time feedback to the user.
• Customization of styles for different level titles: Passitem.Tagoritem.LevelWe can apply different font sizes, colors, or icons to H1, H2, H3, and other hierarchical titles to more clearly present the logical hierarchy of the document.
• Content Analysis and Quality Inspection：Even operation personnel can preview the title structure before content is published, check if there are any problems such as chaotic, missing, or excessively long title levels, and optimize it before publishing.

In summary, AnQiCMS'sarchiveDetailLabel combinationContentTitlesThe field provides a powerful and flexible tool for content operators, allowing deep mining of the structural value of document content, not only enhancing the user reading experience but also adding to the website's SEO performance.By transforming technical information into practical content operation strategies, AnQiCMS truly empowers small and medium-sized enterprises and content operation teams, making complex content management more efficient and intelligent.

Frequently Asked Questions (FAQ)

1. If my Markdown document content is not published as "Document" (Archive) in the AnQiCMS backend, but is published directly on the server's.mdCan the file extract the title?

Answer:archiveDetailThe tag is designed to retrieve the 'Document' (Archive) content managed by AnQiCMS backend. If your Markdown file is only stored in the server file system and has not been imported or created as a specific document through the AnQiCMS backend, then the AnQiCMS template tags cannot directly parse these external.mdExtract the title from a file. In this case, you may need to go through custom development (for example, writing a Go program to parse Markdown files and store them in a database, or loading and parsing Markdown file content through JavaScript on the front end), or to these.mdImport the file into the AnQiCMS backend to use it as a 'document' and take advantage of its built-in features.

2.ContentTitlesThe extracted title list, does it support applying custom CSS styles to directory items?

Answer: Of course it does. As shown in the article example,ContentTitlesThe field provides for each title,TagandLevelInformation. You can use it according toitem.Leveloritem.Tagdynamically add different CSS classes (such asclass="toc-item level-1"or `class="toc-