How does AnQiCMS sort articles by view count (Views) and display the most popular articles?

Calendar 👁️ 71

How to effectively display the most popular articles to visitors in website operation, which is a key factor in enhancing user engagement and optimizing content strategy.When visitors can easily find the hot content they are interested in, not only can it extend their stay on the website, but it can also effectively promote the spread of content.AnQiCMS provides a flexible and powerful template tag system that allows website administrators to easily sort articles by page views and display the most popular content without complex technical operations.

Revealing the Core Functionality: AnQiCMS Template Tag System

AnQiCMS is a content management system developed based on the Go language, one of its advantages is its simple and efficient template engine.It borrowed the syntax of Django template engine, through a series of rich template tags, allowing content developers to obtain and display website data in a直观 way.archiveListThis powerful document list label.

archiveListLabels can filter and sort articles based on various conditions, including but not limited to the category of the article, recommendation attributes, publication time, and even custom parameters. Today's focus is on how to utilize its sorting function (orderParameters) to achieve the reverse sorting by (Views), thereby finding the most popular articles.

Steps to implement the sorting of popular articles.

To display the popular articles on the website, it can be divided into the following steps:

Step 1: Determine the location of the template file

First, you need to determine which page to display popular articles. Usually, popular articles will appear on the homepage of the website (index.html), in the sidebar (possibly a public fragment file, such aspartial/aside.html)、an article list page area(such asarchive/list.html)or a special hot article page. AnQiCMS template files are usually located at/templateUnder the directory, you can select or create a new template file for editing as needed.

Second step: usearchiveListTags retrieve article data

We will use the selected template file,archiveListTag to call article data.This tag allows us to specify multiple parameters to accurately control the list of articles obtained.

  1. order="views desc"This is the core parameter for AnQiCMS to sort articles by views (Views) in descending order (desc).viewsRepresents the article view field,descIndicates reverse order, that is, the view count is arranged from high to low.
  2. limit="N"This parameter is used to limit the number of articles displayed. For example, if you want to display the top 10 most popular articles, you can set it tolimit="10".

Moreover, since we usually want to display these popular articles directly in a list, rather than paginating, we cantypethe parameter totype="list".

In summary, the code snippet to get the tags of popular articles might look like this:

