AnQiCMS (AnQiCMS) makes the display of website content very simple and efficient with its flexible template mechanism and powerful content management features.For many websites, clearly displaying content by category and providing convenient pagination navigation is the key to improving user experience and optimizing search engine rankings.Next, let's learn together how to easily implement document list display and pagination functions under specified categories in Anqi CMS.
Flexible configuration, control content display
The template system of AnQi CMS uses syntax similar to Django template engine, making content calls intuitive and powerful. To display a document list under a specified category and perform pagination, several core template tags will be mainly used: archiveListUsed to get the document list data,categoryDetailUsed to get the detailed information of the current category,paginationUsed to generate pagination navigation. They work together to make the display and browsing of dynamic content effortless.
Firstly, we need to find or create the corresponding category list template file in the current topic's template folder. Usually, these files are located in/template/{你的模板名称}/{内容模型表名}/list.htmlFor example, if it is an article list, it may bearticle/list.html. If you want to set a unique layout for a specific category, you can also createlist-{分类ID}.htmlsuch naming format, for examplearticle/list-10.htmlThe system will automatically recognize and apply.
In the list page template, we first need to obtain some basic information about the current category, such as the category name and description, which is very important for the page SEO and user understanding. You can usecategoryDetailLabel to complete this task:
{# 获取当前分类的详细信息，用于页面标题、描述等 #}
<h1 class="category-title">{% categoryDetail with name="Title" %}</h1>
<p class="category-description">{% categoryDetail with name="Description" %}</p>
This code will directly output the category title and description of the current page, without specifying an ID, the system will automatically detect. If you need to get the category information of a specific ID, you can also do so byid="你的分类ID"Parameters can be specified.
Dynamically retrieve document list
The core part is next——retrieve document list under a specified category. Safe CMS providesarchiveListTags, it allows you to filter documents based on various conditions. To implement pagination functionality, we need totypeparameter settings"page".
Assuming we want to display 10 articles per page on the category page, the template code can be written as follows:
<div class="document-list">
{# 使用 archiveList 标签获取指定分类下的文档列表，并开启分页功能 #}
{# categoryId="0" 表示不指定分类ID，系统会自动获取当前页面的分类ID #}
{# type="page" 开启分页，limit="10" 设置每页显示10条文档 #}
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<article class="document-item">
{# 检查文档是否有缩略图，并显示 #}
{% if item.Thumb %}
<a href="{{item.Link}}" class="document-thumb">
<img src="{{item.Thumb}}" alt="{{item.Title}}">
</a>
{% endif %}
<div class="document-info">
<h2 class="document-title"><a href="{{item.Link}}">{{item.Title}}</a></h2>
<p class="document-description">{{item.Description}}</p>
<div class="document-meta">
{# 使用 stampToDate 格式化发布日期 #}
<span>发布日期: {{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量: {{item.Views}}</span>
</div>
</div>
</article>
{% empty %}
{# 如果当前分类下没有文档，显示提示信息 #}
<p class="no-content">当前分类下暂无文档。</p>
{% endfor %}
{% endarchiveList %}
</div>
in thisarchiveListTags inside:
archivesis a variable name we define, which will contain the document list data obtained.type="page"Tell the system that we need a paginated list mode, so thatpaginationthe tags can work correctly.limit="10"10 documents per page are specified.categoryId="0"Here is a tip, it indicates that we do not need to explicitly specify the category ID. The system will intelligently recognize the category based on the current page URL. Of course, you can also manually specify one or more category IDs if needed, for examplecategoryId="1,2,3".{% for item in archives %}Loop through the document list,itemThe variable contains detailed information about each document, such asitem.Title(Title),item.Link(Link),item.Description[Summary],item.Thumb[Thumbnail],item.CreatedTime(Publish time) anditem.Views(views) and so on.{% empty %}YesforA practical feature of the loop, whenarchivesThe list is empty, it will display{% empty %}and{% endfor %}Avoid blank spaces between content.stampToDateThe filter is used to format timestamps into readable date strings."2006-01-02"It is the reference value for date formatting unique to the Go language.
Build elegant pagination navigation
With the document list, we also need to provide users with convenient pagination navigation.paginationLabels are the tools to achieve this function, it will automatically generate links for "Home
Add the following code toarchiveListAfter the label, you can see the pagination navigation:
`twig