In AnQi CMS, it is an important aspect to manage and display website content, especially to allow visitors to see the latest published articles or product updates, which is crucial for enhancing user experience and website vitality.A dynamically updated website can not only attract users to keep visiting, but also is very beneficial for search engine optimization (SEO).AnQi CMS provides a powerful and flexible tag system that allows us to easily meet this requirement.
Core Tool:archiveListTag
The most essential tool is to display the latest articles or product lists on any page of the Anqing CMS website,archiveListThe tag is specifically used to retrieve the list data of various documents (including articles, products, etc., because in Anqi CMS, they are all managed as a form of 'document').
UsearchiveListThe basic structure of the label is usually like this:
{% archiveList 变量名称 with 参数 %}
{# 循环展示内容的区域 #}
{% endarchiveList %}
Among them,变量名称Can be customized, used to loop through each item within the tag;参数It is the key you use to filter, sort, and limit the display of the list.
Understand the key parameters, customize your list.
We need to masterarchiveListSeveral key parameters of the tag:
moduleId: Tell the system what type of content you want to displayThe AnQi CMS supports various content models, such as article models and product models. DifferentmoduleIdrepresent different content types. Usually, the article model may correspond tomoduleId="1"And the product model corresponds tomoduleId="2"If you are unsure of the specific model ID, you can check and confirm it in the Anqi CMS backend under "Content Management" -> "Content Model". By specifyingmoduleIdYou can choose to only display articles or only display products.order: Chronological order, ensure the 'latest' natureThe sorting method is crucial to display the 'latest' content. We can useorder="id desc"this parameter.idIt usually represents the order of content release (the larger the ID, the later the release time), anddescmeans in descending order, ensuring that the latest released content is at the front.limit: Exact control of display quantityDifferent areas of the website may need to display different quantities of the latest content, for example, the homepage may only display 5 items, while a special topic page may need 10.limitThe parameter allows you to precisely control the number of items displayed in the list. For example,limit="5"It will only display the latest 5 items.type: List mode or pagination modetype="list": This is the default mode, which will display items in the order oflimitThe specified number, listing all qualified content at once. Suitable for scenarios where the content volume is not large or only a few selected items are displayed.type="page"When the content is large and needs to be displayed in pages, it should be usedtype="page". Withpaginationtags, you can provide users with a complete page turning experience, displaying one page of content at a time.
categoryIdSpecify a specific category content (optional)If you want to display the latest articles or products under a specific category only, you can usecategoryIdparameter. You can pass a single category ID, such ascategoryId="10") You can also pass multiple category IDs (such ascategoryId="10,12,15"), separated by commas.
Practice: Step by step to implement the latest list
Understood these parameters, let's see how to apply them in the actual page:
Scenario one: Display the latest article list on the homepage
Suppose you want to display 5 of the latest published technical articles in the sidebar on the homepage.
<div class="latest-articles-widget">
<h2>最新技术文章</h2>
<ul>
{% archiveList latestTechArticles with moduleId="1" order="id desc" limit="5" %}
{% for item in latestTechArticles %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
<time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
</li>
{% empty %}
<li>暂时还没有发布任何文章。</li>
{% endfor %}
{% endarchiveList %}
</ul>
</div>
This code will retrieve from the article modelmoduleId="1"In order, sorted by ID in descending order (i.e., the most recently published), retrieve 5 articles and display their titles and publication dates.stampToDateTags help us format timestamps into readable dates.
Scene two: Display the latest products listed on the product display page (with thumbnails)
If you have a dedicated product page and want to highlight 4 of the latest products listed, along with their thumbnails:
<div class="new-products-section">
<h2>新品推荐</h2>
<div class="product-grid">
{% archiveList newArrivalProducts with moduleId="2" order="id desc" limit="4" %}
{% for item in newArrivalProducts %}
<div class="product-card">
<a href="{{ item.Link }}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="product-thumbnail">
<h3>{{ item.Title }}</h3>
</a>
</div>
{% empty %}
<p>抱歉，目前还没有新品上架。</p>
{% endfor %}
{% endarchiveList %}
</div>
</div>
Here we specifymoduleId="2"to retrieve product data and utilizeitem.ThumbShow the product thumbnail.
Scenario three: Display the latest content under the category on the category page (with pagination)
When you enter an article category page, you usually want to see the latest articles in that category and be able to browse through pages.
<div class="category-articles">
<h1>{{ category.Title }} - 最新内容</h1>
<ul>
{% archiveList articlesPaged with type="page" order="id desc" limit="10" %} {# categoryId 会自动获取当前分类ID #}
{% for item in articlesPaged %}
<li>
<a href="{{ item.Link }}">
{% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" width="100">{% endif %}
<span>{{ item.Title }}</span>
<time>{{ stampToDate(item.CreatedTime, "2006-01-02") }}</time>
</a>
</li>
{% empty %}
<li>此分类下暂时没有内容。</li>
{% endfor %}
{# 分页导航 #}
{% pagination pages with show="5" %}
<nav class="pagination-nav">
{% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}" class="prev-page">上一页</a>{% endif %}
{% for pageItem in pages.Pages %}
<a href="{{ pageItem.Link }}" class="page-number {% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
{% endfor %}
{% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}" class="next-page">下一页</a>{% endif %}
</nav>
{% endpagination %}
{% endarchiveList %}
</ul>
</div>
In this example, when the page itself is a category page,archiveListthe tag will intelligently obtain the current category ID without manual specificationcategoryId.type="page"pattern withpaginationLabel combination provides a smooth page scrolling experience for users.
Tip: Friendly prompt when there is no content.
In all thearchiveListlabels inside, we have used{% empty %} ... {% endfor %}Structure. This is a very practical feature, whenarchiveListNo matching content is found, it will displayemptyThe prompt within the block, rather than leaving a blank space, greatly enhances the user experience.
Summary
ByarchiveListThe combination of tags and flexible parameters, Anqi CMS makes it intuitive and efficient to display the latest articles or product lists on a website.Whether it is the selected content on the homepage or the detailed list on the category page, we can easily customize according to actual needs.Mastering the use of these tags can help you better utilize the powerful functions of Anqicms, creating a website with rich content and dynamic updates.
Frequently Asked Questions (FAQ)
**