How to display hot articles on the AnQiCMS homepage based on article views?

On AnQiCMS, the homepage is usually the important entry for visitors to understand the website content and quickly obtain information.Reasonably display popular articles, not only can attract users' attention, improve content exposure, but also effectively improve the user experience and PV (page views) of the website.AnQiCMS with its flexible template tags and built-in features makes this operation very simple and intuitive.

Understand how AnQiCMS counts page views

AnQiCMS has built-in article view count statistics, the system will automatically track the number of visits to each article and store this data.This means that you do not need to make any additional configuration or install any plugins, the views of each article will be silently recorded by the system from the day it is published.In the template, we can directly go throughitem.ViewsThis field is used to access the article's page view data, which provides the basis for us to filter and display popular content.

Positioning the display location of popular articles

Generally, the list of popular articles is placed on the homepage, sidebar, or prominent position of specific category pages on the website, so that users can see the most popular content as soon as they enter the site.For displaying popular articles on the homepage, we need to modify the corresponding template file on the homepage of the website.In AnQiCMS, the template file corresponding to the home page of the website is usually/template/你的模板目录/index/index.htmlIf you are using the default template of AnQiCMS, you can find it in its directoryindex/index.htmlfile.

UsearchiveListTag to get hot article data

AnQiCMS provides a powerfularchiveListTemplate tag, specifically used to obtain a list of articles. To implement displaying popular articles based on views, we need to cleverly utilizearchiveListSeveral key parameters of the tag:

  1. type="list": Because we simply list popular articles, usually do not need pagination, so willtypethe parameter tolist. This will return an article list without pagination logic.
  2. order="views desc": This is the core parameter for implementing popular articles. By usingorderthe parameter toviews desc, AnQiCMS will sort articles by the number of views from high to low.descDescending order, ensuring that the articles with the highest views are displayed at the top.
  3. limit="X": Bylimitparameter to limit the number of displayed items. For example, if you want to display 8 popular articles on the homepage, you can setlimitis set to"8".
  4. moduleId="Y": If your website has multiple content models (such as articles, products), and you only want to display specific content models (such as only displaying popular content under the 'article' model), you canmoduleIdThe parameter is specified. Usually, the ID of the 'Article' model is 1, and the specific ID can be viewed in the 'Content Management' -> 'Content Model' of the AnQiCMS backend.

Combine these parameters to obtain the template tags for popular article data:

{% archiveList hotArticles with type="list" order="views desc" limit="8" moduleId="1" %}
    {# 文章数据将在这里循环展示 #}
{% endarchiveList %}

Here, we will name the list of popular articles obtainedhotArticles.

Display popular articles in the template

After obtaining the data, we need to use a loop structure in the template to iterate and display each popular article. The AnQiCMS template engine supports something similar to Django'sforLoop. In the loop, each popular article will be asiteman object, we can use throughitem.Title/item.Link/item.ViewsAccess fields to view the title, link, and view count of the article. To make popular articles more attractive, we can also display the article's thumbnail (item.Thumb) and a brief description (item.Description).

This is an example of a code snippet displayed on the homepage template showing popular articles.

`twig

<h2 class="section-title">热门文章推荐</h2>
<ul class="article-list">
    {% archiveList hotArticles with type="list" order="views desc" limit="8" moduleId="1" %}
        {% for item in hotArticles %}
            <li class="article-item">
                <a href="{{ item.Link }}" title="{{ item.Title }}">
                    {% if item.Thumb %}
                        <div class="article-thumb-wrapper">
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}">
                        </div>
                    {% endif %}
                    <h3 class="article-title">{{ item.Title }}</h3>
                    <p class="article-views">浏览量：{{ item.Views }}</p>
                    {# 您也可以根据需要，加上文章的发布时间或简介 #}
                    {# <span class="article-date">{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span> #}
                    {# <p class="article-description">{{ item.Description|truncatechars:8