In content operation, tags (Tag) are an extremely important tool that can help us effectively organize content, improve the quality of internal links on the website, and ultimately improve the user's browsing experience and the efficiency of search engine crawling.By tagging articles, products, or other content with relevant tags, we can associate content with the same theme scattered across different categories, forming a tighter knowledge network.
How can we clearly display the list of documents associated with a specific tag on the Tag detail page when the user clicks on it?The Anqi CMS provides an intuitive and powerful template tag system, making this process very simple.
Build the foundation of the Tag detail page.
Firstly, we need to clarify that the Tag detail page is usually located at a specific position in the website template. According to the template design conventions of Anqi CMS, the template file of the Tag detail page is usually namedtag/list.htmlortag/index.html. When you visit a Tag detail page, the system automatically identifies the Tag information on the current page, which provides convenience for us to call related content later.
Get the detailed information of the Tag (optional but recommended)
Although our core goal is to display the document list, but on the Tag detail page, we often also need to display the current Tag's name, description, and other information, which helps users understand the theme of the page they are browsing. We can usetagDetailLabel to retrieve this information.
For example, to display the current Tag's title and description at the top of the page, you can write the template code as follows:
{% tagDetail currentTag with name="Title" %}
<h1>{{ currentTag }}</h1>
{% tagDetail tagDescription with name="Description" %}
{% if tagDescription %}
<p>{{ tagDescription }}</p>
{% endif %}
Here, tagDetailThe tag automatically identifies the Tag ID of the current page and retrieves its corresponding title and description. This makes the page content more rich and user-friendly.
Core operation: Get the document list under the Tag
To get and display all relevant documents under the current Tag, we mainly usetagDataListThe tag is specifically designed to call the associated document list in the Tag context.
UsetagDataListThe tag is very direct. You can introduce it like this in the Tag detail page template:
{% tagDataList archives with type="page" limit="10" %}
{# 在这里循环显示文档列表 #}
{% endtagDataList %}
Let's go into detail about the parameters of this tag:
archives: This is a custom variable name, you can name it according to your habits, it will carry the document data associated with the tag. In{% for ... %}In the loop, you will access each document object through this variable.type="page"This parameter is crucial, it tells AnQi CMS that we need a document list that supports pagination.If the number of documents under your tag is large, pagination can significantly improve page loading speed and user experience.type="list".limit="10": This parameter defines the number of documents displayed per page or per call. You can adjust this number according to your design requirements.tagId: If you need to call the document list of a specific Tag on a non-Tag detail page (such as the homepage or category page), you can do so bytagId="X"Specify with the ID of Tag X. But on the Tag detail page,tagDataListit will intelligently automatically obtain the Tag ID of the current page, so it is usually not necessary to specify manually.moduleId: If you only want to retrieve documents under a specific content model (such as “Article” or “Product”), you can specifymoduleId="1"(Assuming 1 is the Article model ID).order: You can also useorder="id desc"(Published most recently) ororder="views desc"Sorted the document list by the most views in the following ways.
Circularly display document data
Once throughtagDataListTags get the document collection, we can then useforto loop througharchivesvariable, display the detailed information of each document one by one. Inside the loop, eachitemDocument objects are represented, you can access various properties of it, such as title, link, abstract, publication time, thumbnail, etc.
<ul class="tag-document-list">
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<div class="meta">
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量: {{ item.Views }}</span>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="thumbnail">
{% endif %}
</div>
</li>
{% empty %}
<li>当前标签下暂无相关文档。</li>
{% endfor %}
</ul>
We used herestampToDateA filter to format timestamps into readable dates.{% empty %}A block is a very useful feature that willarchivesDisplay specified content when the list is empty, to avoid a blank page.
Implement pagination functionality
For tags with a large number of documents, pagination is essential. When youtagDataListsettype="page"after, we can combinepaginationtags to generate pagination navigation.
IntagDataListlabel's{% endtagDataList %}then, immediately add the pagination code:
{# ... 上面的 tagDataList 和文档列表循环 ... #}
<div class="pagination-area">
{% pagination pages with show="5" %}
<nav aria-label="Page navigation">
<ul class="pagination">
{# 首页 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{# 上一页 #}
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
</li>
{% endif %}
{# 中间页码 #}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
</li>
{% endfor %}
{# 下一页 #}
{% if pages.NextPage %}
<li class="page-item">
<a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
</li>
{% endif %}
{# 末页 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>
</ul>
</nav>
{% endpagination %}
</div>
HerepagesThe variable contains all pagination-related data, such as the current page number, total number of pages, home link, previous/next page links, and the list of middle page numbers.show="5"Parameters controlled the maximum number of middle page numbers displayed. You can adjust the layout and style as needed.
Integration and optimization
Through combiningtagDetail/tagDataListandpaginationTags, we can build a functional and content-rich Tag detail page. Don't forget in the page's<head>section, usingtdkLabel the Tag detail page with appropriate SEO titles, keywords, and descriptions, which are crucial for search engine inclusion and ranking.
<head>
<title>{% tdk with name="Title" siteName=true sep=" - " %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{# 其他head内容 #}
</head>
Make good use of the tag function, which not only helps organize your website content neatly, but also provides users with an efficient and convenient browsing path, while also enhancing the overall SEO performance of the website.The Anqi CMS template tag system was born for this, giving content operators the ability to flexibly control the display of website content without delving into code.
Frequently Asked Questions (FAQ)
1. I call on the Tag detail page.tagDataListWhy did no documents appear?
There may be several reasons for this situation.First, please check if your website has assigned the corresponding Tag to the document.Enter the document editing interface and ensure that the "Tag label" field is filled in and correctly associated with the Tag on the current Tag detail page.tagDataListlabel'slimitThe parameter was not set small enough, resulting in no content being displayed. Finally, if you specifymoduleIdOr other filtering conditions, please confirm that these conditions are correct and not accidentally filtering out all documents. Use{% empty %}Labels can be used to handle cases where there is no content displayed, providing users with a friendly prompt.
2. How to customize the pseudo-static rules for the URL of the Tag detail page?
AnQi CMS allows you to customize the URL structure through the "pseudo-static rules" feature in the background. For Tag detail pages, there will usually be something similar/tag/{id}or/tags/{name}The structure. You can choose built-in pseudo-static rules in the background or find corresponding rule items to edit in the \tagortagIndexthe rule item to be edited. For example, to changetagIndex===/tags(-{page})ortag===/tag-{id}(-{page})Modify the format to better meet your needs. After modification, please make sure to update the cache and check if the new URL is working.
3. In addition to displaying the document list, what information related to Tag can I display on the Tag detail page?
In addition to the document list, you can also usetagDetailLabel to get more details about the current Tag. For example,{% tagDetail tagLogo with name="Logo" %}You can get the Logo image of the Tag,{% tagDetail tagContent with name="Content" %}You can get the custom content of the Tag.This information can be used to enrich the visual presentation and information volume of the Tag detail page, making it more than just a list of documents, but also an independent and valuable special topic page.