When managing content in AnQi CMS, tags (Tag) are an important tool for organizing and categorizing information.It can not only help users quickly find relevant content, but also significantly improve the internal link structure and SEO performance of the website.When it is necessary to display all relevant documents under a specific tag and manage pagination,tagDataListTags have become an indispensable core function.
This article will delve into how to efficiently utilizetagDataListTo retrieve and paginate the documents under a specific tag, thereby optimizing the content presentation and user experience of the website.
1. UnderstandingtagDataListThe role of the tag
tagDataListThe tag is a powerful and flexible component in AnQi CMS template engine, its main function is to retrieve and list all documents associated with the specified tag (Tag).These documents can be articles, products, or even other custom model content, as long as they are assigned the same tags.
The core value of this tag lies in its ability to provide highly customized content lists and support pagination, which is crucial for building tag archive pages, related content recommendation blocks, or any scenario that requires content aggregation by tag.
tagDataListThe basic usage format is as follows:{% tagDataList 变量名称 with 参数... %}
Among them,变量名称It is the name you customize for the document list you obtain, and you can traverse and display it in the template later.
2. Retrieve documents under a specific tag
To retrieve documents under a specific tag,tagDataListThe tag needs to know the identifier of the target tag, that is,tagId.
- Use on the tag detail page:If you are editing a label detail page template (usually
tag/detail.htmlortag/list.html)tagDataListthe label will automatically identify the current pagetagId, at this point you can omittagIdParameters. The system will default to retrieving all documents associated with the current tag. - Specify the tag on other pages:If you want to display documents under a specific tag on the homepage, category page, or any other page, you need to manually go through
tagId="X"parameters to explicitly specify the tag ID (whereXIs the unique identifier of the tag in the background).
excepttagId,moduleIdThe parameter is also very useful. If you want to display only the documents associated with the tag under a specific model (such as an article model or a product model), you can do so bymoduleId="1"(Article model ID is 1) ormoduleId="2"(Product model ID is 2) to further filter.
Here is a simple code example showing how to get the first 10 documents under a certain tag (without pagination):
{# 假设我们想获取ID为5的标签下的所有文章（模型ID为1） #}
{% tagDataList archives with tagId="5" moduleId="1" limit="10" order="id desc" %}
{% for item in archives %}
<div class="document-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description|truncatechars:100 }}</p>
<div class="meta">
<span>发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量：{{ item.Views }}</span>
{# 可以在此调用分类信息 #}
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
</div>
{% if item.Thumb %}
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="document-thumb">
</a>
{% endif %}
</div>
{% empty %}
<p>该标签下暂无相关文档。</p>
{% endfor %}
{% endtagDataList %}
In the above code,itemIsforThe current document object in the loop, it contains the document'sId/Title/Link/Description/CreatedTime/Views/Thumb/CategoryIdCommon fields. You can freely call these fields according to your needs to enrich the display content of the document.orderThe parameter is used to specify the sorting method of the document, for example.id descIndicates sorting by ID in reverse order (newest release),views descwhich indicates sorting by view count in reverse.
3. Implement document pagination display
To implement pagination for the tag document list, we need to adjusttagDataListtagstype="page"Parameters, and combinepaginationTags to render pagination navigation.
type="page"The parameter tellstagDataListLabel, we need a pageable dataset that will calculate the total number of pages and the data for the current page based onlimitthe parameters (how many items per page) and the current page number.
Next,paginationTags are responsible for generating various links and pagination information required for pagination navigation. It includesshowParameters can control the maximum number of pagination buttons displayed in pagination navigation.
Below is a combinationtagDataListandpaginationExample code to implement pagination:
{# 假设仍在标签详情页，tagId和moduleId可省略或根据需要指定 #}
{% tagDataList archives with type="page" limit="10" order="id desc" %}
<div class="tag-document-list">
{% for item in archives %}
<div class="document-card">
<a href="{{ item.Link }}" title="{{ item.Title }}">
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="card-thumb">
{% endif %}
<h4 class="card-title">{{ item.Title }}</h4>
<p class="card-description">{{ item.Description|truncatechars:120 }}</p>
</a>
<div class="card-meta">
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>阅读量: {{ item.Views }}</span>
</div>
</div>
{% empty %}
<p>该标签下暂无文档。</p>
{% endfor %}
</div>
{# 分页导航区域 #}
<div class="pagination-container">
{% pagination pages with show="7" %}
<ul class="pagination-list">
{# 首页链接 #}
{% if pages.FirstPage %}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}" class="page-link">{{ pages.FirstPage.Name }}</a>
</li>
{% endif %}
{# 上一页链接 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{ pages.PrevPage.Link }}" class="page-link">{{ pages.PrevPage.Name }}</a>
</li>
{% endif %}
{# 中间页码 #}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{ pageItem.Link }}" class="page-link">{{ pageItem.Name }}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{ pages.NextPage.Link }}" class="page-link">{{ pages.NextPage.Name }}</a>
</li>
{% endif %}
{# 尾页链接 #}
{% if pages.LastPage %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.LastPage.Link }}" class="page-link">{{ pages.LastPage.Name }}</a>
</li>
{% endif %}
</ul>
<div class="pagination-info">
总计 {{ pages.TotalItems }} 条文档，共 {{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。
</div>
{% endpagination %}
</div>
{% endtagDataList %}
In pagination code,pagesThe variable contains all pagination information, for examplepages.TotalItems(Total number of documents),pages.TotalPages(Total number of pages),pages.CurrentPage(current page number) etc. The most commonly used ispages.Pagesan array that contains all the page numbers to be displayedpageItemobjects, eachpageItemand bothName(page number text),Link(Page link) andIsCurrent(Whether the current page) and other properties, convenient for us to build flexible pagination navigation.
4. Practical application and optimization suggestions
- SEO Optimization:The tag archive page is an important entry for search engines to crawl and index website content. Through
tagDataListDisplay pagination content, it can ensure that each tag has rich searchable content, and in conjunction with the built-in SEO features of Anqi CMS (such as pseudo-static, TDK settings), it can significantly improve the weight and ranking of the tag page in search engines. - User Experience:Clear pagination navigation allows users to easily browse a large number of tag content without having to load all documents at once, improving page loading speed and user satisfaction.Reasonably organize label categories,配合beautiful template design, so that users can find the information they need faster.
- Content aggregation:Tags aggregate related thematic content scattered across different categories on the website, providing users with a completely new content discovery path.For example, a tag about "Go language" can aggregate all articles, tutorials, and related products related to Go language.
- Flexibility:
tagDataListSupport multiple sorting methods (by ID, view count, custom sorting, etc.), combined with richitemfields, you can display the most critical information according to your business needs.
Through proficiencytagDataListandpaginationTags, website operators can better organize and display website content, provide users with a better browsing experience, and also lay a solid foundation for search engine optimization.
Frequently Asked Questions (FAQ)
Q1:tagIdIs the parameter required? When can it be omitted?
tagIdThe parameter is not always required. When you are on the tag detail page of the Anqi CMS backend (for exampletag/list.htmlortag/detail.htmltemplate)tagDataListWhen labeling, the system will automatically identify the tag ID of the current page, at which time it can be omittedtagIdThe parameter. However, if you want to display documents under a specific tag on the homepage, category page, or any other non-tag detail page, you need to manually go throughtagId="X"(where X is the ID of the target tag) to specify the target tag explicitly.
Q2: Besides the document title and link, what other document information can I display?UsetagDataListThe list of documents obtained (archivesEach variable containsitem) Contains very rich document information. In addition to