As an experienced website operations expert, I am well aware of the core role that tags (Tag) play in content management and website optimization.A well-designed tag system not only enhances user experience and helps visitors quickly find the content they are interested in, but is also an indispensable part of Search Engine Optimization (SEO).AnQiCMS provides very flexible and powerful support for the Tag tag feature, making it easy for us to achieve this goal.
Today, let's delve into how to elegantly display the list of all associated documents under a Tag on the Tag detail page in AnQiCMS.This is not only a technical operation, but also a content operation strategy that can significantly improve the organization and discoverability of website content.
【en】Understanding the CMS Tag Label and its Role in AnQi CMS
In content operation, tags (Tag) are a powerful tool for connecting content, enhancing user experience, and improving SEO performance.The AnQi CMS provides a comprehensive Tag tag management mechanism with its concise and efficient architecture.Through this article, we will step by step reveal how to intelligently and comprehensively display all associated documents on the detail page of the Tag tag, thus transforming these technical advantages into real operating benefits.
【en】I. Understanding Tag Labels and Their Role in AnQi CMS
In AnQi CMS, a Tag is not just a simple keyword; it represents a dimension of content classification and aggregation.Different from the traditional classification (Category), tags are usually more flexible and refined, and a document can have multiple tags.For example, an article about the 'AnQiCMS Deployment Tutorial' can be tagged with 'Go Language', 'CMS', 'Tutorial', 'Deployment', and 'Docker' etc., allowing users to discover the content from different perspectives.
The Tag function of Anqi CMS, as its name suggests,help-content-tag.mdThe document describes, making it convenient for us to create, manage, and edit these tags.Each tag has its own name, index letter, custom URL, even SEO title and description, all of which lay a solid foundation for us to build highly optimized tag pages.
Chapter 2: Positioning the Tag Tag Detail Page Template
In the template design system of AnQi CMS, each specific type of page has its corresponding default template file. According todesign-director.mdagreement, the Tag tag detail page usually corresponds to/template/你的模板目录/tag/list.htmlor/template/你的模板目录/tag/index.htmlHere, we mainly focus ontag/list.htmlbecause it is specifically used to display the list of documents associated with Tag
To begin our operation, you need to enter the template directory of the website, find the current template folder you are using, and then locate totag/list.htmlFile. If this file does not exist, you can refer to the default template structure of Anqi CMS to manually create one. This file is the 'canvas' that we will be editing the code on.
Three, get the detailed information of the current Tag
On the Tag detail page, visitors first hope to clearly understand which Tag they are currently browsing and an overview of the content that this Tag may bring. The Anqi CMS provides a very convenient template tagtagDetail[See details]tag-tagDetail.md) Used to retrieve all information for the current Tag.
You can do this ontag/list.htmlAt the top of the template file or at any position where you want to display Tag information, usetagDetailTo get the title, description, and other core data of the current Tag, you usually use a label. Normally, when you are on the Tag detail page, you do not need to explicitly specify.tagDetailwhen you are using this.idortokenParameters, the Anqi CMS will intelligently identify the Tag ID of the current page.
Here is a simple example showing how to retrieve and display the title and description of the current Tag:
{# 获取当前Tag的详细信息 #}
{% tagDetail tagInfo %}
<header class="tag-header">
<h1>{{ tagInfo.Title }}</h1>
{% if tagInfo.Description %}
<p>{{ tagInfo.Description }}</p>
{% endif %}
</header>
{% endtagDetail %}
Here,tagInfoIt is a variable name we define, which contains various attributes of the current Tag,Title(Title) andDescription[en] Descriptions. In this way, the top of the page can clearly display the theme of the Tag, providing users with clear context.
[en] Four, call and display the associated document list
This is the core part of our operation. The Anqi CMS provides a special tag for retrieving the list of documents associated with a Tag:tagDataList[See details]tag-tagDataList.mdThis tag can intelligently retrieve all associated documents based on the current Tag page and supports pagination display.
Intag/list.htmlIn it, you will usetagDataListTag to iterate over these documents. To implement pagination of the document list, we usually control the number of documents displayed per page bytypeparameter settings"page"and is usedlimitparameters.
The following code snippet demonstrates how to display the associated document list on the Tag detail page, and show the title, link, thumbnail, publish time, and view count for each document:
{# 循环遍历关联文档列表，并支持分页 #}
{% tagDataList archives with type="page" limit="10" %}
<div class="tag-document-list">
{% for item in archives %}
<article class="document-item">
<a href="{{ item.Link }}" title="{{ item.Title }}">
{% if item.Thumb %}
<div class="document-thumb">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</div>
{% endif %}
<h2 class="document-title">{{ item.Title }}</h2>
</a>
{% if item.Description %}
<p class="document-description">{{ item.Description|truncatechars:120 }}</p>
{% endif %}
<div class="document-meta">
<span>发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>阅读量: {{ item.Views }}</span>
</div>
</article>
{% empty %}
<p class="no-documents">当前Tag下暂无关联文档。</p>
{% endfor %}
</div>
{% endtagDataList %}
In this code block:
tagDataList archives with type="page" limit="10"We declared a variable namedarchives, used to store the associated document list and enable pagination mode (type="page"), displaying 10 documents per page.{% for item in archives %}Loop through:archivesArray,itemvariable represents each document.item.Link,