How to aggregate and display the content list of multiple article categories on a single page?

In AnQi CMS, implementing a single-page aggregation display of multiple article category content lists is a very practical need. It can help website administrators organize content efficiently and provide visitors with a more convenient browsing experience.This is commonly applied to the homepage, special page, or aggregation page of a website, where we can easily achieve this goal by skillfully using AnQiCMS template tags.

Core idea: Tag combination and nested loop

AnQi CMS provides a flexible template tag system, among whichcategoryListandarchiveListare two core players in the aggregation display of content. Our basic idea is:

1. Firstly, get the list of categories you want to aggregate and display.This may be a top-level category or a subcategory under a parent category.
2. Then, traverse these categories.In each loop, we will get the detailed information of the current category.
3. Within each category, we will get the list of articles under the current category ID and display them.This way, each category of articles will be displayed in an independent block on the page.

By using this combination of tags and nested loops, we can clearly display multiple categories and their included article content on a single page.

Preparation: Understand the template structure and content model

Before you start, it is recommended that you confirm the structure and content model of your AnQiCMS template. The template files of AnQiCMS are usually stored in/templateUnder the directory, with.htmlwith suffix. You can choose to place these codes in the homepage template of the website (index.html), on a single page (page/detail.html) or create a custom template for a specific aggregated page to place these codes.

In addition, AnQiCMS supports flexible content models such as 'Article Model', 'Product Model', etc.When retrieving the category and article list, you must be clear about which content model's data you want to obtain, as different models have their own independent categories and article data. This is throughmoduleIdSpecify the parameter, for example,moduleId="1"typically represents an article model,moduleId="2"Represents the product model.

The application of key template tags

1.categoryList: Get the category list

categoryListThe tag is used to retrieve the list of categories of the website. We can use it to filter out the categories that need to be displayed on the page.

• moduleId: Specify the content model ID, for examplemoduleId="1"(Article model).
• parentId: Specify the parent category ID.parentId="0"Indicates retrieving all top-level categories. If you want to get the subcategories under a specific category, you can fill in the category ID.
• Loop variableitemCommon fields:Id(Category ID),Title(Category Name),Link(Category Link),Description(Category Description) etc.

2.archiveList: Get article list

archiveListTags are to obtain the core tags of articles (or products, dependingmoduleId) listed.

• type="list": It indicates displaying in list form, usually paired withlimitParameter.
• categoryId: This is the most critical parameter, it will be connected with externalcategoryListBinding the category ID in the loop, make sure to get the articles under the current category.
• moduleId: Similarly, you need to specify the content model ID, withcategoryListofmoduleIdremain consistent.
• limit: Control the number of articles displayed under each category, for examplelimit="6"It indicates that 6 articles are displayed under each category.
• order: Specify the sorting method of the articles, for exampleorder="id desc"(Sorted by ID in descending order, i.e., the most recent published),order="views desc"(Sorted by views in descending order).
• Loop variablearchiveCommon fields:Id(Article ID),Title(Article Title),Link(Article Link),Description(Article Summary),Thumb(Thumbnail),CreatedTime(Published time),Views(Views) et al.

3.forLoop and conditional judgment

forLoop is to traversecategoryListandarchiveListThe basic way to return list data.ifCondition judgment is used to control the display of content under specific conditions, such as checking if there is a thumbnail, or handling the case of an empty list.

4.stampToDateTime formatting:

When displaying the article publish time,archive.CreatedTimeit returns a timestamp, we can usestampToDatetags to format it into an easily readable date format, such as{{stampToDate(archive.CreatedTime, "2006-01-02")}}.

5.categoryDetail: Get category details

although incategoryListofforAccess directly in a loopitem.Titleanditem.LinkBut in some cases where more detailed categorization information is needed (such as categorization imagesLogoorThumb),categoryDetailLabel combinationid=item.IdParameters will be more convenient to use.

Practical code example: Aggregate display of articles in multiple categories

Assuming we want to aggregate and display several top-level categories under the 'article model' on the homepage. You can do this in your homepage template file (for example/template/default/index.htmlAdd the following code inside the brackets:

”`twig {# External loop: get the top-level category list of the article model #} {% categoryList categories with moduleId=“1” parentId=“0” %}

{% for item in categories %}
<div class="category-block">
    {# 显示分类标题和链接 #}
    <h3 class="category-title">
        <a href="{{ item.Link }}" title="更多{{item.Title}}">{{item.Title}}</a>