In daily content creation and website operations, we often encounter articles that are long and contain a large amount of information.This article is rich in content, but without a clear navigation structure, readers are easily lost in the ocean of text and find it difficult to quickly locate the parts of interest.This not only affects the reading experience, but may also reduce the effective communication of content.ContentTitlesLabels, specifically used for intelligently generating and displaying the table of contents of articles on detail pages, greatly enhancing the reading experience of users.

ContentTitlesLabel: The intelligent choice for content structuring

Anqi CMS'sContentTitlesLabels are a very practical feature, located atarchiveDetailDocument details label.This tag is used to automatically extract and organize all title level information from the article content, such as H1, H2, H3, etc., and provide it to us in a structured data format.<h1>/<h2>/<h3>etc.),ContentTitlescan help you automatically organize the "table of contents" of articles like a diligent librarian.

This label returns data in an array, where each element represents a title in the article. Each title information includes several key attributes:Title(Title text),Tag(Title's HTML tag, such as "h1", "h2")Level(Title's level depth, such as 1, 2, 3) as well asPrefix(If the title has an automatic numbering or prefix). This detailed data provides a solid foundation for building a beautiful and fully functional catalog.

How to make use of the article details pageContentTitlesBuild Directory

in the article detail page template (usually{模型table}/detail.html）You can easily call it.ContentTitlesTags to get title data. The general practice is to place the directory in the sidebar of the article content area or at the beginning of the article.

Firstly, we need to use the templatearchiveDetailLabel to get the details of the current article, and extract from itContentTitlesData. You can use a variable to receive this title information, for example, we define it ascontentTitles:

{% archiveDetail contentTitles with name="ContentTitles" %}
<div class="article-toc">
    <h3>文章目录</h3>
    <ul id="articleTocList">
    {% for item in contentTitles %}
        {# 根据标题层级和标签动态生成目录项 #}
        <li class="toc-item toc-{{item.Tag}}" style="margin-left: {{ (item.Level - 1) * 20 }}px;">
            <a href="#{{ item.Title|urlencode }}" data-level="{{item.Level}}">
                {{ item.Prefix }}{{ item.Title }}
            </a>
        </li>
    {% endfor %}
    </ul>
</div>
{% endarchiveDetail %}

In the above code snippet, we have made some clever designs:

  • We useforto iteratecontentTitleseach element in the arrayitem.
  • item.TitlePresented directly as the text of the directory item.
  • item.Tag[for example]h1,h2) anditem.LevelThe number can help us control the visual hierarchy and indentation of the directory items through CSS styles, making the directory look well-structured. For example, we useitem.Levelto calculate dynamicallymargin-leftImplement indentation effects for different level headings.
  • item.PrefixThe number will be correctly displayed in the table of contents if your article title itself has a number (such as “1. Introduction”, “1.1 Background”).
  • It is most important, in order for these directory items to truly serve the purpose of click-to-jump, we usually need to combine front-end JavaScript or the logic of the template itself to generate unique anchor IDs for the titles in the article content, and then create links pointing to these IDs in the directory. For example, you may need a piece of JavaScript code to traverse the H tags in the article content and add similar<h2 id="标题文本的拼音或编码">标题文本</h2>The ID, then in the directory item,<a>tags, usinghref="#标题文本的拼音或编码"to match. The above code simply usesitem.Title|urlencodeAs an anchor, but in actual application, you may need a more robust ID generation mechanism to avoid conflicts and Chinese character encoding issues.

Value in actual application

PassContentTitlesTags automatically generated directory, not just a feature, but also a great enhancement to user experience:

  • Enhance user experienceThe reader can easily see the structure of the article, quickly jump to the chapters of interest, and reduce the time spent on scrolling and searching.
  • Optimize SEOThe directory, which is clear in structure and includes internal links, helps search engines better understand the theme and structure of the article, which may have a positive impact on the inclusion and ranking of the article.
  • Increase the readability of the contentFor long articles, the table of contents is like a map that guides readers to easily navigate complex content, thereby improving the completion rate and dwell time of the article.
  • Convenient for content operationEnglish: The operation staff does not need to manually maintain the directory, saving a lot of time and energy, which can allow more attention to be focused on content creation and strategy planning.

Using tips

To make the automatically generated directory work to its best effect, here are some suggestions for use.ContentTitlesWhen using tags, here are a few tips:

  1. Use titles consistently: Make sure the titles in the article content are (<h1>to<h6>) Use according to the logical level, do not skip levels, as this will directly affect the accuracy and aesthetics of the catalog.
  2. Reasonable design style: Utilizingitem.Tagoritem.LevelDesign different styles for directory items of different levels in CSS, such as font size, color, indentation, etc., to make it more readable.
  3. Consider responsive layoutIn mobile, the directory may need to be collapsed or presented in a more concise manner, which requires you to perform the corresponding responsive handling in the frontend code.

In short, the Anqi CMS isContentTitlesLabels are a very powerful and flexible tool, making the generation of article tables of contents simpler and more efficient than ever.Through it, we can easily provide readers with a better reading experience, making the website content more attractive.

Common Questions (FAQ)

  1. Q:ContentTitlesDoes the tag support displaying only specific level titles?Answer:ContentTitlesThe tag will return all title level information in the article content, includingLevelproperties. You can judge in theforloop.item.LevelThe value to filter or only display the specific level titles you need. For example,{% if item.Level <= 3 %}then only H1 to H3 level titles will be displayed.

  2. 问：If the article content does not use any titles (H tags),ContentTitleswhat will the tag return?答：If there are no H tags in the article content,ContentTitlesThe label will return an empty array.This means that the directory area will not display any content, or you can add a judgment to display a prompt like "No directory available" to optimize the user experience.

  3. 问：How to add a smooth scrolling effect to the corresponding title when clicking on a directory item?Answer:ContentTitles标签本身不直接提供平滑滚动功能，但您可以在前端结合JavaScript来实现。通常的做法是，在目录项的<a>Add a class name within the label (for examplescroll-to-section），then use JavaScript (such as jQuery or native JS) to listen for the click events of these links, and perform a smooth scrolling animation to the corresponding ID position when clicked.