How to display the viewing volume of articles or products on the frontend page?

Let the content vitality be fully displayed: easily display the number of views of articles or products on the Anqi CMS front-end page

In website operation, the number of views of articles or products is often an important indicator of the popularity of content.It not only provides visitors with an intuitive reference, forming a "social identity" effect, guiding them to discover hot content, but also helps operators quickly identify high-value content.AnQi CMS is an efficient content management system that fully considers the actual needs of users, making it very simple and intuitive to display the number of views of articles or products on the front-end page.

Next, we will explore how to use the powerful template tag feature of Anqi CMS to display these valuable traffic data on your website.

Show the number of views on the detail page

When a visitor enters a specific article or product detail page, they will usually find the page view information below the title and next to the publish date. In AnQi CMS, you can usearchiveDetailTags make it easy to get the current content's page views.

archiveDetailTags are used to get detailed data of the current page content. To display page views, you just need to specifynameparameters forViewsIt can be. For example, the most direct way is like this:

<span>浏览量：{% archiveDetail with name="Views" %}</span>

If you want to assign the page view data to a variable for subsequent more complex processing (such as配合JavaScript to implement dynamic effects or format conversion), you can do it like this:

{% archiveDetail articleViews with name="Views" %}
<span>阅读量：{{articleViews}}</span>

To make the display more natural, you can combine it with other content metadata to display, such as:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div>
        <span>发布日期：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span>浏览量：{% archiveDetail with name="Views" %} 次</span>
    </div>
    {# 其他文章内容 #}
    <div>
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

This code snippet demonstrates how to display the page views below the article title, along with the publication date, and includes the unit 'times' to make the information expression more complete.

Display the number of views on the list page

In addition to the detail page, you may also want to display the page views of each item directly on the article list, product list, and related recommendation list pages.Thus, the user can easily see which content is more popular while browsing the list.

In Anqi CMS, when you usearchiveListWhen the tag loops to output the article or product list, the data of each item of content will be encapsulated in a nameditemin the variable. At this point, you can accessitem.Viewsto get the number of views for the current list item.

For example, in a typical article list, you can display the number of views for each article like this:

<div>
{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <h5>{{item.Title}}</h5>
            <div>{{item.Description}}</div>
            <div>
                <span>{% categoryDetail with name="Title" id=item.CategoryId %}</span>
                <span>{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>{{item.Views}} 阅读</span>
            </div>
        </a>
        {% if item.Thumb %}
        <a href="{{item.Link}}">
            <img alt="{{item.Title}}" src="{{item.Thumb}}">
        </a>
        {% endif %}
    </li>
    {% empty %}
    <li>
        当前列表没有任何内容
    </li>
    {% endfor %}
{% endarchiveList %}
</div>

In this example,{{item.Views}}Placed in the article's metadata area, side by side with categories and publication time, and added the words 'Read', clearly conveying the popularity of the article. Whether it is an article list, Tag list (usingtagDataListOr based on otherarchiveListThe list obtained in this wayitem.ViewsThe calling methods are all general.

Some practical suggestions

• Add units and decorations:When displaying the number of views, adding units such as 'times viewed', 'reading volume', 'popularity', etc., can make the data more readable and attractive.
• Style optimization: Utilize CSS to beautify the number of page views, such as making it bold, changing the color or font size, so that it is more prominent on the page.
• Placement:Page views are usually placed near the content title, publication date, or author information, which positions can effectively attract users' attention while maintaining the coordination of the page layout.
• Data statistics:The Anqi CMS built-in traffic statistics feature updates the page views in real time, you do not need to configure it separately, ensuring the timeliness and accuracy of the data.

To display this information on your website, the process is actually very direct. All you need to do is find the corresponding article or product detail page and list page template files (usually in/templateIn the directory of the template folder you are using, then insert the above code snippet into the appropriate position.Save the file and refresh the page, and you will see the traffic data clearly displayed in front of you.

By following these simple steps, you can bring the content data of the website to life, providing users with a richer and more valuable browsing experience.

Frequently Asked Questions (FAQ)

Q1: How often is the view count of an article or product updated?A1: The page view statistics of AnQi CMS are updated in real time.Each time a user visits an article or product page, the system will record and update the view count data in real time, ensuring that the data displayed on your front end is the latest.

Q2: Can I customize the display format of the view count? For example, can I show '12000' as '1.2万'?A2: The template tag of Anqi CMS directly outputs the original number.If you need to display '12000' as '12 thousand' in this format, you can achieve it through some front-end JavaScript code.For example, you can write a simple JS function to detect the size of a number, format it according to the rules, and then dynamically update the page view display.

Q3: Does the Anqi CMS statistics include access by robots (spiders)?A3: The Anqi CMS attempts to perform basic robot and crawler filtering when designing the traffic statistics feature to as accurately as possible count the visits of real users.However, due to the complex network environment, new types of web crawlers emerge one after another, and we cannot guarantee to filter out all non-human access 100%.But usually, it can provide a relatively accurate user visit volume reference.