How to use the `archiveList` tag to display the latest article list of a specified category on the AnQiCMS homepage?

In AnQiCMS, the homepage is the first station for visitors to understand your content, therefore, it is crucial to effectively display the latest and most relevant articles. AnQiCMS provides a powerful and easy-to-use template tag system, among whicharchiveListTags are the powerful assistants that allow you to accurately display the latest articles of the specified category on the homepage.

archiveListTag summary: The core of the dynamic content on the homepage.

archiveListThe tag is the core tool used to retrieve document lists in the AnQiCMS template engine.It can not only obtain the list of regular articles, but also flexibly filter, sort, and even implement pagination display.Whether it is necessary to display popular articles in the sidebar or highlight the latest dynamic of a specific category on the homepage,archiveListCan handle it easily. By reasonably configuring its parameters, you can accurately control the range and presentation of the content to be displayed.

Core parameter analysis: accurately locate your article list

To display the latest articles of a specified category on the AnQiCMS homepage, we need to understandarchiveListSeveral key parameters of the tag:

• moduleId: This parameter is used to specify the model ID of the content you want to retrieve. In AnQiCMS, articles usually belong to the 'Article Model', and the default ID is1. If you have created other content models (such as "product model"), you need to set the corresponding ID according to the actual situation.
• categoryId: This is the key parameter for the specified category article. You can pass the ID of a single category (for examplecategoryId="1"), or pass multiple category IDs, separated by English commas,(for examplecategoryId="1,2,3"）。This means you can display multiple related categories of articles in a list at the same time.
• limit: Determines the number of articles you want to display. For examplelimit="5"It will display the latest 5 articles. In such a scenario on the homepage, we usually limit the number of displayed items to keep the page concise.
• order: Used to specify the sorting method for articles. To get the 'latest' articles, you can useorder="id desc"ororder="CreatedTime desc", indicating that articles are sorted in reverse order by ID or creation time.
• type: This parameter determines the type of list. For the home page display, we usually only want to list a few articles without pagination, and in this case, you can settype="list". If you need pagination, you can set it totype="page"and combiningpaginationlabel usage

Practice session: Display the latest articles of a specific category on the homepage

Assuming your website has a "News Center" category (category ID 10) and an "Industry Dynamics" category (category ID 12), you want to display the latest articles from these two categories on the homepage, with 5 articles displayed for each.

Firstly, you need to log in to the AnQiCMS backend, find the ID of the two categories 'News Center' and 'Industry Dynamics' under 'Content Management' and 'Document Category'. Assuming the ID of 'News Center' is10The ID of the "Industry Dynamics" is12.

Next, we need to edit the homepage template file of the current topic. Usually, the homepage template file is located/template/您的主题目录/index/index.html.

Open.index/index.htmlFile, you can insert code like this:

{# 在首页展示“新闻中心”分类的最新 5 篇文章 #}
<section class="latest-news">
    <h2>新闻中心</h2>
    <ul>
        {% archiveList newsArchives with moduleId="1" categoryId="10" limit="5" order="id desc" type="list" %}
            {% for item in newsArchives %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" onerror="this.src='/static/images/default-thumb.webp'">
                        <h3>{{ item.Title }}</h3>
                        <p class="summary">{{ item.Description|truncatechars:100 }}</p>
                        <span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
            {% empty %}
                <li>暂无新闻内容。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

{# 在首页展示“行业动态”分类的最新 5 篇文章 #}
<section class="industry-trends">
    <h2>行业动态</h2>
    <ul>
        {% archiveList trendArchives with moduleId="1" categoryId="12" limit="5" order="id desc" type="list" %}
            {% for item in trendArchives %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        <img src="{{ item.Thumb }}" alt="{{ item.Title }}" onerror="this.src='/static/images/default-thumb.webp'">
                        <h3>{{ item.Title }}</h3>
                        <p class="summary">{{ item.Description|truncatechars:100 }}</p>
                        <span class="date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                    </a>
                </li>
            {% empty %}
                <li>暂无行业动态。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</section>

In this code block:

1. We use<section>Tags clearly separate the list of articles in each category and add titles<h2>.
2. {% archiveList newsArchives with ... %}and{% archiveList trendArchives with ... %}Loaded two different article lists and stored the results innewsArchivesandtrendArchivesthe variable.
3. moduleId="1"Ensure that we only get the content under the article model
4. categoryId="10"andcategoryId="12"Exactly specified the category to be retrieved.
5. limit="5"Limit the number of articles in each list to 5.
6. order="id desc"Ensures that the latest articles are obtained.
7. type="list"Indicates that this is a simple list display without pagination.
8. {% for item in newsArchives %}Loop through the articles obtained,itemThe variable represents a specific article each time in the loop.
9. We displayed the title of the article (item.Title) and link (item.Link) as well as the thumbnail (item.Thumb) and the synopsis (item.Description) and the publication date (stampToDate(item.CreatedTime, "2006-01-02")).
   • item.Description|truncatechars:100usedtruncatecharsA filter that truncates the article summary to 100 characters and adds it at the end...to keep the summary concise.
   • stampToDate(item.CreatedTime, "2006-01-02")Then the article's Unix timestamp is formatted as年-月-日Readable date format.
   • onerror="this.src='/static/images/default-thumb.webp'"This is a practical tip, when the article does not have a thumbnail or the thumbnail fails to load, a default placeholder will be displayed automatically.
10. {% empty %}The block is used to display a friendly prompt when there are no articles under the specified category.

After saving the template file, refresh your website's homepage, and you will see the latest article list of two specified categories, neatly displayed in front of your visitors.

Summary

AnQiCMS'archiveListTags provide website operators with great flexibility, allowing you to precisely control the display of content at any location on the website. Whether it's the homepage, sidebar, or special page, combinedcategoryId/limit/orderWith these parameters, you can easily build dynamic and attractive article lists, effectively improving the user experience and content marketing effect of your website.Master the use of this tag, and it will make your AnQiCMS website more vibrant and expressive.

Frequently Asked Questions (FAQ)

Q1: How to view the category ID in the AnQiCMS backend?

A1:You can log in to the AnQiCMS backend and navigate to the "Content Management" -> "Document Category" page.On this page, you will see the list of all created categories.The leftmost side of each category row usually displays its unique numeric ID.Moreover, when you click on a category to edit, the URL in the browser address bar will also includeid=The parameter value is the category ID.

**Q2: I want to display all categories on the homepage