In website operation, we all hope to display the most popular and highly read articles to visitors, such as common lists like 'Hot Articles' or 'Most Viewed'.This not only effectively guides users to discover more exciting content and enhance the user experience of the website, but is also an indispensable part of content operation.In Anqi CMS, implementing such a feature is simpler than you imagine, the secret is hidden in the document list interfacearchive/listoforderIn the parameters.

Use cleverlyorderParameters, create your popular content list

AnQi CMS provides a powerful and flexible document list interface/api/archive/listIt allows us to filter and sort articles based on various conditions. Among them,orderThe parameter is the core of implementing the "Popular Articles" or "Most Viewed" list.

In simple terms,orderThe parameter is used to tell the system the rule you want the article list to be sorted by. For the "most viewed" feature we want to implement, the most direct way is to use the article's view count (viewsField) to sort in descending order. The Anqi CMS system automatically counts the page views of each article, and we just need to sort throughorderspecify the parameter to sort by this field.

For example, if you want to get the article with the highest views, justorderthe parameter toviews desc. Here,viewsrefers to the article view field, anddescThis indicates sorting in descending order, that is, from high to low. As a result, the returned article list will be sorted from the most viewed to the least viewed.

Gradually implement the "Hot Articles" list

Next, let's take a look at how to use a few simple steps toorderparameters to retrieve and display the most popular articles on your website.

Step one: clarify your needs

Before constructing the request, we need to think clearly about several issues:

  • Which module's articles do you want to retrieve (such as news articles or product introductions)? This corresponds to:moduleIdParameter.
  • Do you want to limit the hot articles to a specific category? This corresponds tocategoryIdParameter.
  • How many hot articles do you want to display on the page? This corresponds tolimitParameter.

Step two: Construct the API request URL

With clear requirements, we can start building the API request URL. Suppose we want to get the article module (moduleId=1Under it, the top 10 articles in terms of views, the request URL will be like this:

{域名地址}/api/archive/list?moduleId=1&limit=10&order=views desc

Remember to replace it with your actual website domain name, for example:{域名地址}Replace it with your actual website domain name, for example:https://www.yourwebsite.com.

  • moduleId=1: Indicates retrieving the document under the article model with ID 1.
  • limit=10: Indicates retrieving only the first 10 articles.
  • order=views desc: This is the core, it tells Anqi CMS to follow the rule ofviewsThe field (views) is sorted in descending order.

If you need to specify a category, such as articles with category ID 5, just addcategoryId=5:

{域名地址}/api/archive/list?moduleId=1&categoryId=5&limit=10&order=views desc

Step 3: Process the returned data

After you send a GET request to this URL, AnQi CMS will return a JSON formatted data. In the case of success, you will seecodeis 0,dataThe field contains a list of articles. Each article object includesid/title/views/linketc. detailed information.

You need to write code to parse this JSON response. For example, using JavaScript'sfetchoraxioslibrary to make a request, then traversedatathe array to extract the article information you need.

The fourth step: Display on the page

Next, you can use this data to render a 'Popular Articles' or 'Most Viewed' list on your website.This is usually a simple unordered list or ordered list, each item including the article title and a link to the article details page.

For example, a simplified HTML structure may look like this:

<div class="hot-articles">
    <h3>热门文章</h3>
    <ul>
        <!-- 这里会通过JavaScript动态插入文章列表 -->
    </ul>
</div>

<script>
    fetch('/api/archive/list?moduleId=1&limit=10&order=views desc')
        .then(response => response.json())
        .then(data => {
            if (data.code === 0 && data.data) {
                const ul = document.querySelector('.hot-articles ul');
                data.data.forEach(article => {
                    const li = document.createElement('li');
                    const a = document.createElement('a');
                    a.href = article.link; // 文章详情页链接
                    a.textContent = article.title + ' (' + article.views + '浏览)'; // 文章标题和浏览量
                    li.appendChild(a);
                    ul.appendChild(li);
                });
            } else {
                console.error('获取热门文章失败:', data.msg);
            }
        })
        .catch(error => {
            console.error('请求热门文章出错:', error);
        });
</script>

This code will request popular article data and generate a list on the page that includes titles and views, with each title linking to the corresponding article detail page.

Advanced skills and thinking

  • Implement “Latest Articles”:If you want to display a list of “Latest Articles”, you can:orderparameter tocreated_time descThis will sort the articles by their publishing time from new to old.
  • Combined sorting:AlthoughorderParameters are usually used for sorting a single field, but in some advanced scenarios, you may need to combine multiple conditions. For example, you can first sort byviews descand then sort bycreated_time descThis requires the backend interface to support sorting strings by multiple fields, the document example of AnQi CMS is a single field, and when in use, please refer to the latest API document.
  • Performance optimization:Consider caching frequently requested lists on the front end or through CDN to reduce server pressure and improve loading speed.
  • Front-end framework integration:If you use front-end frameworks such as Vue, React, etc., you can integrate the data acquisition and rendering logic into components to achieve more flexible and efficient display.

By flexibly using Anqi CMSarchive/listthe interface inorderParameters, you can easily add various sorted article lists to your website, whether it's 'Hot Articles', 'Latest Release' or other custom sorting, you can handle it with ease.This convenience greatly improves the display efficiency and user experience of the website, making your website more attractive.

Frequently Asked Questions (FAQ)

Q1:orderParameters exceptviewsandcreated_timeWhat fields does it support for sorting? orderParameters support various built-in field sorting, common ones include:id(article ID),views(Views),category_id(Category ID),created_time(creation time),updated_time(Update time) and so on. You can choose the appropriate fields according to your needs and combineasc(Ascending) ordesc(Descending) to sort.

Q2: If I want to define 'hot' not only based on views, but also want to sort by the number of comments, is that possible?According to the current documentation,orderThe parameters mainly supportid/views/category_id/created_time/updated_timeThese fields. If you want to sort by comments (comment_count), you need to consult the latest Anqi CMS API documentation to confirm.comment_countWhether it has been added to the sortable field. If not supported, you can consider performing data secondary processing on the backend, or using a custom field to record the 'hot score'