As an experienced website operations expert, I am well aware of the importance of content organization and user experience in today's digital world.In an efficient and feature-rich system like AnQiCMS, how to present a vast amount of content to users in the most user-friendly way while also considering search engine optimization is a topic we need to continuously think about and practice.Today, let's delve into a practical and powerful combination in Anqi CMS: how to use it cleverlytagDataListLabel collaborationpaginationThe tag, generates accurate and smooth pagination for the document list under the specified Tag.
AnQi CMS, with its high-performance architecture based on the Go language, flexible content model, and excellent SEO tools, has become the preferred choice for many enterprises and content operation teams.It not only provides core content types such as articles and products, but also helps us classify and associate content more granularly through powerful Tag features.
Understand the Tag tag function of Anqi CMS.
In AnQi CMS, the Tag label is not just a simple keyword, but also a powerful way of organizing content.By adding tags to the document, we can gather related content scattered across different categories into a "mini thematic page" centered around a specific theme.For example, an article about 'website performance optimization' may belong to the 'SEO skills' category, and can also be tagged with 'front-end technology', 'Go language development', and so on.Users can quickly find all documents associated with a tag while browsing a tag page, greatly enhancing the efficiency of content discovery and the user's browsing experience.
Our CMS provides an independent page template for tags, usually locatedtag/list.htmlortag_list.htmlThese pages are the stage where we display the document list under a specific Tag.
Core function:tagDataListThe charm of tags
Show documents on these tab pages,tagDataListTags are our core tool. As the name implies, it is specifically used to retrieve the document data list associated with a certain Tag.It can intelligently retrieve all articles or products containing the specified Tag ID that we specify.
UsetagDataListWhen dealing with tags, we usually pay attention to the following important parameters:
tagIdThis specifies the key parameter to retrieve the document list under which Tag we want.If you are currently on a Tag detail page, AnQi CMS will intelligently automatically identify and use the Tag ID of the current page, and you do not even need to explicitly specify it.moduleIdIf you want to display only specific content models (such as article models or product models) under the document, you can filter it through this parameter.order: The document sorting method. You can display content based on the publication time(id desc), views (views desc）or custom sorting in the background（sort desc) to meet different content strategies.limitThis controls the number of documents returned per query. This is particularly important when used with pagination tags, as it determines how many documents are displayed per page.type="page":This is the key to implementing pagination functionality!When we willtypethe parameter to"page"then,tagDataListWill no longer just return a fixed number of lists, but will prepare complete page numbers and pagination data for subsequentpaginationtags.
tagDataListThe tag will store the obtained document list in a traversable variable, for examplearchives. In the template, we can iterate througharchivesto get each document'sId/Title/Link/Description/CreatedTimeProvide detailed information and display as needed.
The magic of pagination:paginationTag
When the number of documents under a Tag reaches dozens or even hundreds, loading them all at once not only affects page performance but also makes the user feel overwhelmed. At this time,paginationLabels have played their magical role. It can generate a complete pagination navigation including home page, previous page, specific page number, next page, and last page based on the provided data.tagDataList提供的数据，自动生成一个包含首页、上一页、具体页码、下一页和末页的完整分页导航。
paginationThe common parameters of the tag are:
showIt is used to control how many specific page number links are displayed in the pagination navigation. For exampleshow="5"It will display up to 5 page numbers before and after the current page.
paginationThe tag creates a namedpagesThe object (of course, you can also define its variable name), this object contains all the information needed for pagination:
TotalItems: Total number of documents.TotalPages: Total number of pages.CurrentPage: The page number of the current user.FirstPage/LastPage/PrevPage/NextPageThese are page objects that provide corresponding links(Link) and display names(Name), allowing us to easily build navigation.PagesThis is an array that contains all the page number links that need to be displayed.By traversing this array, we can dynamically generate the middle page navigation.Each element in the array is also an object, containingName(page number),Link(Page link) andIsCurrent(Whether it is the current page, used for style highlighting).
Practical exercise:tagDataListwithpaginationThe Perfect Combination
Now, let's look at a specific template code example to seetagDataListandpaginationHow they work together. This code is usually placed in yourtag/list.htmlortag_list.htmltemplate file.
Assuming we want to display an article list under a tag, showing 10 articles per page, and providing pagination navigation with up to 5 page numbers:
`twig {# First, get the document list under the specified Tag.} On the Tag detail page, tagId is usually automatically identified and does not require explicit setting. type=“page”is key, it tells the system to prepare for pagination. limit="10" sets the number of documents displayed per page to 10.#} {% tagDataList archives with type=“page” limit=“10” order=“id desc” %}
<div class="tag-document-list">
{% for item in archives %}
<article class="document-item">
<h2><a href="{{item.Link}}">{{item.Title}}</a></h2>
<div class="meta-info">
<span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
{# 如果需要显示文档分类，可以结合 categoryDetail 标签 #}
<span>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></span>
</div>
<p>{{item.Description}}</p>
{% if item.Thumb %}
<div class="thumbnail">
<a href="{{item.Link}}"><img src="{{item.Thumb}}" alt="{{item.Title}}"></a>
</div>
{% endif %}
<a href="{{item.Link}}" class="read-more">阅读更多 »</a>
</article>
{% empty %}
{# 当Tag下没有文档时，显示此内容 #}
<p class="no-content-message">当前标签下暂无相关文档。</p>
{% endfor %}
</div>
{# 接着，使用 pagination 标签生成分页导航。
show="5" 表示最多显示5个页码链接（不含首页、尾页、上下页）。 #}
<nav class="pagination-navigation">
{% pagination pages with show="5" %}
<ul>
{# 首页链接 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
</li>
{# 上一页链接，仅在存在时显示 #}
{% if pages.PrevPage %}
<li class="page-item">
<a 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 href="{{pageItem.Link}}">{{pageItem.Name}}</a>
</li>
{% endfor %}
{# 下一页链接，仅在存在时显示 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>