How to display the reading and comment counts of articles on the front end?
In website operation, the number of article views and comments is an important indicator of the popularity of content and the attraction of user interaction.AnQiCMS as a flexible content management system provides a convenient way to display these data on the website front-end.By calling simple template tags, even without delving into programming, these functions can be easily implemented.
The AnQiCMS template system borrows the syntax of the Django template engine, using double curly braces{{变量}}To output variable content, use single curly braces and percentages{% 标签 %}Call the feature tag. Understanding these basic rules can help you customize the display effect of the website more efficiently.
Display the number of reads and comments on the article list page.
When we need to display the reading volume and comment count of each article in the article list (such as article recommendations on the homepage, categorized article lists, etc.), we can usearchiveListTag to get article data and display each one by looping.
archiveListThe tag can retrieve a collection of articles under specified conditions. While traversing this collection, the data of each article will be represented by a variable (usuallyitem), and we can directly access ititemThe property of the object to get the reading volume and comment quantity.
Here is an example of code that displays a list of articles and their corresponding reading volume and comment quantity.
{# 假设我们正在获取文章模型ID为1，显示数量为10的文章列表 #}
{% archiveList articles with moduleId="1" type="list" limit="10" %}
{% for article in articles %}
<div class="article-card">
<h3><a href="{{article.Link}}">{{article.Title}}</a></h3>
<p class="article-meta">
<span>发布日期：{{stampToDate(article.CreatedTime, "2006-01-02")}}</span>
<span>阅读量：{{article.Views}}</span>
<span>评论数：{{article.CommentCount}}</span>
</p>
<p>{{article.Description}}</p>
<a href="{{article.Link}}" class="read-more">查看详情</a>
</div>
{% empty %}
<p>暂时没有文章可供显示。</p>
{% endfor %}
{% endarchiveList %}
In the code above:
{% archiveList articles ... %}Called the article list tag and assigned the obtained article collection toarticlesVariable.{% for article in articles %}Looped through each article.{{article.Views}}Directly output the reading volume of the current article.{{article.CommentCount}}The current number of comments of the article is output.
In this way, you can dynamically display the reading and comment count of each article in any article list area of the website.
Display the number of reads and comments on the article detail page
When a user clicks to enter a specific article detail page, the detailed data of the article is usually displayed below or at the end of the article title, including its reading volume and total number of comments. In the AnQiCMS article detail page, all the information of the current article is automatically loaded into a namedarchiveThe global variable in. Therefore, we can directly accessarchivethe properties of the object to get the required data.
The following is an example code snippet showing the reading and comment count on an article detail page:
<article class="article-detail">
<h1 class="article-title">{{archive.Title}}</h1>
<div class="article-info">
<span>发布时间：{{stampToDate(archive.CreatedTime, "2006-01-02 15:04")}}</span>
<span class="views-count">阅读量：{{archive.Views}}</span>
<span class="comment-count">评论数量：{{archive.CommentCount}}</span>
</div>
<div class="article-content">
{{archive.Content|safe}}
</div>
{# 这里可以继续添加评论列表等内容 #}
</article>
In this code block:
{{archive.Title}}The article title was output.{{archive.Views}}The reading count of the current article was directly obtained and displayed.{{archive.CommentCount}}Directly retrieved and displayed the number of comments for the current article.
This method is very intuitive and can be easily integrated into the article detail page without any additional tag calls, enabling the integration of these core data.
About the comment list supplement
Although the above mainly discusses displaying the total number of comments, if you need to further display the specific comment content list, AnQiCMS also providescommentListLabel. This tag can be used to get the comments details of a specified article, it is often used with pagination tags.paginationtogether.
For example, you can call it in the comments area of the article detail page.
<div class="comments-section">
<h3>用户评论 (共 {{archive.CommentCount}} 条)</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
{% for comment in comments %}
<div class="single-comment">
<p><strong>{{comment.UserName}}</strong> 于 {{stampToDate(comment.CreatedTime, "2006-01-02 15:04")}} 评论：</p>
<p>{{comment.Content}}</p>
</div>
{% empty %}
<p>目前还没有评论，快来发表您的看法吧！</p>
{% endfor %}
{# 评论分页 #}
{% pagination pages with show="5" %}
{# 分页链接的渲染逻辑 #}
{% endpagination %}
{% endcommentList %}
</div>
Herearchive.CommentCountUsed to display the total number of comments, whilecommentListThe tag is responsible for fetching and displaying the specific content of each comment in a loop.
Useful Tips
In actual operation, please pay special attention to the case sensitivity of AnQiCMS template tags and field names, such asViewsandviewsIt is different. After modifying the template file and uploading it, if the front-end page does not update immediately, you can try to clear the browser cache or the system cache of AnQiCMS backend to ensure that the new template file takes effect.
AnQiCMS provides these tag calling methods, making it simple and efficient to dynamically display website content, which helps operations personnel better manage and present website content, enhancing user experience and website interactivity.
Frequently Asked Questions (FAQ)
Q1: Why did the reading count or comment count not display on the front-end page after I added the code according to the tutorial?
A1: In this case, you may need to check several aspects. First, make sure that the labels and field names in the template file are spelled correctly, AnQiCMS templates are case-sensitive, for exampleViewsandviewsIt can be recognized as a different field. Secondly, check if the article comment function is enabled in the AnQiCMS background.Sometimes, after updating the template file, the browser or system cache may not refresh in time. You can try clearing the browser cache or manually clearing the system cache in the "Update Cache" function of the AnQiCMS backend.
Q2: How is the article reading volume of AnQiCMS counted? Is there a way to customize the counting logic?
A2: AnQiCMS automatically counts the page views of articles.The system design includes traffic statistics and crawler monitoring functions, and the reading volume data is usually recorded through internal mechanisms each time a user visits the article page.The official documentation does not directly mention the method for customizing the reading statistics logic, which is usually a built-in core feature of the system.If you need more complex statistical analysis, you can consider combining the traffic statistics provided by AnQiCMS for analysis, or through secondary development to achieve specific statistical needs.
Q3: Do I support displaying the reading volume in the format of '1.2k' or '1 thousand+'?
A3: AnQiCMS template tags directly output the original number of article views, for example “1200”.If you need to display in the format "1.2k" or "1 thousand+", the template itself does not provide a built-in formatting filter to achieve this effect.You can consider the following two methods: the first is to combine front-end JavaScript code to format numbers after the page is loaded.Secondly, write some conditional logic in the template ({% if ... %}Labels) to manually concatenate strings based on the size of numbers, but this will make the logic of the template relatively complex.