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

In AnQiCMS, the homepage is the first stop for visitors to understand your content, so it is crucial to display the latest and most relevant articles efficiently. AnQiCMS provides a powerful and easy-to-use template tag system, wherearchiveListLabels are your powerful assistant for displaying the latest articles of specified categories accurately on the homepage.

archiveListLabel introduction: The core of dynamic content on the homepage.

archiveListThe label is the core tool used to obtain the document list in the AnQiCMS template engine.It can not only retrieve the general article list but also filter, sort flexibly, and even implement pagination display.archiveListCan easily cope with. By reasonably configuring its parameters, you can precisely control the range and presentation of the content to be displayed.

Core parameter explanation: Accurately locate your article list.

To display the latest article list of a specified category on the AnQiCMS homepage, we need to understandarchiveListthe key parameters of the tag:

  • moduleIdThis 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 create 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 of 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 example,limit="5"The latest 5 articles will be displayed. In scenarios like the homepage, it is common to limit the number of displayed items to keep the page simple.
  • order: Used to specify the sorting method of the article. To get the 'latest' articles, you can useorder="id desc"ororder="CreatedTime desc", it means sorting by article ID or creation time in reverse order.
  • type: This parameter determines the type of the list. For the homepage display, we usually only want to list a few articles without pagination, and it can be settype="list". If you need pagination, you can set it totype="page"and combine.paginationUse the label.

Practice exercise: 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 each showing 5 articles.

Firstly, you need to log in to the AnQiCMS backend, find the "News Center" and "Industry Dynamics" categories under "Content Management" and "Document Category10，“Industry News” ID is12.

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

Openindex/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.newsArchivesandtrendArchivesthe variable.
  3. moduleId="1"Ensure that we only get the content under the article model.
  4. categoryId="10"andcategoryId="12"Specifically 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 obtained articles,itemThe variable represents a specific article in each iteration.
  9. We displayed the title of the article (item.Title) and the link (item.Link)、thumbnail (item.Thumb) and the introduction (item.Description) and the publication date (stampToDate(item.CreatedTime, "2006-01-02")).
    • item.Description|truncatechars:100usedtruncatecharsFilter, truncate the article summary to 100 characters and add...to maintain brevity.
    • stampToDate(item.CreatedTime, "2006-01-02")Then, format the article's Unix timestamp.年-月-日The readable date format.
    • onerror="this.src='/static/images/default-thumb.webp'"This is a practical tip, when there is no 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 message 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 the two specified categories displayed neatly in front of your visitors.

Summary

AnQiCMSarchiveListThe label provides great flexibility for website operators, allowing you to precisely control the display of content according to your business needs at any location on the website. Whether it's the homepage, sidebar, or special topic page, combinedcategoryId/limit/orderYou can easily build dynamic and engaging article lists with parameters, effectively enhancing the website's user experience and content marketing effectiveness.Master the use of this tag, and it will make your AnQiCMS website more vibrant and expressive.

Common Questions and Answers (FAQ)

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

A1:You can log in to the AnQiCMS backend, navigate to the "Content Management" -> "Document Category" page.In this page, you will see the list of all categories created.Each category line will usually display its unique numeric ID on the far left.id=The parameter value is the category ID.

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