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

In AnQiCMS, the homepage of the website is usually an important entry point for visitors to understand the content of the website and quickly obtain information.Reasonably display popular articles, which can not only attract users' attention and improve content exposure, but also effectively enhance the website's user experience and PV (Page Views).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 for each article and store this data.This means that you do not need to perform any additional configuration or install plugins. The page views of each article will be silently recorded by the system since its publication.item.ViewsSuch fields allow us to access the page view data of the articles, which provides the foundation for us to filter and display popular content.

Positioning the display location of popular articles

通常，热门文章列表会放置在网站的首页、侧边栏或者特定分类页面的显眼位置，以便用户一进入网站就能看到最受欢迎的内容。For displaying popular articles on the homepage, we need to modify the corresponding template file of the website homepage./template/你的模板目录/index/index.html. If 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 retrieve article lists. To implement displaying popular articles based on views, we need to use it cleverly.archiveListthe key parameters of the tag:

  1. type="list": Because we simply list popular articles, pagination is usually not needed, sotypeparameter settingslist. This will return a list of articles without pagination logic.
  2. order="views desc": This is the core parameter for implementing hot articles. Through theorderparameter settingsviews desc, AnQiCMS will sort articles by views from high to low.descRepresents descending order, ensuring that articles with the highest views are listed at the top.
  3. limit="X": Throughlimitto limit the number of displayed items. For example, if you want to display 8 popular articles on the homepage, you can setlimitset"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 "articles" model), you canmoduleIdParameter specified. Usually, the ID of the "article" model is 1, and the specific ID can be viewed in the "Content Management" -> "Content Model" of AnQiCMS backend.

Combining these parameters, the template tag to obtain popular article data is roughly as follows:

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

Here we name the list of popular articles obtainedhotArticles.

Displaying popular articles in the template

获取到数据后，我们需要在模板中使用循环结构来遍历并展示每一篇热门文章。AnQiCMS的模板引擎支持类似Django的EnglishforLoop. In the loop, each popular article is taken as anitemobject, we can useitem.Title/item.Link/item.ViewsUse fields such as title, link, and views to access the article. To make popular articles more attractive, we can also display the article's thumbnail (item.Thumb) and a brief description (item.Description).

The following 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