How to use the `archiveList` tag to display the latest 10 article titles and summaries on the homepage?

In Anqi CMS, the homepage often plays a crucial role in displaying the latest content and attracting visitors' attention. If you want to clearly list the titles and summaries of the latest 10 articles on the homepage,archiveListThe tag is a powerful tool to achieve your goal. It is flexible and easy to use, allowing you to easily present dynamic content in the most prominent position on the website.

We need to usearchiveListSeveral core parameters are used to filter and display data. This tag is usually used to obtain lists of various documents, whether articles, products, or other custom content models, it can be very useful.

First, you need to open the homepage template file of your website. Depending on the organization of your template, this may betemplate/your_template_name/index/index.htmlortemplate/your_template_name/index.html.

In the template file, we will construct it in this wayarchiveListTags:

{% archiveList archives with type="list" limit="10" order="id desc" moduleId="1" %}
    {% for item in archives %}
    <div class="latest-article-item">
        <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
        <p>{{item.Description|safe}}</p>
        <span class="article-date">发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
        <a href="{{item.Link}}" class="read-more">阅读详情</a>
    </div>
    {% empty %}
    <p>暂时没有文章可供展示。</p>
    {% endfor %}
{% endarchiveList %}

Let's parse this code step by step, and see what each parameter and part does:

• {% archiveList archives with ... %}This isarchiveListThe start of a tag,archivesThis is the variable name given to the list of articles obtained. Inside the tag, we pass various parameters through thewithkeywords.
• type="list"This parameter specifies that we are getting a list of a fixed number, not a paginated list. Because we explicitly want to display 10 articles, solisttype is more suitable.
• limit="10"This is the key to controlling the display of article numbers. It is set to10This means that only the latest 10 articles are obtained.
• order="id desc"This parameter determines the sorting method of the articles.id descMeans to sort by article ID in descending order. In Anqi CMS, article IDs are usually self-increasing, so the larger the ID, the later the article was published, ensuring that the latest published articles are obtained.You can also chooseorder="CreatedTime desc"It will sort the articles in reverse order based on the creation time, with a similar effect.
• moduleId="1": Anqi CMS supports various content models (such as articles, products, pages, etc.).moduleId="1"It is usually used to specify that we only want to get the content under the "article model".If your article model ID is not 1, please adjust it according to the actual situation. You can view or edit the model ID in the background "Content Management" -> "Content Model".
• {% for item in archives %}This is a loop statement, it will traversearchiveListTagged data of each article obtained, and the data of the current article is assigned toitemVariable.
• <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>: Inside the loop, we useitem.TitleTo get the title of the article and useitem.LinkGenerate a link to the article details page.
• <p>{{item.Description|safe}}</p>:item.DescriptionIt is the introduction of the article. Here, an additional|safefilter is used. If the article introduction may contain HTML tags (such as bold, italic, etc.),|safeThe filter ensures that these HTML tags are parsed correctly rather than displayed as plain text.
• <span class="article-date">发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>:item.CreatedTimeIs the creation time of the article (a timestamp). We usestampToDateThe function formats it into a readable date format, for example, “2006-01-02” will be displayed as “2023-10-27”.
• {% empty %}IfarchiveListThe tag did not find any articles that meet the criteria (for example, the website has just been set up and no articles have been published),emptyThe content within the tags will be displayed, which is a friendly user prompt.
• {% endfor %}and{% endarchiveList %}: They are loop andarchiveListthe end tag marker.

Place this code in the appropriate position of your homepage template, save it, and refresh your website homepage. You should then see the latest 10 article titles and summaries neatly arranged on the page.You can add CSS styles to these elements based on your website design to make them look more beautiful.

Frequently Asked Questions (FAQ)

How to only display the latest 10 articles in a specific category instead of the latest articles from the entire site?

If you want to only display the latest articles in a specific category, you canarchiveListadd acategoryIdParameters. For example, if you want to display the category ID of5article, you can modify the code to:

{% archiveList archives with type="list" limit="10" order="id desc" moduleId="1" categoryId="5" %}
    {# ... 循环内容不变 ... #}
{% endarchiveList %}

You can find the corresponding category ID in the "Content Management" -> "Document Category" of the Anqi CMS backend. If you need to display articles of multiple categories, the IDs can be separated by commas, for example,categoryId="5,8,12".

2. How can I modify it to display not the latest article but the top 10 articles with the highest views?

To display the article with the highest views, just modifyorderthe parameter.order="id desc"changed toorder="views desc",viewsRepresents the number of page views of the article.

{% archiveList archives with type="list" limit="10" order="views desc" moduleId="1" %}
    {# ... 循环内容不变 ... #}
{% endarchiveList %}

Thus,archiveListThe tags will be sorted from high to low according to the number of page views of the article, thus displaying the 10 most popular articles on the website.

3.type="list"andtype="page"What is the difference and when should it be usedtype="page"?

type="list"Used to get a fixed number of article lists, as we do in this example.It does not automatically generate pagination navigation, suitable for displaying a small number of articles in the sidebar, fixed area on the homepage, and other places.

type="page"It is used to retrieve a paginated list of articles. When you need to display a large number of articles on a single page and want to browse more content through 'previous page', 'next page', or page number jumps, you should usetype="page". Withpaginationtag, type="page"It will automatically handle pagination logic and generate pagination links. For example, on the article list page or search results page,type="page"is the better choice.