How to filter and display a list of specific content based on recommendation attributes (such as "Headline
When operating a website, we often need to highlight certain important or recommended content, such as placing the latest news at the "headlines" or marking popular products as "recommended".AnQiCMS provides a flexible recommendation feature that allows you to easily filter and display specific content, thereby better guiding users to browse and enhance content value.
Understand the recommended attributes and their functions
Recommended properties in AnQiCMS, which can be considered as a special tag for content, used to mark its importance and display method on the website. These properties are diverse, such as:
- Headline [h]: Used for the most important and most concerned content on the website.
- Recommend [c]: Generally refers to the content that needs to be specially recommended to users.
- Slide [f]: Often used for content in the carousel or focus area.
- Special recommendation [a]：has special value or content recommended for long term.
- Scroll [s]：suitable for display in scrolling areas (such as bulletin boards).
- Image [p]：indicates that the content contains important images, suitable for image lists display.
- Jump [j]Click to directly jump to the external link instead of the content detail page.
These properties are not mutually exclusive, you can select multiple recommended properties for a document at the same time.For example, an important article can be set as both 'headlines' and 'images'.By flexibly using these properties, you can make the website content more rich in layers and dynamics.
Set recommended properties in the AnQiCMS backend:
When you create or edit documents in the background, you will find a setting item named "Recommended Properties".Here is an example of an article, go to the 'Content Management' module to enter the interface for 'Publish Document' or edit an existing document.In the middle of the document editing interface, there is usually a 'recommended attributes' selection area.You can check one or more corresponding properties based on the importance of the content.After saving the document, these properties will take effect, waiting to be called in the frontend template.
Call specific recommended content in the template
To display these content with specific recommendation attributes on the website front-end, we need to use the AnQiCMS provided in the template file.archiveListThe tag is powerful, able to filter and output content lists based on various conditions.
The key is to filter content based on recommended attributes.archiveListlabel'sflagParameter. You just need to assign the letter code of the recommended attribute you need toflagthe parameter. For example, if you want to display "Top Stories" content, set it toflag="h"; To display "recommended" content, set it toflag="c".
exceptflagparameters, you can also combine other parameters to more accurately control the display of content:
moduleId: Specify the model ID of the content. For example,moduleId="1"typically represents an article model,moduleId="2"Represents a product model. This ensures that you are filtering for specific types of content.categoryId: Specify the category ID of the content. If you want to display recommended content under a specific category, you can use this parameter. For example,categoryId="3"Only recommended content under category ID 3 will be displayed.limit: Controls the number of displayed items. For example,limit="5"Up to 5 items will be displayed at most.order: Define the sorting method of the content. Common options includeid desc(Sorted by publication time in reverse order, i.e., the most recent first),views desc(sorted by view count in reverse, i.e., the most popular).
It should be noted that in a singlearchiveListTagged,You can only use one recommended attribute for filtering at a time. If you need to display the content of multiple recommended attributes, you can use multiple separate onesarchiveListCall the tag.
Template code example and explanation
Demonstrate how to filter and display the content list according to recommended properties in the AnQiCMS template with two specific examples.
Example 1: Display the 5 latest 'Top Stories' articles on the homepage
Assuming your website's homepage has a "Latest Headlines" section, you want to display the latest 5 articles marked as "Headlines."
{# 首页热门头条文章区域 #}
<div class="homepage-headlines">
<h2>最新头条</h2>
<ul class="article-list">
{% archiveList headlines with moduleId="1" flag="h" limit="5" order="id desc" %}
{% for item in headlines %}
<li class="article-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p class="description">{{ item.Description|truncatechars:100 }}</p> {# 截取前100个字符作为简介 #}
<span class="publish-date">发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
</li>
{% empty %}
<li class="no-content">暂无头条文章可供显示。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
Code analysis:
{% archiveList headlines with ... %}This is the core tag,headlinesIs the variable name you defined for the content list obtained.moduleId="1"Specify that we want to get the content of the article model (assuming the article model ID is 1).flag="h": Precisely filter out all content marked as "Top" attribute.limit="5": Limit to displaying up to 5 articles.order="id desc": Sort by article ID in descending order, which usually means displaying the latest published articles.{% for item in headlines %}：Traverseheadlineseach article in the variable.{{ item.Link }}Get the article link.{{ item.Title }}Get the article title.{{ item.Description|truncatechars:100 }}: Get the article description and usetruncatecharsa filter to truncate the first 100 characters.{{ stampToDate(item.CreatedTime, "2006-01-02") }}: Format the article's creation timestamp into a string of "Year-Month-Day".{% empty %}: It is a very practical tag, whenarchiveListIt will display when no content meets the conditions.{% empty %}the content in the block to avoid blank pages or errors.
Example two: Display 4 'recommended' products in the sidebar of the product category page
Assuming your product category page sidebar needs to display 4 products marked as "recommended", and these products should belong to the current category, sorted by views in descending order.
`twig {# Product category page sidebar recommended products #}