How to use the `archiveList` tag to display the latest article list on the AnQiCMS homepage?

In AnQiCMS, the homepage of the website is often the first window for visitors to understand the content of the website.How to efficiently and dynamically display the latest articles to attract visitors to continue browsing is the key to content operation.AnQiCMS provides a flexible and easy-to-use template tag system, wherearchiveListThe label is the core tool to achieve this goal.

UnderstandingarchiveListThe core role of tags

archiveListTags are a powerful tool in the AnQiCMS template system, allowing you to dynamically call lists of articles (or other content models, such as products) at any location on the website. Whether you need to display the latest published articles, the most viewed articles, or content under specific categories,archiveListCan be achieved through simple parameter configuration.

To achieve displaying the latest article list on the homepage, we will mainly focus onarchiveListthe several key parameters:

• typeThis parameter determines the type of list. For a regular content list, we will usually set it to"list"It means that only a specified number of contents will be displayed without generating pagination.
• orderIt defines the sorting method of the articles. To display the 'latest' articles, we will sort them in reverse order by publication time or ID. In AnQiCMS, "id desc"(Sorted by ID in descending order) or"CreatedTime desc"(Sorted by creation time in descending order) is a common choice.
• limit: This parameter is used to control the number of articles displayed, for example"10"means displaying the latest 10 articles.
• moduleId: If your website has multiple content models (such as articles, products, etc.), you can usemoduleIdThe parameter specifies only to display articles of a specific model, avoiding product information in the article list. By default, the article model ID is usually1.

The actual operation of displaying the latest article list on the AnQiCMS homepage

Now, let's take a step-by-step look at how to display the latest articles on your AnQiCMS homepage template.

Step 1: Determine your homepage template file.

In AnQiCMS, the homepage template file is usually located in your theme directory.index/index.htmlOr it is directly.index.htmlYou need to go to the "template design" feature in the background, find and edit this file.

Step Two: InsertarchiveListTag

After determining the position of the latest article to be displayed on the homepage, you can insertarchiveLista tag. This tag defines a variable, for example, namedarchivesThis is used to store the list of article data obtained.

{% archiveList archives with type="list" order="id desc" limit="10" %}
    {# 接下来在这里循环展示文章内容 #}
{% endarchiveList %}

In this code block:

• archivesIt is a custom variable name that will be used to access the data of each article later.
• type="list"We expect to get a simple list of articles.
• order="id desc"Tell the system to sort articles by ID in descending order, as new articles typically have larger IDs, which can effectively retrieve the latest articles.
• limit="10"Then specified to display only the latest 10 articles.
• If you only want to display the content under the "Article Model", you can addmoduleId="1"(assuming your article model ID is 1), this can more accurately control the display content type.

Step three: Loop to display article information

archiveListAfter the tag gets the article list, you need to useforto loop througharchivesa variable, and extract the specific information of each article from it to display.

{% archiveList archives with type="list" order="id desc" limit="10" %}
    <ul>
    {% for item in archives %}
        <li>
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>{{ item.Description|truncatechars:100 }}</p> {# 截取前100个字符作为简介 #}
            <div>
                <span>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
                <span>阅读量: {{ item.Views }}</span>
                {% if item.Thumb %}
                    <img src="{{ item.Thumb }}" alt="{{ item.Title }}" style="width: 100px; height: auto;">
                {% endif %}
            </div>
        </li>
    {% empty %}
        <li>目前还没有最新文章哦，敬请期待！</li>
    {% endfor %}
    </ul>
{% endarchiveList %}

In this code block:

• {% for item in archives %}The loop will process each of the latest articles in turn.itemIt represents the current article in each loop.
• {{ item.Link }}and{{ item.Title }}It will obtain the link and title of the article.
• {{ item.Description|truncatechars:100 }}It will obtain the description of the article and use it.truncatecharsThe filter truncates it to the first 100 characters to prevent the content from being too long and affecting the layout.
• {{ stampToDate(item.CreatedTime, "2006-01-02") }}It is a very useful time formatting function in AnQiCMS.item.CreatedTimeIs the creation timestamp of the article, through"2006-01-02"This Go language style date format, you can display it as the common "year-month-day" format.
• {{ item.Views }}Displays the number of views of the article.
• {% if item.Thumb %}Check if the article has a thumbnail and displayitem.Thumb.
• {% empty %}Block is a very friendly design. Ifarchivesthere are no articles in the list, it will display{% empty %}The content behind, not empty, enhances user experience.

Optimization and tips

• Flexibility in date formatting: stampToDateThe function is very flexible, you can adjust the second parameter according to your needs to display different date and time formats, such as"2006年01月02日 15:04"It will be displayed as "Year-Month-Day Hour:Minute".
• Summary content truncation: truncatecharsFilter (character truncation) andtruncatewordsThe filter (word truncation) can help you control the length of the article summary and keep the homepage tidy.
• Image processing: item.ThumbIt usually points to a thumbnail automatically generated by the system, if you want to use the article's featured image or other images, you can tryitem.Logooritem.Images(Images is an array of images, which needs to be traversed in a loop).
• SEO friendly:The latest article list helps search engine spiders discover new content, combined with the built-in SEO features of AnQiCMS, it can further improve the inclusion efficiency and ranking of new articles.

By following these steps, you can elegantly display the latest article list on the AnQiCMS homepage.The template tag design of AnQiCMS makes content display intuitive and efficient, allowing you to focus on content creation and operation.

Frequently Asked Questions (FAQ)

1. I want to display more of the latest articles on the homepage, which parameter should I modify?

You need to adjust to display more of the latest articles.archiveListin the labellimitparameters. For example, if you want to display 15 articles, you shouldlimit="10"is modified tolimit="15"Just do it.

2. How can I display the latest articles in a specific category?

If you only want to display the latest articles under a specific category, you canarchiveListthe tag withcategoryIdParameter. You need to find the category ID in the background first (usually you can see it in the URL of the category management page or the edit page), and then use it like this:{% archiveList archives with type="list" order="id desc" limit="10" categoryId="你的分类ID" %}.

3. Why did I configure the latest article list, but the homepage does not display any content?

If the homepage does not display content, there may be several reasons:

• No articles to display:Check if your backend has published the article and the article status is 'Published'.
• moduleIdConfiguration error:If you have usedmoduleIdplease confirm that the value corresponds correctly to the article content model.
• limitororderQuestion:ChecklimitIs the value reasonable,orderIs the parameter correct (such as"id desc")
• Template file not saved or cache problem:Make sure the template file is saved, and try to clear the AnQiCMS system cache.
• Loop internal error:CheckforIs there a syntax error in the loop's code, causing it to not render normally? Try to simplify.forCheck the code within the loop step by step.