As an experienced CMS website operation personnel for a security company, I know that high-quality and easy-to-understand content is crucial for user experience.Today, we will discuss how to implement a list of articles under a specified tag in the Anqi CMS, and add practical pagination functionality to it, which is of great significance for enhancing user browsing experience and website SEO.
Understand the importance of the tag page
In SafeCMS, Tag is a powerful content organization tool.They allow us to associate content from different categories and even different models through common themes or keywords, forming unique aggregated pages.An meticulously constructed tag page can not only help users find the content they are interested in quickly, but also provide more crawling entries for search engines, improving the keyword ranking of the website.The display of the article list under the specified tag is the core link to build these valuable pages.
Locate the template file
According to the template design conventions of Anqi CMS, the list of articles related to tags is usually located in your template directory.tag/list.htmlThe file is responsible for rendering. If you are customizing a new template, make sure to create or modify this file under this path so that the system can correctly identify and apply it.
核心标签：获取指定标签下的文章列表
Intag/list.html文件中，我们将使用English CMS内置的tagDataListTag to get all articles associated with the current tag. This tag function is powerful, able to filter content based on multiple conditions.
To get the list of articles under the current visited tag.tagDataListThe label will automatically identify the current page's label ID, without the need for us to specify it manuallytagIdIf you indeed need to retrieve articles with a specific ID, you can pass it in the form oftagId="X".
To implement the pagination feature, we must usetypeparameter settings"page"Also, bylimitparameters to control the number of articles displayed per page. For example,limit="10"this would mean displaying 10 articles per page.
A basictagDataListUsage as shown below, we will assign the article list obtained toarchivesVariable:
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<article>
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p>{{ item.Description|truncatechars:150 }}</p>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
{% endif %}
<time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
<span>浏览量：{{ item.Views }}</span>
</article>
{% empty %}
<p>当前标签下没有任何文章。</p>
{% endfor %}
{% endtagDataList %}
In the above code snippet, we traversedarchiveseach article in the variable (item) and displayed its title, link, description, thumbnail, publish time, and view count.Description|truncatechars:150Is a filter used to truncate the description text to 150 characters.stampToDateThe label is used to format the timestamp into a readable date format.
Implement pagination functionality
After the content of the article list is displayed, we need to introducepaginationThe label to generate pagination navigation. This label is associated withtagDataListCombining them, it can automatically recognizetype="page"pagination data in this mode.
paginationThe tags usually receive onepagesA variable that contains all the information needed for pagination, such as the total number of items, the total number of pages, the current page number, and links to the previous page, next page, first page, last page, and middle page numbers.showThe parameter can control the maximum number of page buttons displayed in the pagination navigation. For example,show="5"Up to 5 page numbers around the current page will be displayed.
The following are examples of using pagination labels:
<div class="pagination-container">
{% pagination pages with show="5" %}
{% if pages.FirstPage %}
<a class="page-link {% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
{% endif %}
{% if pages.PrevPage %}
<a class="page-link" href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
{% endif %}
{% for item in pages.Pages %}
<a class="page-link {% if item.IsCurrent %}active{% endif %}" href="{{ item.Link }}">{{ item.Name }}</a>
{% endfor %}
{% if pages.NextPage %}
<a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
{% endif %}
{% if pages.LastPage %}
<a class="page-link {% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
{% endif %}
{% endpagination %}
</div>
Combine the article list and pagination function, a complete onetag/list.htmlThe template file content will include these two parts, ensuring that users can obtain a smooth and complete experience when browsing the tag aggregation content.
Complete template code example
Merge the above two parts of code, and you cantag/list.htmlBuild a functional tag article list page in the template file:
{# tag/list.html #}
{# 获取当前标签的详细信息，用于页面TDK或标题展示 #}
{% tagDetail currentTag with name="Title" %}
{% tdk seoKeywords with name="Keywords" %}
{% tdk seoDescription with name="Description" %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{ currentTag }} - {% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{{ seoKeywords }}">
<meta name="description" content="{{ seoDescription }}">
{# 引入您的CSS文件 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
{# 引入公共头部，如果您的模板有的话 #}
{% include "partial/header.html" if_exists %}
<main class="main-content">
<section class="tag-articles">
<h1>标签：{{ currentTag }}</h1>
<div class="article-list">
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<article class="article-item">
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p class="article-description">{{ item.Description|truncatechars:150 }}</p>
{% if item.Thumb %}
<div class="article-thumb">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</a>
</div>
{% endif %}
<div class="article-meta">
<time datetime="{{ stampToDate(item.CreatedTime, "2006-01-02T15:04:05") }}">发布于: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
<span>浏览量: {{ item.Views }}</span>
</div>
</article>
{% empty %}
<p class="no-content-message">当前标签下暂时没有相关的文章。</p>
{% endfor %}
{% endtagDataList %}
</div>
<div class="pagination-container">
{% pagination pages with show="5" %}
<ul class="pagination">
{# 首页 #}
{% if pages.FirstPage %}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{% endif %}
{# 上一页 #}
{% if pages.PrevPage %}
<li class="page-item">
<a class="page-link" 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 class="page-link" href="{{ item.Link }}">{{ item.Name }}</a>
</li>
{% endfor %}
{# 下一页 #}
{% if pages.NextPage %}
<li class="page-item">
<a class="page-link" href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
</li>
{% endif %}
{# 尾页 #}
{% if pages.LastPage %}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a class="page-link" href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>
{% endif %}
</ul>
{% endpagination %}
</div>
</section>
</main>
{# 引入公共底部，如果您的模板有的话 #}
{% include "partial/footer.html" if_exists %}
</body>
</html>
Common Questions (FAQ)
Q: Can I use it in a nontag/list.htmlTemplate shows a list of articles with specified Tag and pagination?
Answer: Of course. You can use it in any template file (such as the homepageindex/index.htmlor custom page)tagDataListLabel. In this case, you need to explicitly specifytagId="X"the parameter to indicate which label's articles you want to display, and set it accordinglytype="page"andlimitParameters. But please note that the generation of pagination links may require you to manually construct the URL, or ensure that your URL structure can correctly pass the pagination parameters.
问：How to optimize the SEO performance of the tab page?
答：In addition to ensuring content quality and page loading speed, the SEO optimization of tab pages includes several key points.Firstly, ensure that each tag has a unique, attractive name, and set meaningful SEO titles, keywords, and descriptions in the background for the tags.English, keep the content of the tags updated and active, to avoid having a large number of empty tabs.Also, consider linking to the tag page within related articles and including the URL of the tag page in the sitemap to help search engines discover and index it.
问：If I set a custom rewrite rule, will pagination links be affected?
Answer: Aqin CMSpaginationThe label will usually generate correct, SEO-friendly pagination links intelligently based on the pseudo-static rules you set in the background. As long as your pseudo-static rules are configured correctly (especially including{page}Parameters are used to handle pagination), the system will be responsible for generating URLs that comply with the rules. If you encounter any problems, please check.plugin-rewrite.mdThe configuration guide of pagination pseudo static rules in the document, and ensure that your templatepaginationThe tag did not passprefixRedefining the parameter unnecessarily.