As an experienced website operation expert, I am well aware of the importance of content organization and user experience in today's digital world.How to present a massive amount of content in the most user-friendly manner in a highly efficient and feature-rich system like AnQiCMS, while also considering search engine optimization, is a topic we need to constantly think about and practice.tagDataListlabel combined withpaginationLabel, generate precise and smooth pagination for document lists under the specified Tag.
The AutoCMS is a high-performance architecture based on the Go language, with a flexible content model and excellent SEO tools, making it 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 finely through powerful Tag features.
Understand the Tag tag function of the Anqi CMS.
In the AnQi CMS, Tag is not just a simple keyword, it is also a powerful way to organize content.By adding tags to the document, we can gather related content scattered across different categories into a 'micro thematic page' centered around a specific topic.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.The user can quickly find all documents associated with a tag while browsing a tag page, greatly improving the efficiency of content discovery and the user's browsing experience.
The 'Anqi CMS' provides independent page templates for labels, usually locatedtag/list.htmlortag_list.htmlThese pages are exactly the 'stage' where we display document lists under specific Tag.
Core Function:tagDataListThe charm of tags
To display documents on these tabs,tagDataListTags are our core tool.It is self-explanatory, it is specifically used to obtain the list of document data associated with a certain Tag.It can intelligently retrieve all articles or products containing the specified Tag ID.
UsetagDataListWhen labeling, we usually pay attention to the following important parameters:
tagIdThis is the key parameter that specifies which Tag we want to get the document list under.If you are currently on a Tag detail page, Safe CMS will automatically and intelligently identify and use the Tag ID of the current page, and you do not even need to specify it explicitly.moduleIdIf you want to display only specific content models (such as article models or product models) under the document, you can filter them through this parameter.order：Document sorting method. You can display content according to publish time (id desc), and page views (views desc) or custom sorting in the background (sort desc) to meet different content strategies.limit：Control the number of documents returned by each 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 set the value of thetypeparameter settings"page"whentagDataListWill no longer return just a fixed number of lists, but will provide complete page numbers and pagination data for subsequent items.paginationTags are ready with complete page numbers and pagination data.
tagDataListLabels will store the list of retrieved documents in a traversable variable, for examplearchives. In the template, we can iterate overarchivesto get each document'sId/Title/Link/Description/CreatedTimeDetails, and display as needed.
The magic of pagination:paginationtags
When the number of documents under a Tag reaches dozens or even hundreds, loading them all at once not only affects the page performance but also makes users feel overloaded.paginationThe label exerts its magical effect. It can generate a complete pagination navigation that includes home page, previous page, specific page number, next page, and last page based on the provided data.tagDataListAutomatically generate a complete pagination navigation that includes home page, previous page, specific page number, next page, and last page based on the provided data.
paginationThe commonly used parameters of the label are:
show: Used to control how many specific page number links are displayed in the pagination navigation. For example:show="5"It will display the page numbers up to 5 before and after the current page.
paginationThe tag will create a namedpagesThe object (of course, you can also customize its variable name), this object contains all the information needed for pagination:
TotalItems: The total number of documents.TotalPages: Total number of pages.CurrentPage: The current page number of the user.FirstPage/LastPage/PrevPage/NextPageThese are page objects, which provide corresponding links (Link) and display names (Name), allowing us to easily build navigation.PagesThis is an array that contains all the page link numbers that need to be displayed.By traversing this array, we can dynamically generate the middle page navigation.Name：(page number),Link(Page link), andIsCurrent) (whether it is the current page, used for style highlighting).
Practice Session:tagDataListWithpaginationThe perfect combination
Now, let's look at a specific template code example, and seetagDataListandpaginationhow it works together. This code is usually placed in yourtag/list.htmlortag_list.htmltemplate file.
We want to display a list of articles under a label, with 10 articles per page, and provide a pagination navigation with up to 5 page numbers:
Firstly, get the document list under the specified Tag.In the Tag detail page, tagId is usually automatically recognized 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.
<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>