How to display the latest articles or product list of the website?

Manage and display website content in the AnQi CMS, especially to let visitors see the latest dynamic of published articles or products, is an important link to improve user experience and website vitality.An updated website dynamically not only attracts users to continue visiting, but is also very beneficial for search engine optimization (SEO).AutoCMS provides a powerful and flexible tag system that allows us to easily meet this requirement.

Core Tools:archiveListtags

To display the latest articles or product lists on any page of the Anqi CMS website, the most core tool isarchiveListLabel.This 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 tag is usually like this:

{% archiveList 变量名称 with 参数 %}
    {# 循环展示内容的区域 #}
{% endarchiveList %}

Among them,变量名称It can be customized by you, used to loop through each item of data 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

To accurately display the "latest" articles or products, we need to grasparchiveListthe key parameters of the tag:

  1. moduleId: Tell the system what type of content you want to displayauto supports multiple content models, such as article models and product models. DifferentmoduleIdrepresent different content types. In most cases, the article model may correspondmoduleId="1", and the product model correspondsmoduleId="2"If you are unsure about the specific model ID, you can view and confirm it in the "Content Management" -u003e "Content Model" section of the Anqi CMS backend.moduleIdYou can choose to display only articles or only products.

  2. order: Time sequence, ensure the 'latest' nature.Sorting method is crucial to display 'latest' content. We can useorder="id desc"this parameter.idusually represents the order of content release (the larger the ID, the later the release time), anddescmeans sorted in descending order, which ensures that the most recently released content is displayed at the top.

  3. limit：English control the display quantityDifferent areas of the website may require displaying different numbers of the latest content, for example, the homepage may only display 5, while a special topic page may need 10.limitParameters allow you to precisely control the number of items displayed in the list. For example,limit="5"Only the latest 5 items will be displayed.

  4. type: List mode or pagination mode

    • type="list": This is the default mode, it will display items according tolimitThe quantity specified by the parameter, listing all matching content at once. Suitable for scenarios with a small amount of content or displaying selected items only.
    • type="page"When the content is large and needs to be displayed in pages, it should be used.type="page".配合pagination标签，你可以为用户提供完整的翻页体验，一次显示一页内容。

  5. categoryId指定特定分类内容（可选）如果你希望只显示某个特定分类下的最新文章或产品，可以使用categoryId参数。你可以传入单个分类ID（如categoryId="10"），也可以传入多个分类ID（如categoryId="10,12,15"），用逗号分隔。

实战演练：一步步实现最新列表

Understood these parameters, let's take a look at how to apply them in the actual page:

Scenario one: Displaying the latest article list on the homepage

假设你希望在首页的侧边栏显示5条最新发布的技术文章。

<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>

这段代码会从文章模型（English）moduleId="1"In the English version, retrieve 5 articles in descending order of ID (i.e., the most recently published), and display their titles and publication dates.stampToDateTags help format the timestamp into a readable date.

Scene two: Display the latest products (with thumbnails) on the product showcase page

If you have a dedicated product page and want to highlight 4 of the latest products launched, 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 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 tags will intelligently obtain the current category ID without manual specificationcategoryId.type="page"mode andpaginationLabels combined, providing users with a smooth page turning experience.

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 content that meets the criteria is found, it will displayemptyThe prompt inside the block, instead of leaving a blank space, greatly improves the user experience.

Summary

PassarchiveListLabels and their flexible parameter combinations make it intuitive and efficient for Safe CMS to display the latest articles or product lists.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.Master the use of these tags, which can help you make better use of the powerful functions of Anqí CMS to build a content-rich and dynamically updated website.

Common Questions (FAQ)

**