How to efficiently display the latest published article list in AnQi CMS?

Efficiently displaying the latest list of articles released in AnQi CMS is the foundation of website content operation, which helps keep your website vibrant and allows visitors to obtain the latest information first-hand.The Anqi CMS provides flexible and powerful template tags, allowing you to easily achieve this goal.

Understanding the core:archiveListThe charm of tags

To display the latest published article list, we mainly rely on the built-in Anqi CMS.archiveListTemplate tags. This tag is the core tool for retrieving lists of various documents on the website (such as articles, products, etc.). It is feature-rich and can be customized to meet your specific needs.

Basic Usage: Display the latest articles

The most common requirement is to simply display a few of the latest articles published on the website. To achieve this, you need to use the template file.archiveListTags, and配合 several key parameters:

  • type="list": Tell the system you want a non-paginated list.
  • order="id desc": This is the key for specifying the sorting method.id descThis indicates sorting by document ID in descending order, as the ID of newly published articles is usually larger, ensuring that the latest articles are displayed at the top.
  • limit="5"：Control the number of articles displayed, for example, display the latest 5 articles.

Here is a simple example: this will list the latest 5 article titles and links on your page:

{% archiveList latestArticles with type="list" order="id desc" limit="5" %}
    <ul>
    {% for item in latestArticles %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
    {% endfor %}
    </ul>
{% endarchiveList %}

Here,latestArticlesIs the variable name you have given to this list of data, you can name it according to your own preference.forBy iterating through this variable, you can display the detailed information of each article one by one, for exampleitem.LinkGet article link,item.TitleGet article title.

Deep customization: meet more "latest" needs

Anqi CMS'sarchiveListTags are not just about listing the latest articles; they can also meet your more detailed needs for displaying 'latest' content.

Display the latest articles by category

If your website has multiple categories and you want to display only the latest articles under a specific category in a module on a category page or the homepage,categoryIdParameter.

For example, to display the latest 10 articles under the "News Updates" category:

{% archiveList newsArticles with type="list" categoryId="您的新闻分类ID" order="id desc" limit="10" %}
    <h2>最新新闻</h2>
    <ul>
    {% for item in newsArticles %}
        <li><a href="{{ item.Link }}">{{ item.Title }}</a> - {{ stampToDate(item.CreatedTime, "2006-01-02") }}</li>
    {% endfor %}
    </ul>
{% endarchiveList %}

Here,categoryIdshould be replaced with your actual category ID. If you are calling from the current category page and have not specifiedcategoryIdThe system will default to fetching articles under the current category.

Filter the latest list of specific type of content

【en】Flexible content models are supported by Anqi CMS, and you may have distinguished between the 'Article' model and the 'Product' model. If you only want to display the latest released products instead of all documents,moduleIdParameter.

For example, get the latest 3 products:

{% archiveList latestProducts with type="list" moduleId="您的产品模型ID" order="id desc" limit="3" %}
    <h3>最新产品推荐</h3>
    <ul>
    {% for item in latestProducts %}
        <li><a href="{{ item.Link }}"><img src="{{ item.Thumb }}" alt="{{ item.Title }}"> {{ item.Title }}</a></li>
    {% endfor %}
    </ul>
{% endarchiveList %}

Please replacemoduleIdwith the actual ID of your product model.

Highlight the latest articles marked as 'Recommended' or 'Featured'

SafeCMS allows you to set recommended attributes for articles (such as headlines [h], recommendations [c], etc.). If you want to highlight these contents in the latest articles list, you can useflagParameter.

For example, display the latest 5 articles of 'Top Stories':

{% archiveList featuredNews with type="list" flag="h" order="id desc" limit="5" %}
    <div class="featured-articles">
        <h4>头条速递</h4>
        {% for item in featuredNews %}
            <p><a href="{{ item.Link }}">{{ item.Title }}</a></p>
        {% endfor %}
    </div>
{% endarchiveList %}

Here are theflag="h"Ensure only articles marked as 'Top Stories' are displayed.

Optimize display: Date and pagination

Standardize display of publishing time

When displaying the latest articles, the publish time is an extremely important piece of information. The article time field (such asCreatedTimestored in timestamp form. To format it into a readable date, you can usestampToDateLabel.

For example, convert the timestampitem.CreatedTimeto "2023-10-26":

{{ stampToDate(item.CreatedTime, "2006-01-02") }}

Here are the"2006-01-02"It is the standard time formatting in Go language, representing year-month-day. You can adjust the format as needed, such as"2006年01月02日 15:04"displayed as 'October 26, 2023 10:30 AM'.

Add pagination feature to the long list

If the latest article list is long, displaying all articles at once can affect page loading speed and user experience. At this time, you should use in combination witharchiveListandpaginationTo implement pagination display using tags.

Firstly,archiveListSet intype="page", and specifylimitParameters to control the number of articles displayed per page:

{% archiveList allLatestArticles with type="page" order="id desc" limit="10" %}
    <!-- 文章列表内容，与之前的for循环类似 -->
    {% for item in allLatestArticles %}
        <div class="article-item">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>发布时间：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

Immediately following,archiveListTags{% endarchiveList %}After that, usepaginationtags to generate page navigation:

<div class="pagination-nav">
    {% pagination pages with show="5" %}
        {% if pages.PrevPage %}<a href="{{ pages.PrevPage.Link }}">上一页</a>{% endif %}
        {% for pageItem in pages.Pages %}
            <a href="{{ pageItem.Link }}" class="{% if pageItem.IsCurrent %}active{% endif %}">{{ pageItem.Name }}</a>
        {% endfor %}
        {% if pages.NextPage %}<a href="{{ pages.NextPage.Link }}">下一页</a>{% endif %}
    {% endpagination %}
</div>

show="5"means that up to 5 page buttons are displayed. This way, your latest article list can be presented to users in a more user-friendly manner.

Improve efficiency and user experience

The AnQi CMS is developed in Go language and has a natural advantage in handling high concurrency and data requests. Accompanied by its built-in static caching mechanism, even frequent callsarchiveListTags can also ensure the website's response speed. In template design, plan the page structure reasonably, and utilizeincludeReusing code snippets for auxiliary labels not only improves development efficiency but also makes template code more organized and convenient for future maintenance.

By using flexibilityarchiveList/stampToDateandpaginationLabels such as these, you can efficiently and beautifully display the latest released article list in AnQi CMS according to the actual needs of the website, thereby enhancing the perception of the frequency of content updates and strengthening user stickiness.

Common Questions (FAQ)

  1. Ask: How can I display the latest articles of different categories in different areas of the homepage?Answer: You can use the homepage template multiple times.archiveListThe tag, and pass through it each time the call is made.categoryIdParameters specify different category IDs. For example, one list displays the latest 5 articles of "News CentercategoryId.

  2. Question: Why did I setorder="id desc", but the published date of the latest article list seems not always the latest?Answer:order="id desc"This is indeed sorted in descending order by article ID, which usually coincides with the order of publication time.Please note that the Anqi CMS provides the 'scheduled publication' feature.If an article is set to be published in the future, even if it receives a larger ID when created in the background, it will not be displayed on the front end before reaching the publication time.It will appear once the publish time is reached, and it may appear at the top of the list due to its larger ID.Please check the actual publication time setting of the article.

  3. Question: How can I display the latest articles while also showing the thumbnail and summary of each article in the list?Answer: InarchiveListofforIn the loop, you can accessitemmultiple fields of an object. For example,item.ThumbCan retrieve the thumbnail image URL of the article (assuming the article has set a thumbnail image),item.DescriptionYou can obtain the article summary. Just insert these fields into your list HTML structure. For example: <img src="{{ item.Thumb }}" alt="{{ item.Title }}"> <p>{{ item.Description }}</p>.