How to use the `archiveList` tag to sort and display the most popular article list by views?

How to navigate through in Anqi CMS?archiveListTag display hot article list?

In content operation, clearly displaying popular articles on the website to visitors can not only effectively improve user experience and guide users to discover more exciting content, but can also indirectly promote search engine optimization (SEO) through effective content distribution. Anqi CMS provides powerful and flexible template tag functions, among whicharchiveListTags are the core tools to achieve this goal. This article will guide you on how to utilizearchiveListTags, easily create a popular article list based on article views.

UnderstandingarchiveListThe core role of tags

archiveListThe tag is a universal tool in AnQi CMS used to retrieve and display document lists.It can filter content based on various conditions, such as by category, model, recommended attributes, and provide flexible sorting methods.For creating the 'Hot Articles' list, we mainly focus on its sorting function, especially how to sort based on the number of views.

UsearchiveListWhen you usually specify a variable name (such asarchives), so that you can access the article data in subsequent loops. The structure of the tag is roughly as follows:

{% archiveList 变量名称 with 参数1="值1" 参数2="值2" %}
    {% for item in 变量名称 %}
        {# 在这里展示文章内容 #}
    {% empty %}
        {# 没有内容时的提示 #}
    {% endfor %}
{% endarchiveList %}

Practice exercise: Step by step to implement the popular article list

To implement the popular article list, you need to edit the website template files. The template files of Anqi CMS are usually stored in/templatethe directory, and.htmlsuffix.

1. Basic list construction

First, let's create a basic article list framework. Suppose you want to display 5 popular articles in a sidebar or a block on the homepage.

<div class="hot-articles-list">
    <h3>热门文章</h3>
    <ul>
        {% archiveList archives with type="list" limit="5" %}
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% empty %}
                <li>暂无文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

This code will list 5 of the latest published articles with titles and links because the defaultorderparameters are usually in descending order by ID (i.e., the most recent published).

2. Add the page view sorting to create a 'popular' article

To make the list truly 'popular', we need to introduceorderThe parameter is set toviews desc. Here,viewsIt refers to the page views of the article, anddescDescending order, meaning the views are displayed from high to low.

<div class="hot-articles-list">
    <h3>热门文章</h3>
    <ul>
        {% archiveList archives with type="list" limit="5" order="views desc" %}
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% empty %}
                <li>暂无热门文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Now, your list will display the top 5 most viewed articles from high to low based on the number of views.

3. Enrich the display content of popular article lists

Simply displaying the title may not be enough. You might also want to show views, publication dates, and other information to make the list more intuitive.archiveListin the loopitemThe object provides rich article fields for you to call, such asitem.Views(Views) anditem.CreatedTime(Creation time).

To better display the date, we can usestampToDatetags to format the timestamp.

<div class="hot-articles-list">
    <h3>热门文章</h3>
    <ul>
        {% archiveList archives with type="list" limit="5" order="views desc" %}
            {% for item in archives %}
                <li>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    <span>（浏览：{{ item.Views }} 次，发布于：{{ stampToDate(item.CreatedTime, "2006-01-02") }}）</span>
                </li>
            {% empty %}
                <li>暂无热门文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

This code will display the article title, link, as well as their views and formatted publication date. You can add more information according to your needsitem.Thumb(thumbnail) oritem.Description(summary) and more information.

4. Optional: Filter popular articles by specified category or model

You can add extra settings if you want to display popular articles under a specific category, or only show the popular content of a specific content model (such as the "product" model)categoryIdormoduleIdParameter.

For example, display the popular articles of the article model with category ID 10 (assuming ID 1):

<div class="category-hot-articles-list">
    <h3>本分类热门文章</h3>
    <ul>
        {% archiveList archives with type="list" moduleId="1" categoryId="10" limit="5" order="views desc" %}
            {% for item in archives %}
                <li>
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    <span>（浏览：{{ item.Views }} 次）</span>
                </li>
            {% empty %}
                <li>本分类暂无热门文章。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

By flexibly combining these parameters, you can create a hot content list to meet different scene requirements.

Some practical tips

• Customize the style:The code only provides the HTML structure, you can customize the CSS styles fordiv/ul/liandatags according to the overall design of the website to make it more beautiful.
• View count:The Anqi CMS is built-in with traffic statistics function, the page views of the articles (views) data is exactly sourced from here, no additional configuration is required to automatically accumulate.
• Caching mechanism:The list of hot articles usually has a high number of visits, the static cache mechanism built-in to Anqi CMS can effectively alleviate server pressure and ensure page loading speed.If the list content is not updated in time, you can try to manually clear the background cache.
• Application scenario:You can place the popular articles list on the homepage of the website, in the sidebar of the article detail page, at the top of the category page, or even as a recommended part of the email marketing content to enhance the exposure rate of the content and user interaction.

ByarchiveListTags, AnQi CMS makes the display of hot articles simple and efficient.You just need a few lines of code to dynamically present the most popular content based on page views, providing visitors with a better browsing experience.

Frequently Asked Questions (FAQ)

Q1: How are page views counted, and how is accuracy guaranteed?A1: Anqicms has built-in traffic statistics functionality, the page views of the article (ViewsIt is automatically recorded by the system.Each time a user visits the article detail page, the system will increase the page view count.The "Traffic Statistics and Spider Monitoring" module on the backend can help you view detailed traffic data.Although it is impossible to exclude all non-real user visits (such as web crawlers), for the general judgment of 'hot' on a website, this data is sufficiently accurate and valuable for reference.

Q2: What is the sorting rule if the article views are the same?A2: When multiple articles have the same view count, AnQi CMS will sort according to the default secondary sorting rules.In most cases, the system will fall back to sorting by the article ID in descending order, which means that in articles with the same number of views, the most recently published articles will be at the top.If you have specific needs for secondary sorting, you may need to further customize the label function or carry out secondary development.

Q3: Can I display popular articles from a specific time period? For example, 'Week's Most Popular' or 'Month's Most Popular'??A3:archiveListThe tag does not provide a direct parameter to filter 'hot' articles by time range.order="views desc"It will count the articles published on