In AnQiCMS template design, flexibly displaying content is the key to website operation.When you need to display articles under a category page, not only the current category's articles, but also all the articles under the subcategories, or present them in a more structured way, AnQiCMS provides powerful template tags to meet these needs.This article will introduce in detail how to implement this feature in your AnQiCMS template.
Understanding the category and document mechanism of AnQiCMS
In AnQiCMS, content is usually organized under "Document Model" and "Categories".Each document (or article/product, etc.) belongs to a specific category, and categories can have parent-child hierarchical relationships.This hierarchical structure provides great flexibility for content organization and display.When we call content in the template, we need to make it clear which category (and its subcategories) to obtain, as well as how to sort and limit the number.
Core tags:archiveListWithcategoryList
The core of displaying the current category and its subcategory documents lies in two template tags:
categoryList(Category list tag):Used to obtain category information, including the subcategories of the current category. By traversing this list, we can obtain the IDs and names of all subcategories.archiveList(Document list label)English: : Used to retrieve document lists. This tag is very powerful, allowing you to filter documents through various parameters, the most critical of which iscategoryId(Category ID) andchild(Whether it includes subcategory documents).
Next, we will demonstrate specific operations through two common scenarios.
Scenario one: Directly display the current category and all its subcategory documents
This is the most direct requirement, that is, to list all documents belonging to the current category and all its subcategories (including grandchild categories, etc.) on a category page at one time.
To achieve this function, we mainly rely onarchiveListTagscategoryIdandchildthe parameters. When you are in a category page template (such as{模型table}/list.html) usedarchiveListif you omitcategoryIdparameters,archiveListthe default will try to read the current page's category ID.childThe parameter defaults totrueIt means it will automatically include all subcategory documents.
Code example:
{# 假设我们正在一个分类列表页面的模板中,例如 articles/list.html #}
{# 首先,可以获取当前分类的详细信息,用于标题等展示,这不是必须的,但有助于页面上下文 #}
{% categoryDetail currentCategory with name="Id" %}
{% categoryDetail currentCategoryTitle with name="Title" %}
<h1>{{ currentCategoryTitle }} 及下属所有分类文档</h1>
<div class="document-list-container">
{% archiveList archives with type="page" limit="10" order="id desc" %}
{% 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 }}" class="document-thumb">
{% endif %}
<p class="document-description">{{ item.Description }}</p>
<div class="document-meta">
<span>所属分类: {% categoryDetail categoryName with name="Title" id=item.CategoryId %}{{ categoryName }}</span>
<span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量: {{ item.Views }}</span>
</div>
</a>
</div>
{% empty %}
<p>当前分类及其子分类下没有任何文档。</p>
{% endfor %}
{% endarchiveList %}
{# 如果需要分页,可以结合 pagination 标签 #}
{% pagination pages with show="5" %}
<div class="pagination-nav">
{% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
{% for p in pages.Pages %}<a href="{{ p.Link }}" class="{% if p.IsCurrent %}active{% endif %}">{{ p.Name }}</a>{% endfor %}
{% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
</div>
{% endpagination %}
</div>
Code Explanation:
{% categoryDetail currentCategory with name="Id" %}This line of code will implicitly get the ID of the current category page and assign its value tocurrentCategoryVariable (although this variable is not directly used here,)archiveListit will be used automatically when not specifiedcategoryId) when not specified, the classification ID of the current page will be used automatically.{% archiveList archives with type="page" limit="10" order="id desc" %}:archives: Define a variable to store the obtained document list.type="page":This indicates that this is a paged list.limit="10"[en]: Displaying 10 articles per page.order="id desc":The documents are sorted in reverse order by document ID, that is, the most recently published are at the top.- Because it was not specified
categoryId,archiveListIt will intelligently obtain the ID of the current category. - Because it was not specified
childThe parameter, it will use the default valuetrue,English includes all subcategory documents.
{% for item in archives %}...{% empty %}...{% endfor %}:Loop through the document list, if the list is empty, then display{% empty %}the content inside.{% categoryDetail categoryName with name="Title" id=item.CategoryId %}:Inside the document loop, based on each article'sCategoryIdDynamicly obtain the name of its category.{% pagination pages with show="5" %}: Used to generate pagination navigation, allowing users to switch between different pages.
Scene two: Display in layers: first display the current category documents, then display the subcategories and their documents in turn
If you want the page structure to be clearer, for example, to first display the direct documents under the current main category, then list the subcategories, and under each subcategory list the documents, you can use a nested loop method.
Code example:
English
{# 1. Get the detailed information of the current category #} {% categoryDetail currentCategoryDetail %}
{{ currentCategoryDetail.Title }}
{{ currentCategoryDetail.DescriptionEng }}
{# 2. Show direct documents under the current category (does not include documents under subcategories) #}