How to aggregate and display a list of selected articles under multiple categories on a single page?
In website operation, we often encounter such needs: on the homepage or some special page, we can display "精选" articles from different categories, which can enrich the page content and guide users to discover more interesting information.AnQiCMS (AnQiCMS) provides very flexible and powerful features, allowing us to easily achieve this goal without complex programming knowledge.
To aggregate and display a list of selected articles under multiple categories on a single page, we mainly use the Anqi CMS's“Recommended Attributes”function as well as“Document List Tags”（archiveList).
Understand the selection mechanism and content organization of AnQi CMS
In AnQi CMS, the selected status of content is through theRecommended attribute (Flag)To be defined.When editing an article, you can select various attributes in the "Recommendation Attributes" option, such as "Top [h]", "Recommended [c]", "Slider [f]", and so on.Here, 'recommended[c]' is a very suitable attribute for marking 'selected' articles.You just need to check the corresponding "recommended" attribute when publishing or editing articles in the background to mark it as featured content.
At the same time, articles will belong to specific categories and content models.To aggregate articles under multiple categories, we need to understand the IDs of these categories.You can view and manage your categories in the Anqi CMS backend under 'Content Management' -> 'Document Category', and each category will have a unique ID.
Plan one: Display the selected article list under each category one by one
If you want the page structure to be clear, for example, "Category A SelectionThis method helps users quickly locate high-quality content in specific categories.
First, wecategoryListuse tags to obtain the list of categories to be displayed, and then, inside the loop of each category,archiveListTag to get the selected articles under this category.
{# 假设我们要获取ID为1、2、3的分类，并逐个展示其下的精选文章 #}
{# 您可以在后台“内容管理”->“文档分类”中查看分类ID #}
{% categoryList targetCategories with moduleId="1" parentId="0" %} {# 获取所有顶级文章分类，moduleId=1通常代表文章模型 #}
{% for category in targetCategories %}
{# 仅展示您感兴趣的分类，例如ID为1,2,3的分类 #}
{% if category.Id == 1 or category.Id == 2 or category.Id == 3 %}
<div class="category-featured-section">
<h3><a href="{{ category.Link }}">{{ category.Title }}</a> 下的精选文章</h3>
<ul>
{# 使用archiveList获取当前分类（category.Id）下，推荐属性为'c'（精选）的文章，限制显示5篇，并按浏览量倒序排序 #}
{% archiveList featuredArticles with categoryId=category.Id flag="c" limit="5" order="views desc" %}
{% for article in featuredArticles %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
<p>{{ article.Description|truncatechars:80 }}</p> {# 截取文章描述前80个字符 #}
<span>发布日期: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</li>
{% else %}
{# 如果当前分类下没有找到精选文章，显示此提示 #}
<li>当前分类暂无精选文章可供展示。</li>
{% endfor %}
{% endarchiveList %}
</ul>
<a href="{{ category.Link }}" class="view-more">查看更多 {{ category.Title }} 文章</a>
</div>
{% endif %}
{% endfor %}
{% endcategoryList %}
In this code, we first go throughcategoryListGot the top-level article categories. While traversing these categories, we throughifThe condition judgment only processes those specific categories that we want to display (for example, ID 1, 2, 3). Then, within each target category, use it againarchiveListThe key point this time iscategoryId=category.Id(Make sure to retrieve the articles of the current category) andflag="c"(Filter out the selected articles).limitandorderParameters can help us control the display quantity and sorting method.
Plan two: Aggregate display of all selected articles in specified categories
If you want to display selected articles from different categories in a list without distinguishing the category affiliation and emphasize the 'selected' attribute of the content, then you can adopt this more direct aggregation method.
This implementation is more concise, using a direct one.archiveListTag it and it is.archiveListofcategoryIdThe parameter supports passing multiple category IDs separated by commas, which is the key to our aggregation of articles.
<div class="all-featured-articles-list">
<h2>全站精选文章聚合</h2>
<ul>
{# 获取ID为1、2、3的分类下，推荐属性为'c'（精选）的文章，限制显示10篇，并按ID倒序（最新发布） #}
{% archiveList aggregatedFeaturedArticles with categoryId="1,2,3" flag="c" limit="10" order="id desc" %}
{% for article in aggregatedFeaturedArticles %}
<li>
<a href="{{ article.Link }}">{{ article.Title }}</a>
<p class="article-meta">
{# 使用categoryDetail获取文章所属分类的名称，增强上下文信息 #}
<span class="article-category">所属分类: {% categoryDetail with name="Title" id=article.CategoryId %}</span>
<span class="article-date">发布日期: {{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</p>
<p>{{ article.Description|truncatechars:120 }}</p> {# 截取文章描述前120个字符 #}
</li>
{% else %}
{# 如果没有找到任何精选文章，显示此提示 #}
<li>目前暂无精选文章可供展示。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
In this example,categoryId="1,2,3"LetarchiveListTags fetch articles from these three categories at once, andflag="c"ensuring that only articles marked as "recommended" are listed. We have also added an extracategoryDetailTags to display the category of each article, which is very useful in the aggregated list, allowing users to understand the source of the content.
Optimization and注意事项
- Template path:Make sure your template file is placed in
/templateUnder the directory, and create the corresponding files according to the organization mode (folder organization or flattened) you choose. For example, if you aggregate and display on the homepage, it is usually inindex/index.htmlorindex.htmlAdd the above code. - Style beautification:This code only provides the basic HTML structure.To make the page look more beautiful, you need to combine CSS for styling design.The template design of AnQi CMS is very flexible, you can freely add style files.
- The definition of 'Featured':Make sure to correctly set the 'Recommendation Attribute (Flag)' to the articles you want to display as 'Featured' in the background management.
cIf the article does not set this attribute, it will not be