As an experienced website operations expert, I know the power of a content management system (CMS) lies not only in its comprehensive backend functions but also in the flexibility of front-end content display.AnQiCMS (AnQi CMS) is a great tool just like this, which is based on the high-performance architecture of Go language, combined with its concise and efficient template tag system, allowing us to easily handle various complex content display needs.
Today, let's delve deeply into two core tags in AnQiCMS -categoryListandarchiveListHow to cleverly collaborate to help us accurately display the latest few documents under each category of the website, thereby greatly enriching the page content and enhancing the user experience.
1. Understanding Foundation: Classification List TagscategoryList
In AnQiCMS,categoryListLabels are powerful tools for managing and displaying the structure of website categories.It allows us to obtain classification information under specific content models, whether it is articles, products, or other custom models, all of which can be flexibly accessed through it.
When we usecategoryListWhen, you can specify some key parameters to control its behavior, for example:
moduleId：Tell the system which content model we want to retrieve (for example, article model ID is 1, product model ID is 2) under the classification.parentId：Used to build the classification hierarchy,parentId="0"Represents retrieving all top-level categories, and specifying a category ID can retrieve its subcategories.limit: Limits the number of categories returned, such as displaying the first 10 categories.
This label will return an array of category objects, each object containing such information as category ID (Id), category title (Title), category link (Link), and whether it has subcategories (HasChildren）et al. This information will serve as a bridge for us to obtain documents under the classification in the future.
2. Content Core: Document List TagsarchiveList
With classification, it is natural to need to display the specific content under the category.archiveListThe label is a core tool used in AnQiCMS to retrieve the list of documents (or also known as archives, such as articles, products, etc.).It can meet the needs of various scenarios such as conventional lists, related documents, and pagination display.
archiveListIts strengths are also reflected in its rich parameter configuration, among which are closely related to today's topic:
categoryIdThis is a connection.categoryListThe key, by this parameter, we can specify which category of documents to get.limit: Controls how many documents to display under each category, for example, "the latest 5 documents."orderDetermines the sorting order of the document. To achieve 'latest' display, we usually useorder="id desc"(Sorted by document ID in descending order, i.e., the latest released first) ororder="createdTime desc"(Sorted by creation time in descending order). If you want to display popular documents, you can useorder="views desc"(Sort by view count in descending order).typeEnglish: In order to display a fixed number of documents on non-categorized list pages (such as the homepage or a specific module), we generally willtypeset"list".
archiveListSimilarly, it will return an array of document objects, each containing document ID (Id), title (Title), link (Link), abstract (Description), the publish time (CreatedTime）as well as the thumbnail (Thumb), and other useful information.
3. Collaborative Work: Display the latest documents under each category
Now, we willcategoryListandarchiveListThese two tags are cleverly combined to achieve our goal: to display the latest few documents under each category.
The core idea is:Firstly usecategoryListTraverse all categories that need to be displayed, and then, within each iteration, nest another loop.archiveListand then concatenate it.categoryIdbind it dynamically to the current category's ID, and setlimitandorder参数以获取指定数量的最新文档。
让我们通过一个具体的模板代码示例来理解这一过程：
{# 外层：使用 categoryList 获取指定模型下的所有顶级分类 #}
{% categoryList categories with moduleId="1" parentId="0" %}
{# 遍历每个获取到的分类 #}
{% for category in categories %}
<section class="category-block">
<h3>
<a href="{{ category.Link }}">{{ category.Title }}</a>
<small>（共 {{ category.ArchiveCount }} 篇文章）</small>
</h3>
<ul class="latest-articles-list">
{# 内层：嵌套使用 archiveList 获取当前分类下的最新文档 #}
{# categoryId 动态绑定为当前分类的 Id #}
{# limit 限制只显示最新的 5 篇文章 #}
{# order="id desc" 确保按 ID 降序，即最新发布在前 #}
{% archiveList archives with type="list" categoryId=category.Id limit="5" order="id desc" %}
{# 遍历当前分类下的每篇最新文档 #}
{% for article in archives %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
<span class="publish-date">{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</li>
{% empty %}
{# 如果该分类下没有文档，则显示友好提示 #}
<li class="no-content">该分类下暂时没有文档发布。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</section>
{% endfor %}
{% endcategoryList %}
Code analysis:
{% categoryList categories with moduleId="1" parentId="0" %}：这行代码会获取文章模型（English）moduleId="1"）下所有顶级分类（English)parentId="0"），and the result is stored incategoriesthe variable.{% for category in categories %}：我们开始遍历这些顶级分类，每次循环，English)category变量都代表一个独立的分类对象。English<h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3>English: Here is displayed the current category's title and link, convenient for users to click and view more content.{% archiveList archives with type="list" categoryId=category.Id limit="5" order="id desc" %}English: This is the key to realizing core functions. Here,categoryIdis dynamically set to the currentcategoryofId.limit="5"Tell the system that we only need the latest 5 documents,order="id desc"ensuring that these documents are arranged from new to old in the order of publication.type="list"Then we ensure that we get a list of a fixed number, rather than pagination data.{% for article in archives %}We continue to traverse the latest documents obtained under the current category.<li><a href="{{ article.Link }}">{{ article.Title }}</a>...</li>：Display the title, link, and usage of each documentstampToDateof the formatted publish date by the filter.{% empty %}：This is a very practical tag, whenarchiveList(or any for loop) when no documents are retrieved.emptyThe content within the block will be displayed. This can effectively avoid blank areas on the page, providing a more friendly user experience.
Through this nested calling method, we can present the latest updates of each category in a structured and beautiful way on the homepage of the website, on a specific thematic page, or on any page that needs to aggregate and display multiple categories of content, greatly enhancing the information density and attractiveness of the website.
4. Actual scenario and application value
ThiscategoryListWitharchiveListThe collaborative work mode has a wide range of applications in actual website operations:
- Website homepage dynamic area：Can easily build modules such as 'Latest News', 'Product Updates', 'Industry Dynamics', etc., each module corresponding to a category and displaying a number of the latest information under the category.
- Topic Page AggregationA topic page created for a specific theme, which can aggregate the latest content of multiple related categories, allowing users to obtain the information they need in one-stop.
- Sidebar Content RecommendationIn the category list page sidebar, you can display the documents under the current category such as 'Most Popular Clicks' or 'Latest Releases' to guide users to delve deeper into browsing.
This flexible content combination capability not only meets the diverse display needs of content operators, but also optimizes the website's SEO structure, increases internal links, and ultimately improves the browsing experience and professionalism of the website.
5. Common Questions (FAQ)
Q1: How do I display the latest documents of a specific category instead of all categories?
A1:If you only need to display the latest documents under a specific category without traversing all categories, you can directly omit the outer layer,categoryListuse the tag alonearchiveList。For example, to display the latest 5 documents under the category with ID 10, you can write it directly like this:
<ul class="single-category-latest">
{% archiveList archives with type="list" categoryId="10" limit="5" order="id desc" %}
{% for article in archives %}
<li><a href="{{ article.Link }}">{{ article.Title }}</a></li>
{% empty %}
<li class="no-content">该分类下暂无最新文档。</li>
{% endfor %}
{% endarchiveList %}
</ul>
Q2:archiveListoforderparameter, in addition toid desc, what are some commonly used sorting methods?
A2: orderThe parameter is very flexible, you can choose different sorting fields and order according to your needs:
id desc：Sorted by document ID in descending order, usually equivalent to the most recently published (by default, the ID is incremented).createdTime desc：Sorted by document creation time in descending order, which is also a common way to obtain the latest documents.views desc：Sorted by document views in descending order, used to display popular or most popular documents.sort desc：By descending order of the custom sorting field in the background, if the background has set a custom sorting value for the document, it can be sorted according to this value. You can choose the most suitable sorting method according to your actual needs.
Q3: If there is no document under a certain category, what will the page display? How can blank areas be avoided?
A3:As shown in the example article, whenarchiveList(or otherforLoop) No documents matching the criteria were found in the AnQiCMS template engine's{% empty %}tags come into play. In{% for ... %}and{% endfor %}You can add between{% empty %}And place the prompt information to be displayed when the loop content is empty in its subsequent position.This can effectively avoid large blank areas on the page, providing a more friendly user experience, for example: "There are no latest documents under this category."}]or 'Content is being updated, please wait!'English