How to call the list of all tags associated with the current document on the document detail page?

As an experienced website operation expert, I know the essence of content operation lies in how to organize information efficiently and present it to readers in the most intuitive and practical way.In a powerful, 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 deeply 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攻略 of AnQi CMS document detail page Tag list call

In today's content-driven era, users often hope to quickly find more content related to the current topic while browsing information.And the tag is the key tool for achieving this content association and in-depth mining.AnQi CMS is well-versed in this, its built-in Tag feature is not only powerful and easy to use but also seamlessly integrated with the template engine, allowing content operators to easily display this valuable information on the frontend page.

Understand the AnQi CMS Tag system

First, let's briefly review how tags (Tag) work in Anqi CMS. In the Anqi CMS backend, whether it's articles (archive) or products (productThe content model supports adding one or more tags to each document.These tags can be user-defined keywords or standardized terms selected from a keyword library.By these tags, the document is given a multi-dimensional thematic classification, greatly enriching the organization of the content.

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

Core function:tagListThe charm of tags

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

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

It is commendable that when you are on the document detail page (for example,{模型table}/detail.htmlusing such a template filetagListeven if it is not explicitly specifieditemIdThe parameter, the system will also "intelligently" default read the ID of the current document. This means you do not need to write additional code to get the ID of the current document,tagListIt will be automatically processed. It will return an array of label objects, each of which containsTitle(label name),Link(link to the label archive page)and other useful information.

Practice: Insert Tag List in Document Detail Template

Now, let's put theory into practice and see how we can elegantly display these associated tags in the document detail template of Anqi CMS. Suppose we are editing a document namedarchive/detail.htmlThe document detail page template, you can insert the following code in the appropriate position 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 the calltagListThe core of the tag. We will assign the tag list we get to a variable namedcurrentDocumentTagsAs mentioned before, on the document detail page, we do not need toitemIdSpecify any value, Anqi CMS will default recognize and obtain the tags associated with the current document.
2. {% for tagItem in currentDocumentTags %}: Due tocurrentDocumentTagsIt is an array of tag objects, we need to useforLoop to iterate and display each label one by one.
3. <a href="{{ tagItem.Link }}" ...>{{ tagItem.Title }}</a>: Inside the loop, we created a hyperlink.<a>.{{ tagItem.Link }}The tag archive page link corresponding to the tag will be dynamically inserted (it will usually display a list of all documents containing the tag), while{{ tagItem.Title }}the name of the tag will be displayed. We also addedclassProperties facilitate style control and as welltitleProperties enhance user experience.
4. {% empty %}This is a very considerate design, coming from the Django template engine syntax. If the current document is not associated with any tags,forthe loop will not be executed, and it will be displayed directly.{% empty %}The content inside the tag, i.e., “The current document has no tags.”, is used to avoid blank or error pages.

By this concise code, your document detail page will immediately have the function of dynamically displaying related tags, providing users with a better path for content discovery.

The benefits of doing this.

Displaying related tags on the document detail page brings multifaceted value:

• Enhance the relevance of the content:Users can easily click on tags to find more documents with the same theme or related keywords, extending the user's stay on the website and forming an organic connection between content.
• Optimize Search Engine (SEO) Effect:Each tag link constitutes an internal link, which helps search engine spiders crawl and index the website content better.At the same time, the label name as a keyword naturally appears on the page and also helps to improve the page's ranking under related search terms.
• Improve user experience:Clear label lists provide users with convenient content navigation.When a user is interested in a certain topic, they can directly access all relevant information through a tag with one click, greatly improving the efficiency and satisfaction of content discovery.

温馨提示

In practice, to achieve **effect, there are several suggestions worth noting:

1. Tag Management:Ensure that the tag library on the back end is clean, accurate, and valuable. Avoid creating too many duplicate or ambiguous tags. High-quality tags are the foundation for improving user experience and SEO.
2. Style beautification:It is not enough to just call out the tags, but also need to beautify the tag list through CSS to make it coordinate with the overall style of the website and have good clickability, such as adding borders, background colors, hover effects, etc.
3. Tag 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 users' attention or creating a negative impression of 'keyword stacking' due to too many tags.

Utilizing AnQi CMS'stagListLabel, not only can you make the document content richer and interconnected, but you can also take a solid step in user experience and search engine optimization.

Frequently Asked Questions (FAQ)

Q1: What will be displayed on the page if my document is not associated with any tags?A1: In the above code example, we used{% empty %}