In website content operation, effectively organizing and displaying related content is crucial for improving user experience and the SEO performance of the website. AnQiCMS (AnQiCMS) provides powerful tag functions, among whichtagDataListTags are the key tools to help us achieve this goal.It can flexibly retrieve all associated document lists based on the specified tag ID, and easily achieve content pagination display through cooperation with other tags.
UnderstandingtagDataListLabel: Bridge of content association
tagDataListThe core function of the tag is to retrieve the documents associated with the tag.Imagine you have a website with many blog posts about 'SEO tips', and you link them together with the tag 'SEO tips'.Now, you hope to display a list of articles with the tag "SEO Tips" on a page of your website, such as the tag detail page of "SEO Tips", or in the sidebar of other articles.at this time,tagDataListit comes in handy.
This label provides several important parameters for fine-grained control of content retrieval:
tagIdThis is the most critical parameter, you need to provide a tag ID. If you are currently on a tag detail page and have not specified it explicitlytagIdthentagDataListIt will intelligently automatically read the tag ID of the current page. Of course, you can also manually specify any tag ID, such astagId="10".moduleIdIf your website uses a different content model (such as articles, products), you can use this parameter to limit the documents to be retrieved from a specific model. For example,moduleId="1"It may represent only retrieving documents under the "Article" model.order: The sorting method of the document. You can choose to sort in reverse order by publication time (order="id desc"）、in reverse order by views（order="views desc"), or by custom sorting set by the backend (order="sort desc") and so on.limit: Controls the number of documents displayed. If you just want to display the first few contents, you can setlimit="5". It also supportsoffsetpatterns, such aslimit="2,10"It means to get 10 data items starting from the 2nd one.type: This parameter is very critical. When you need to implement pagination, you must set it totype="page". If you just want to list a fixed number of documents, you can use the default valuelist.siteIdIf you have enabled the multi-site management feature and want to call data from other sites, you can specify the site ID through this parameter.
tagDataListThe tag will return an array of document objects, usually we would usefora loop to traverse and display each document.
Combinepaginationthe tag to implement elegant pagination
WhentagDataListoftypethe parameter is set to"page"It will cooperate when,paginationLabels work together to jointly implement pagination display on the page.paginationLabels are responsible for generating page navigation, allowing users to easily switch between different pages.
paginationTags provide ashowThe parameter is used to control the maximum number of page number buttons displayed in the page navigation bar, for exampleshow="5"It will display up to 5 page numbers before and after the current page.
It will return apagesAn object that contains all the information needed for pagination: total number of items (TotalItems）、total number of pages（TotalPages）、current page（CurrentPage) as well as the links and names of the first page (FirstPage) and the last page (LastPage）、previous page（PrevPage），next page（NextPage) The most important thing is that it also provides aPagesAn array that contains all the detailed information of the middle page numbers, convenient for us to loop render page number links.
Actual operation: Get the label document and display it in pages.
Now, let's look at a specific example of how to combinetagDataListandpaginationTo implement displaying all documents under a tag on a tag detail page with pagination.
Suppose we are editing a namedtag/list.htmlThe template, this is the default tag document list page template of Anqi CMS.
{# 首先，使用tagDataList标签获取指定Tag关联的文档列表 #}
{# 注意：将type参数设置为"page"以启用分页功能 #}
{% tagDataList archives with type="page" limit="10" %} {# 每页显示10篇文档 #}
{% if archives %}
<div class="tag-document-list">
{% for item in archives %}
<div class="document-item">
<a href="{{item.Link}}">
{# 显示文档标题 #}
<h3>{{item.Title}}</h3>
{% if item.Thumb %}
{# 如果文档有缩略图，则显示 #}
<img src="{{item.Thumb}}" alt="{{item.Title}}">
{% endif %}
{# 显示文档简介 #}
<p>{{item.Description}}</p>
<div class="document-meta">
{# 显示文档所属分类 #}
<span>分类：{% categoryDetail with name="Title" id=item.CategoryId %}</span>
{# 格式化显示发布时间 #}
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
{# 显示浏览量 #}
<span>浏览量：{{item.Views}}</span>
</div>
</a>
</div>
{% endfor %}
</div>
{% else %}
<p>该标签下暂无任何文档。</p>
{% endif %}
{% endtagDataList %}
{# 接下来，使用pagination标签生成分页导航 #}
<div class="pagination-container">
{% pagination pages with show="5" %} {# 最多显示5个页码按钮 #}
<ul class="pagination-list">
{# 首页链接 #}
<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 item in pages.Pages %}
<li class="page-item {% if item.IsCurrent %}active{% endif %}">
<a href="{{item.Link}}">{{item.Name}}</a>
</li>
{% endfor %}
{# 下一页链接 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
</li>
{% endif %}
{# 末页链接 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
</li>
</ul>
<p class="pagination-info">
总共有 {{pages.TotalItems}} 篇文档，分为 {{pages.TotalPages}} 页，当前是第 {{pages.CurrentPage}} 页。
</p>
{% endpagination %}
</div>
In this code block,tagDataListResponsible for querying and providing document data,paginationBased ontagDataListThe query results, automatically generated the complete page navigation. Throughfor item in archivesWe have sequentially displayed the core information of each document, such as the title, introduction, classification, publication time, and page views, and have usedif item.Thumbto determine if there is a thumbnail. The pagination part is traversedpages.PagesAn array dynamically generates page link and provides navigation to the first page, previous page, next page, and last page.
Practical skills to improve content operation efficiency
Rational utilizationtagDataListAnd the pagination feature can bring many benefits to the website:
- optimize user experienceUsers can quickly find related content based on their interests, and pagination avoids the fatigue caused by too long content on a single page.
- Enhance website navigation: Tabs are inherently an effective form of categorization navigation, combined with pagination, they can better organize a large amount of content.
- Improve SEO effectiveness: A clear tab structure and a friendly URL (configured through pseudo-static rules) helps search engines better crawl and index website content, improving the ranking of relevant keywords.
By using these tags flexibly, AnQi CMS can help you build a content-rich, well-structured, and user-friendly website, thereby more effectively managing content operations.
Frequently Asked Questions (FAQ)
How to get the Tag ID of the current Tag page?
Intag/list.htmlIn such a tag detail template,tagDataListTag without specifyingtagIdWhen a parameter is specified, it will intelligently automatically read the corresponding tag ID from the current page URL. Therefore, you usually do not need to manually obtain and pass it in.tagIdJust use it directly.{% tagDataList archives with type="page" limit="10" %}You can do it. If you really need to get it, you can do it through{% tagDetail with name="Id" %}Tag to directly get the Tag ID of the current page.
2. How can I display the Tag document of a specific model (such as the "Product" model)?
You can intagDataListthe tag withmoduleIdSpecify the model. For example, if the ID of the “Product” model is2, you can use the label in this way:{% tagDataList archives with type="page" limit="10" moduleId="2" %}Thus,tagDataListOnly queries and displays documents associated with the label and belonging to the 'product' model.
3. Why doesn't my pagination show up?
usually, pagination does not display for several common reasons:
typethe parameter is not set to"page":tagDataListmust be specifiedtype="page",paginationlabel to obtain complete pagination data.limitincorrectly setIf:limitSet too large, for examplelimit="9999"There will be no pagination if all documents are displayed on one page. Make surelimitSet reasonable, less than the total number of documents.- Not enough documents to trigger paginationIf the number of documents associated with this tag is less than or equal to the one you set
limitThe system will not generate pagination navigation if the quantity is set. For example, if you set 10 articles per page, but there are only 8 documents under the tag, there will be no pagination. - The template is not used correctly.
paginationTagMake sure you have added the examples provided in the document correctly.{% pagination pages with show="5" %}...{% endpagination %}And the code blocks inside them.pagesVariable name andtagDataListThe outputpagesMatch the objects.