{% archiveList archives with type="list" order="views desc" limit="10" %}
    {# 遍历文章列表的代码将放在这里 #}
{% endarchiveList %}

here,archivesIt is a custom variable name used to store the article list data returned by AnQiCMS.

Step 3: Display article information

After obtaining the article list data, we need to use aforto loop througharchivesVariable, and display the title, link, and view count of each article. Within the loop, each article object is usually nameditemYou can useitem.属性名Visit the various data of the article.

Some commonly used article properties include:

  • item.Title: Article title
  • item.Link: Article link
  • item.Views: Article views
  • item.Description: Article Summary
  • item.Thumboritem.Logo: Article Thumbnail
  • item.CreatedTime: Article Publish Time (Timestamp, usually required to be parsed throughstampToDateTag Formatting)

Complete Code Example with Explanation

Here is a complete example code that shows how to display the top 10 articles in the AnQiCMS template, including titles, links, views, and thumbnails (if available):

<div class="popular-articles">
    <h2>最热门文章</h2>
    <ul>
        {% archiveList archives with type="list" order="views desc" limit="10" %}
            {% for item in archives %}
                <li>
                    <a href="{{ item.Link }}" title="{{ item.Title }}">
                        {% if item.Thumb %}
                            <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">
                        {% endif %}
                        <div class="article-info">
                            <h3 class="article-title">{{ item.Title }}</h3>
                            <p class="article-views">浏览量:{{ item.Views }}</p>
                            <p class="article-date">发布时间:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>
                        </div>
                    </a>
                </li>
            {% empty %}
                <li>暂时没有文章可显示。</li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</div>

Code analysis:

  • <div class="popular-articles">...</div>This is an outer container used to wrap the list of popular articles for easy style control.
  • <h2>最热门文章</h2>Displays a title to clearly indicate that this section contains popular articles.
  • {% archiveList archives with type="list" order="views desc" limit="10" %}:
    • InvokearchiveListLabel, and assign the retrieved article list toarchivesVariable.
    • type="list": means we want a simple list instead of one with pagination features.
    • order="views desc": This is the key! It tells the system to sort the articles byViewsField (views) sorted in descending order.
    • limit="10": Limit to display only the top 10 articles.
  • {% for item in archives %}: Loop through.archivesEach article's data, each article's data is stored in.itemthe variable.
  • <a href="{{ item.Link }}" title="{{ item.Title }}">...</a>For each article, create a link pointing to the article detail page, and useitem.Titleas the link title hint.
  • {% if item.Thumb %}<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb">{% endif %}To determine if an article has a thumbnail (item.Thumb), and if so, display the image.
  • <h3 class="article-title">{{ item.Title }}</h3>Display article title.
  • <p class="article-views">浏览量:{{ item.Views }}</p>Display article views.
  • <p class="article-date">发布时间:{{ stampToDate(item.CreatedTime, "2006-01-02") }}</p>: Use.stampToDateTagged with the Unix timestamp of the article's publish time.item.CreatedTimeFormatted as年-月-日in the form of.
  • {% empty %}This isforAn optional sub-sentence of the loop. IfarchivesThe list is empty (i.e., no articles), it will display<li>暂时没有文章可显示。</li>.
  • {% endfor %}and{% endarchiveList %}: are used to endforloop andarchiveList.

Further optimization and customization of the display

  • Filter popular articles by category:If you want to display popular articles under a specific category, you canarchiveListadd acategoryIdparameter. For example, to display the 5 most popular articles under category ID 1, you can write:{% archiveList archives with type="list" order="views desc" limit="5" categoryId="1" %}
  • Display more article information:In addition to the title and view count, you can also display the article summary as needed (item.Description) author, custom fields, etc.
  • Style adjustment:The code only provides the functionality implementation, you can use CSS to style.popular-articles/.article-title/.article-viewsthe class names to match the overall design style of your website.
  • combined with the latest articles:The popular article list will usually appear at the same time as the latest article list, both of which can be recommended as complementary content to users, using differentorderparameters (such as using the latest articles withorder="id desc"ororder="createdTime desc")

By using these flexible template tags provided by AnQiCMS, you can conveniently build dynamic and attractive content display modules, thereby effectively enhancing the user experience and operational effectiveness of the website.


Frequently Asked Questions (FAQ)

1. How will the sorting be handled in the popular articles list if multiple articles have the same number of views (Views)?Answer: When the views of multiple articles are the same, AnQiCMS will default to sorting in reverse order by article ID.This means that articles with larger IDs (usually the latest published articles) will be displayed first, reflecting the principle of 'relative updating'.

2. Can I sort articles based on other metrics besides views?Answer: Of course you can.archiveListlabel'sorderThe parameters are very flexible. For example, if you want to sort by the latest release time, you can useorder="id desc"ororder="createdTime desc"; if the backend has set a custom sorting field (such assort), you can also useorder="sort desc".

3. Do I need to write multiple similar codes to display a different number of popular articles at different locations on the website?Answer: Yes, whenever you need to display popular articles in different areas or in different quantities on the website, you need to use separatearchiveListtag blocks. EacharchiveListTags can be set independentlylimitParameters to control the display quantity, or through `

Related articles

How to dynamically display the publication time of an article and format it on the article detail page?

Managing content in AnQi CMS, the publication time is undoubtedly an indispensable important metadata for every article.It not only allows readers to understand the timeliness of the content, but also has a positive impact on the website's SEO.The AnQi CMS provides us with a very convenient and flexible way to dynamically display and format these publishing times on the article detail page. <h3>Get the publication time of the article On the Anqi CMS article detail page, the system will automatically provide us with all the information of the current article as context variables.Among them, the publication time of the article is stored in

2025-11-08

How to call and display the friend link list in AnQiCMS templates?

How to effectively call and display the friend link list in the template when building and managing a website using AnQiCMS is a common and practical need.Friendship links can not only help improve the SEO performance of the website, but also provide users with more valuable external resources.The powerful template engine of AnQiCMS combined with its backend features makes this operation very direct.### Manage友情链接: Start from the backend Before displaying the友情链接 on the website frontend, we first need to set it up in the AnQiCMS backend

2025-11-08

How to insert preset content from the paragraph material library in the article content editor?

In AnQi CMS, efficiently managing and publishing content is the key to improving operational efficiency.For scenarios where frequent use of specific statements, module introductions, or standard declarations is required, manual repetition not only takes time but may also introduce inconsistencies.AnQi CMS understands the value and challenges of content creation, and therefore cleverly integrated the "Paragraph Material Library" feature into the article content editor, aiming to help you easily solve this pain point.Today, let's delve into how to easily insert predefined content from the paragraph material library in the article content editor, to increase your content production efficiency

2025-11-08

How to display all articles under a specific Tag in AnQiCMS?

In AnQiCMS, displaying the list of all articles under a specific tag (Tag) is a common and practical content operation requirement.Through AnQiCMS's flexible template system, you can easily implement this feature, providing users with more accurate content navigation.Let's first understand the tag mechanism in AnQiCMS.Tags are important tools for content organization, allowing you to add keywords to articles, products, and other content to cross-reference related items, even if they belong to different categories.This association method helps users discover more interesting content

2025-11-08

How to implement nested display of multi-level navigation menus in AnQiCMS templates?

Build a clear and feature-rich website in AnQiCMS requires flexible and diverse navigation menus.Multilevel navigation can not only help visitors quickly locate the content they need, but also optimize the website structure and be friendly to search engines.The powerful template engine and background management features of AnQiCMS make it intuitive and efficient to implement complex nested navigation.

2025-11-08

How to set and display the website logo image for AnQiCMS?

On a website built with AnQiCMS, the logo image is a core element of brand recognition, which can not only enhance the professionalism of the website, but also deepen visitors' impression of the brand.AnQiCMS provides a simple and intuitive way to set and display your website logo. ### Set Website Logo: Let the brand identity入驻 AnQiCMS Firstly, to make your website have a unique identifier, the first step is to upload the Logo image to the AnQiCMS backend.This process is very direct: 1.

2025-11-08

How to configure and display the contact information of the website (such as phone, email, WeChat) in AnQiCMS?

The contact information of the website is the key bridge to establish trust, provide support, and promote communication with users.Whether it is to provide consultation, solve problems, or promote cooperation, clear and easy-to-find contact information can greatly enhance the user experience and the professionalism of the website.In AnQiCMS, configuring and displaying this information is an intuitive and flexible operation. ### Configure your website contact information You can easily manage the contact information of the AnQiCMS website through the backend.First, log in to your AnQiCMS backend management interface.In the left navigation bar

2025-11-08

How to set up a custom template for a single page and display independent content in AnQiCMS?

In website operations, we often encounter pages that require unique design and layout, which do not follow a unified template like ordinary articles or product detail pages, such as a meticulously designed "About Us" page, a timeline showcasing the company's vision, or a landing page for a specific marketing activity.These single pages carry the brand image and special functions, therefore, setting a custom template and displaying independent content is the key to improving user experience and meeting business needs.

2025-11-08