As an experienced website operation expert, I know that the essence of content operation lies in how to efficiently organize information and present it to readers in the most intuitive and practical way.In a powerful and SEO-friendly content management system like AnQiCMS, fully utilizing its template tag system can greatly enhance the user experience and search engine performance of the website.Today, let's delve into a very practical scenario in content operation: how to call the list of all related Tags associated with the current document on the document detail page.

Unlock Content Association: Full攻略for Tag List of AnQi CMS Document Details Page

In the era where content is king, users often hope to quickly find more content related to the current topic.And the tag (Tag) is the key tool for realizing this content association and in-depth mining.Safe CMS understands this, its built-in Tag function is not only powerful and easy to use, but also seamlessly integrated with the template engine, allowing content operators to easily display these valuable information on the front-end page.

Understand the Tag System of AnQi CMS

Firstly, let's briefly review how the Tag function works in the AnQi CMS. Whether it's articles (archive), or products (product）等内容模型，都支持为每篇文档添加一个或多个标签。These tags can be user-defined keywords or standardized terms selected from the keyword library.These tags enable documents to be categorized with multi-dimensional themes, greatly enriching the organization of content.

The existence of tags not only helps users quickly filter and discover content of interest through keywords, but also has an indispensable value for the website's SEO.It adds internal links to the page, enhancing the relevance of keywords, which helps search engines better understand the page's topic and may lead to higher rankings and traffic.

Core Function:tagListThe charm of tags

To call all associated tags of the current document on the document detail page, Anqi CMS provides a very intuitive and powerful template tag——tagListThis tag is designed to retrieve the document's tag list, and it can intelligently recognize the context of the current page and return all the tag data associated with the document.

tagListThe general usage of the label is{% tagList 变量名 with 参数 %}.变量名is the custom name we use to receive the label list, while参数is used to specify the query conditions. For our current needs, the most critical parameter isitemId.

It is worth mentioning that when you are on the document detail page (for example,{模型table}/detail.htmlsuch template files are usedtagListeven if you do not explicitly specifyitemIdParameter, the system will also 'intelligently' default read the ID of the current document. This means that you do not need to write extra code to get the ID of the current document,tagListIt will be processed automatically for you. It will return an array of tag objects, each containing theTitle(Label Name),Linketc. practical information.

Practice exercise: Insert Tag list in document detail template

Now, let's put the theory into practice and see how to elegantly display these related tags in the document detail template of the Anqi CMS. Assume we are editing a namedarchive/detail.htmlThe document detail page template, you can insert the following code at an appropriate location below the article content or in the sidebar:

{% comment %} 确保在当前文档详情页面的相应位置，例如文章内容下方或侧边栏 {% endcomment %}
<div class="document-tags-section">
    <strong>相关标签：</strong>
    <div class="tags-list">
        {% tagList currentDocumentTags %} {# 无需指定itemId，系统会自动获取当前文档ID #}
            {% for tagItem in currentDocumentTags %}
                <a href="{{ tagItem.Link }}" class="anqicms-tag-item" title="查看更多关于 {{ tagItem.Title }} 的内容">{{ tagItem.Title }}</a>
            {% empty %}
                <span class="no-tags-found">当前文档暂无标签。</span>
            {% endfor %}
        {% endtagList %}
    </div>
</div>

Let's analyze this code in detail:

  1. {% tagList currentDocumentTags %}：This is a calltagListThe core of the label. We will assign the list of labels obtained to a variable namedcurrentDocumentTags. As mentioned before, we do not need to add any labels in the document detail page.itemIdSpecify any value, and AutoCMS will default to recognizing and obtaining the tags associated with the current document.
  2. {% for tagItem in currentDocumentTags %}Due tocurrentDocumentTagsis an array of tag objects, and we need to useforIterate through and display each label one by one.
  3. <a href="{{ tagItem.Link }}" ...>{{ tagItem.Title }}</a>: A hyperlink is created inside the loop.<a>Label.{{ tagItem.Link }}The tag will dynamically insert the link to the corresponding archive page (usually displaying a list of all documents containing the tag), while{{ tagItem.Title }}it will display the name of the tag. We also addedclassProperty facilitates style control, as well astitleProperty enhances user experience.
  4. {% empty %}This is a very thoughtful design, coming from the syntax of Django template engine. If the current document is not associated with any tags,forthe loop will not be executed, and it will be displayed directly.{% empty %}Label content inside, i.e.,

With these concise lines of code, your document detail page will immediately have a dynamic display function for related tags, providing users with a better path for content discovery.

The benefits of doing so

Displaying related tags on the document detail page brings multiple benefits:

  • Enhance content relevance:Users can easily click on tags to discover more documents with the same theme or related keywords, extending their stay on the website and forming an organic connection between content.
  • Optimize Search Engine (SEO) Effectiveness:Each tag link constitutes an internal link, which helps search engine spiders better crawl and index website content.At the same time, the label name as a keyword in the natural presentation on the page also helps to improve the ranking of the page under related search terms.
  • Improved user experience:A clear list of labels provides users with convenient content navigation.When a user is interested in a topic, they can directly access all relevant information through a tag, greatly enhancing the efficiency and satisfaction of content discovery.

Tips

In practical application, in order to achieve **effect, there are several suggestions worth your attention:

  1. Label Management:Ensure the backend tag library is clean, accurate, and valuable. Avoid creating too many redundant or ambiguous tags. High-quality tags are the foundation for improving user experience and SEO.
  2. [en] Style beautification:It is not enough to simply call out the tags; we also need to beautify the tag list through CSS to make it consistent with the overall style of the website and to ensure good clickability, such as adding borders, background colors, hover effects, etc.
  3. Label count:Although it is possible to associate multiple tags, it is recommended to control the number of tags for each document appropriately based on content length and thematic concentration, to avoid dispersing user attention due to too many tags or creating a negative impression of 'keyword stacking'.

Using the security CMS,tagListtags, you can not only make the document content more rich and interconnected, but also take a solid step in user experience and search engine optimization.

Common Questions (FAQ)

Q1：如果我的文档没有关联任何标签，页面会显示什么？A1：在上面的代码示例中，我们使用了English{% empty %}