In daily content creation and website operation, we often encounter long articles with a large amount of information.This kind of article is rich in content, but without a clear navigation structure, readers are easily lost in the ocean of words and find it difficult to quickly locate the parts they are interested in.This not only affects the reading experience, but may also reduce the effective communication of the content.Our company is well-versed in this matter and provided us withContentTitlesLabel, specifically used to intelligently generate and display the table of contents of an article on the article detail page, greatly enhancing the user's reading experience.

ContentTitlesLabel: The intelligent choice for content structuring

Of Security CMSContentTitlesLabels are a very practical feature, locatedarchiveDetailIn the document detail tag. As the name implies, the purpose of this tag is to automatically extract and organize all the title level information in the article content, such as H1, H2, H3, etc., and provide it to us in a structured data form.This means, no matter how complex the content of the article is, as long as you use the HTML title tags appropriately, (<h1>/<h2>/<h3>etc.),ContentTitlesIt can help you automatically organize the table of contents of an article like a diligent librarian.

This tag returns an array of data, each element of which represents a title in the article. Each title information includes several key properties:Title(Title text),Tag(HTML tag of the title, such as "h1", "h2")Level(Title level depth, such as 1, 2, 3) as well asPrefixIf the title has an automatic numbering or prefix). These detailed data provide a solid foundation for us to build a beautiful and functional catalog.

How to use in the article detail pageContentTitlesBuild Directory

In the template of the article detail page (usually){模型table}/detail.htmlYou can easily call it in theContentTitlesTag to retrieve title data. The general practice is to place a table of contents in the sidebar or at the beginning of the article content.

First, we need to use the template.archiveDetailTag to retrieve 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 made some clever designs:

  • We useforLoop throughcontentTitlesarrayitem.
  • item.TitlePresented directly as a catalog item text.
  • item.Tagfor exampleh1,h2), anditem.Level(Hierarchy numbers) can help us control the visual hierarchy and indentation of directory items through CSS styles, making the directory look well-organized. For example, we can useitem.Levelto dynamically calculatemargin-leftImplement indentation effects for different levels of headings.
  • item.PrefixIt ensures that if your article title itself has a number (such as "1. Introduction", "1.1 Background"), these numbers will also be displayed correctly in the table of contents.
  • It is most important, in order for these catalog items to truly play the role of click jump, we usually need to combine the logic of front-end JavaScript or the template itself to generate a unique anchor ID for the titles in the article content, and then create links pointing to these IDs in the catalog. For example, you may need a segment of JavaScript code to traverse the H tags in the article content and add similar<h2 id="标题文本的拼音或编码">标题文本</h2>ID, then in the directory item's<a>tag, usinghref="#标题文本的拼音或编码"to match. The code above 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 garbling.

Value in practical application

ByContentTitlesA tag-generated directory, not just a feature, but also a great enhancement to user experience:

  • Enhancing user experienceThe reader can clearly see the structure of the article, quickly jump to the chapter of interest, and reduce the time spent scrolling and searching.
  • Optimize SEOA well-structured table of contents with internal links helps search engines better understand the article's theme and structure, which may have a positive impact on the inclusion and ranking of the article.
  • Increase the readability of the contentFor long texts, a table of contents is like a map, guiding readers to easily browse complex content, thereby increasing the completion rate and dwell time of the article.
  • Convenient for content operation: Operators do not need to manually maintain the directory, saving a lot of time and effort, and can allocate more energy to content creation and strategy planning.

Use tips

To make the automatically generated table of contents work at its best, when usingContentTitlestags, there are several suggestions:

  1. Use titles consistently: Ensure that the titles in the article content are (<h1>to<h6>Use logic levels, do not skip levels, as this will directly affect the accuracy and beauty of the directory.
  2. Reasonably design the styleUtilizeitem.Tagoritem.LevelIn CSS, design different styles for directory items at different levels, such as font size, color, indentation, etc., to make them more readable.
  3. Consider responsive layoutOn mobile devices, the directory may need to collapse or be presented in a more concise manner, which requires corresponding responsive handling in the frontend code.

In short, the Anqi CMS'sContentTitlesTags are a powerful and flexible tool that make the creation of article indexes unprecedentedly simple and efficient.By it, we can easily provide readers with a better reading experience, making the website content more attractive.

Frequently Asked Questions (FAQ)

  1. Question:ContentTitlesDoes the tag support displaying only specific levels of titles?Answer:ContentTitlesThe tag will return all levels of title information in the article content, includingLevelproperties. You can use them in the template'sforloop by judgingitem.LevelThe value to filter or only display the specific level headings you need. For example,{% if item.Level <= 3 %}you can only display headings H1 to H3.

  2. Ask: If the article content does not use any headings (H tags),ContentTitleswhat will the tags return?Answer: If there are no H tags in the article content,ContentTitlesThe tag 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. Ask: How to add a smooth scrolling effect to the directory item after clicking?Answer:ContentTitlesThe tag itself does not provide smooth scrolling functionality, but you can implement it on the front end by combining JavaScript. The usual practice is to place the directory item in the<a>Add a class name to the tag, for examplescroll-to-section)，then use JavaScript (such as jQuery or native JS) to listen for click events on these links, and perform a smooth scrolling animation to the corresponding ID location when clicked.