As an experienced website operations expert, I know how crucial it is to efficiently organize and present content for the success of a website.Tags (Tag) as a flexible content classification method not only enhance the browsing experience within the site but also play an indispensable role in search engine optimization (SEO) strategy.AnQiCMS provides a powerful content management tool with its simple and efficient architecture and rich features, allowing even a large number of documents under specified tags to be displayed neatly and elegantly paginated.
Today, let's delve into how to cleverly call all document lists under a specified Tag in Anqi CMS, and configure a perfect pagination feature for it, making your tag page both content-rich and user-friendly.
The role and management of tags in Anqi CMS
The management of tags in AnQi CMS backend is very intuitive, you can find the 'Document Tags' feature under 'Content Management' to perform add, delete, modify, and query operations on tags.Setting a reasonable name, keywords, and description for tags is the first step to improving the SEO performance of the tag page.
Core tags:tagDataListGet the document list under the specified Tag
To retrieve all documents under a specified tag, AnQi CMS provides a dedicated and efficient template tag:tagDataListThis tag can extract all documents associated with the tag based on the tag ID or the current page context.
When usingtagDataListWhen you need to specify some key parameters to precisely control the range and presentation of the documents obtained. The most core one istagIdA parameter that allows you to explicitly specify which document under which tag to call. Usually, when you are ontag/list.htmlsuch a tag list page,tagIdThe content will be automatically retrieved from the URL without manual specification. However, if it is necessary to call the document of a specific tag on another page (such as the homepage sidebar), it can be done throughtagId="1"To precisely call.
In addition,moduleIdThe parameters are very useful, if you only want to display specific content models (such as article models,moduleIdusually 1) under the document, you can addmoduleId="1"The limitation of 【en】.limitThe parameter is used to control how many documents are displayed per page, which is directly related to the implementation of pagination. The most critical is that, in order to achieve pagination, 【en】.typeThe parameter must be set to 【en】.pageThis will tell the system,tagDataListnot only to return the document list, but also to return a pagination informationpagesobject.
tagDataListwill return a namedarchivesThis array object contains the detailed information of each document. In the loop body of the template, eachitemrepresents a document, you can easily access theTitle(Title),Link(Link),Description(description),CreatedTime(Creation time) andViewsfields such as (view count). These fields are sufficient to build a rich and attractive document list item.
Improve the pagination feature:paginationtags
HencetagDataListThe data foundation for the document list and pagination required, we also need another powerful tag of the CMS -paginationto display an intuitive and feature-complete pagination navigation at the bottom of the page.
paginationLabels cleverly combinetagDataListPass the pagination information to generate a navigation area containing the first page, previous page, next page, last page, and links to the middle page numbers. You can use it in the following way:showParameters to control how many page number links are displayed at the same time in the pagination navigation, for exampleshow="5"Indicates that up to 5 page numbers are displayed.
paginationTags will return apagesObject, which includes all information related to pagination, such asTotalItems(Total number of documents),TotalPages(Total number of pages),CurrentPage(Current page) andFirstPage(Home object),PrevPage(Previous page object),NextPage(Next page object),LastPage(Last page object). Where,PagesIt is an array object that contains every middle page number,itemEach,itemall have,Name(page name, i.e., number),Link(Page link), andIsCurrent[Whether current page] attribute, which allows you to flexibly add styles to the current page number, enhancing user experience.
Selection and layout of template files
In Anqi CMS, to better organize template files, it is recommended to place the code that calls all documents under a specified Tag and pagination in a dedicated tag list template. According to Anqi CMS template conventions,tag/list.htmlThe file is the ideal location to achieve this function. The system will automatically recognize and apply this file as the list template for the tab page.
Comprehensive code example
The following is an example of atagDataListandpaginationAn example of complete code used together, usually placed in your template directory,tag/list.htmlin the
`twig {# tag/list.html #}`
en】
<!DOCTYPE html>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
{# 其他通用头部信息，如CSS、JS等 #}
{# 引入公共头部，例如包含导航栏 #}
{% include "partial/header.html" %}
<div class="container">
{# 面包屑导航，帮助用户了解当前位置 #}
<div class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
<ul>
{% for item in crumbs %}
<li><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
</div>
<h1>标签：{% tagDetail with name="Title" %}</h1>
<p class="tag-description">{% tagDetail with name="Description" %}</p>
{# 调用指定Tag下的文档列表并进行分页 #}
<div class="archive-list">
{% tagDataList archives with type="page" limit="10" order="id desc" %}
{% for item in archives %}
<article class="archive-item">
<a href="{{item.Link}}">
<div class="archive-header">
<h2 class="archive-title">{{item.Title}}</h2>
{% if item.Thumb %}
<img class="archive-thumb" src="{{item.Thumb}}" alt="{{item.Title}}">
{% endif %}
</div>
<p class="archive-description">{{item.Description}}</p>
<div class="archive-meta">
<span>分类: {% categoryDetail with name="Title" id=item.CategoryId %}</span>
<span>发布时间: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量: {{item.Views}}</span>
</div>
</a>
</article>
{% empty %}
<p>该标签下暂无文档。</p>
{% endfor %}
{% endtagDataList %}
</div>
{# 分页导航区域 #}
<div class="pagination-area">
{% 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 page