As an experienced website operations expert, I know how important it is to organize and present content efficiently for the success of the website.Tags, as a flexible content classification method, not only improve the browsing experience within the site, but also an indispensable part of SEO strategy.AnQiCMS (AnQiCMS) with its concise and efficient architecture and rich features, provides us with a powerful content management tool, allowing even a large number of documents under specified tags to be displayed in an orderly manner and with elegant pagination.
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
In AnQi CMS, tags are not just a simple categorization of content, but also a powerful content association mechanism.Documents of different models (such as articles, products) can be tagged with the same labels to achieve cross-model association.This flexibility allows you to provide users with highly relevant content aggregation pages according to their specific needs.For example, you can have a tag named "SEO Optimization" that may be associated with articles about SEO technical details, product pages recommending SEO tools, or even single pages with SEO service case studies.
The management of tags in AnQi CMS backend is very intuitive, you can find the "Document Tags" feature under "Content Management" to perform tag addition, deletion, modification, and query.Setting a reasonable name, keywords, and description for the tag is the first step to improving the SEO performance of the tag page.
Core tags:tagDataListGet the document list under the specified Tag
To get all documents under a specified tag, AnQi CMS provides a special and efficient template tag: tagDataList. This tag can extract all documents associated with the tag ID or the current page context.
While usingtagDataListWhen, you need to specify some key parameters to accurately control the scope and expression of the documents obtained. The most critical istagIdA parameter that allows you to explicitly specify which document tag to call. Usually, when you are intag/list.htmlsuch a tag list page,tagIdIt will be automatically retrieved from the URL, no manual specification is required. But if you need to call the document of a specific tag on other pages (such as the homepage sidebar), you can do so bytagId="1"(Assuming the tag ID is 1) to call precisely.
Furthermore,moduleIdThe parameter is very useful, if you only want to display a specific content model (such as an article model, itsmoduleIdusually set to 1) document under, you can addmoduleId="1"The restriction.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 thing is, in order to implement pagination,typeThe parameter must be set topage. This will tell the system,tagDataListIt must return the document list as well as a pagination information.pagesObject.
tagDataListIt will return a namedarchivesThe array object, this object contains detailed information for each document. In the loop body of the template, eachitemrepresents a document, you can easily access the document'sTitle(Title),Link(Link),Description(Description),CreatedTime(creation time) andViews(Views) and other fields. These fields are sufficient to build a rich and attractive document list item.
Improve the pagination function:paginationTag
NowtagDataListThe data foundation for the document list and pagination required, we still need another powerful tag of the CMS -paginationto display an intuitive and functional pagination navigation at the bottom of the page.
paginationThe label cleverly combinestagDataListThe pagination information passed in, generates a navigation area containing home page, previous page, next page, last page, and middle page number links. When using it, you can utilizeshowParameters to control how many page number links are displayed at the same time in the pagination navigation, for exampleshow="5"this means that up to 5 page number buttons are displayed.
paginationThe tag will return apagesAn object that contains all the information related to pagination, such asTotalItems(Total number of documents),TotalPages(Total number of pages),CurrentPage(Current page number) as well asFirstPage(Home object),PrevPage(Previous object page),NextPage(Next object page),LastPage(End object page). Among which,Pagesis an array object that includes each of the middle page numbers,itemfor eachitemhasName(Page name, i.e., number),Link(Page link) andIsCurrent(Is the current page) attribute, which allows you to flexibly add styles to the current page number and enhance user experience.
Template file selection and layout
In AnQi CMS, to better organize template files, it is recommended to place the code that calls the document list under a specified Tag and pagination in a dedicated tag list template. According to the AnQi CMS template conventions,tag/list.htmlThe file is the ideal location for this function. The system will automatically recognize and apply this file as the list template for the tab page.
Comprehensive code example
Here is a way totagDataListandpaginationA complete code example that is usually placed in your template directorytag/list.htmlin the file:
`twig {# tag/list.html #}
{# Retrieve detailed information about the current Tag for use in page titles, descriptions, etc. #} {% tagDetail currentTag with name=“Title” %} {% tagDetail tagDescription with name=“Description” %}
<!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