How to display the number of views and comments for articles in AnQiCMS?

In content operation, the number of page views and comments on articles is an important indicator of the popularity of the content and the degree of user participation.They can not only provide readers with references but also help operators to understand content performance.AnQiCMS as a powerful content management system naturally also provides a simple way to display these real-time data, making your website content more interactive and transparent.

In AnQiCMS, whether it is articles, products, or other content types, they are all unifiedly called 'documents' (archive) by the system.The article's view count (Views) and comment count (CommentCount) are directly used as properties of the document itself, which can be easily called through template tags.Below, let's take a detailed look at how to display this data on the front end of the website.

Display the number of views and comments on the document detail page

When the reader visits the detail page of a document, we usually hope to display these real-time data below the article title or in the sidebar. AnQiCMS provides for this.archiveDetailThe tag can retrieve the detailed information of the current document.

You can use the following template code to display the document's page views.

{# 显示当前文档的浏览量 #}
<div>浏览量：{% archiveDetail with name="Views" %} 次</div>

If you want to assign the page views to a variable for later use, you can do it like this:

{% archiveDetail currentViews with name="Views" %}
<div>文章浏览量：{{ currentViews }} 次</div>

Similarly, to display the number of comments on the document, you can use:CommentCountattribute:

{# 显示当前文档的评论数量 #}
<div>评论数：{% archiveDetail with name="CommentCount" %} 条</div>

Or, you can assign it to a variable in the same way:

{% archiveDetail currentComments with name="CommentCount" %}
<div>文章评论数：{{ currentComments }} 条</div>

A common detail page display method may be as follows, presenting the number of views and comments along with the publication time, tags, and other information:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="meta-info">
        <span>发布时间：{% archiveDetail with name="CreatedTime" format="2006-01-02" %}</span>
        <span>浏览量：{% archiveDetail with name="Views" %} 次</span>
        <span>评论数：{% archiveDetail with name="CommentCount" %} 条</span>
        {# 您还可以加上其他信息，比如文章标签 #}
        {% tagList tags with limit="5" %}
        {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
        {% endfor %}
        {% endtagList %}
    </div>
    <div class="article-content">
        {# 文章内容通常需要使用 |safe 过滤器以避免HTML转义 #}
        {%- archiveDetail articleContent with name="Content" %}
        {{articleContent|safe}}
    </div>
</article>

Display the number of views and comments on the document list page

On the article list page, such as the homepage, category page, or search results page, we often need to display the number of views and comments next to each article summary so that readers can quickly understand popular content. At this time, it is necessary to usearchiveListTag to loop display documents.

InarchiveListwithin the loop tag,itemThe variable represents each document reached by the current loop. Therefore, we can directly accessitem.Viewsanditem.CommentCountto access its views and comments.

The example of calling these properties in a loop:

{# 在循环体 item 中调用浏览量 #}
<span>浏览量：{{ item.Views }} 次</span>
{# 在循环体 item 中调用评论数 #}
<span>评论数：{{ item.CommentCount }} 条</span>

A typical list page code snippet might look like this:

<ul class="article-list">
    {% archiveList archives with type="page" limit="10" %}
        {% for item in archives %}
        <li>
            <h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
            <div class="list-meta">
                <span>发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
                <span>阅读：{{item.Views}} 次</span>
                <span>评论：{{item.CommentCount}} 条</span>
            </div>
            <p>{{item.Description}}</p>
            <a href="{{item.Link}}" class="read-more">阅读全文</a>
        </li>
        {% empty %}
        <li>
            目前暂无内容。
        </li>
        {% endfor %}
    </ul>
    {# 如果是分页列表，别忘了添加分页标签 #}
    {% pagination pages with show="5" %}
        {# 分页链接的代码... #}
    {% endpagination %}
{% endarchiveList %}

Tip

• Automatic statisticsThese browsing volume and comment number values are automatically managed and updated by the AnQiCMS system.When a user visits the page or submits a comment (usually comments that have passed the review), the system will automatically perform statistics without manual operation.
• Style optimizationRemember to add appropriate styles to these elements in CSS, so that they are harmonious with the overall design of the website and enhance the user experience.
• Content StrategyUtilize these data to better evaluate the effectiveness of content, such as promoting or recommending articles with high page views, creating or interacting with topics that are active in comments, thereby optimizing your content strategy.

By the above method, you can easily display the number of page views and comments on the various pages of the AnQiCMS website, providing more valuable information for your readers, and also providing a direct view for your content operation