How to display the number of comments for each article on the article list page?

In website operation, the article list page is not only the entrance to the content, but also a window for users to understand the activity level of the website.When users see that every article is accompanied by the number of comments, it not only effectively enhances the interactivity and attractiveness of the article, but also brings positive social proof to the website, encouraging more readers to participate in discussions.

For users of AnQiCMS, it is a very direct and practical feature to display the number of comments for each article on the article list page.AnQiCMS provides flexible and powerful template tags, allowing you to easily integrate dynamic data into the website front end without complex secondary development.

Locate and edit your article list template

To implement the display of comment counts on the article list page, you need to find the template file responsible for rendering the article list. Usually, this may be your homepage template (index/index.html），Article category list page template（for example）article/list.htmlOr more specifically,article/list-{分类ID}.html），Even search results page templates（search/index.htmlIf you are not sure which file it is, you can refer to the AnQi CMS template design agreement document to understand the template path for different page types.

After finding the corresponding template file, you will find that it usesarchiveListThe tag is used to loop and display article content. This tag is the core content list call tag of AnQiCMS, which can obtain various detailed information of the article.

The acquisition of core tags and comment counts

InarchiveListWithin the loop of tags, you canitem.CommentCountAccess the comment count corresponding to each article. HereitemRepresents each article object in the current loop.

Let's look at a basic code structure example, assuming you are displaying articles on an article list page:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <article class="article-item">
        <h2 class="article-title"><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <div class="article-meta">
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
            {# 这里是显示评论数量的关键部分 #}
            <span class="article-comments">
                评论：{{item.CommentCount}}
            </span>
        </div>
        <div class="article-description">
            <p>{{item.Description}}</p>
        </div>
    </article>
    {% empty %}
        <p>当前分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

In the above code snippet,{{item.CommentCount}}It will directly output the total number of comments for the article.

Optimize display effect: Tips and click jump when no comments

Directly displaying numbers is clear, but in practical applications, we may want to optimize the display of comment counts, for example:

1. Friendly prompt when there are no comments:If an article does not have comments temporarily, directly displaying "0" may not be friendly. You can set a more natural prompt, such as "No comments yet."
2. Click to jump to the comment section:Allow users to click on the comment count and directly jump to the comment area of the article detail page, enhancing the user experience.

Combining these optimizations, we can further improve thearticle-commentscode section:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <article class="article-item">
        <h2 class="article-title"><a href="{{item.Link}}">{{item.Title}}</a></h2>
        <div class="article-meta">
            <span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
            <span>浏览量：{{item.Views}}</span>
            <span class="article-comments">
                评论：
                <a href="{{item.Link}}#comments"> {# 添加 #comments 锚点，假设评论区id为comments #}
                    {% if item.CommentCount > 0 %}
                        {{item.CommentCount}} 条评论
                    {% else %}
                        暂无评论
                    {% endif %}
                </a>
            </span>
        </div>
        <div class="article-description">
            <p>{{item.Description}}</p>
        </div>
    </article>
    {% empty %}
        <p>当前分类下暂无文章。</p>
    {% endfor %}
{% endarchiveList %}

This code uses{% if item.CommentCount > 0 %}make conditional judgments and add a link to the number of comments.{{item.Link}}#commentsmeans that clicking will navigate to the detail page of the article and try to jump to the page ID ofcommentsThe element position, which is usually the start of the comment area. Of course, you also need to ensure that your article detail page has a comment area corresponding toid="comments"the element.

Background configuration and precautions

To ensure that the comment feature works properly and displays the number, you need to make sure of the following:

1. The comment feature has been enabled:Please check if the 'Content Comment Management' is enabled in the Function Management of the Anqi CMS backend.
2. The comment content has been reviewed:Comments that have been reviewed and published (status is displayed) will be counted. The background content comment management page can review comments.

By following these simple steps, you can clearly display the number of comments for each article on the article list page of AnQi CMS.This minor change will significantly enhance the interactivity and user engagement of your website, making your content more vibrant.

Frequently Asked Questions (FAQ)

1. I followed the steps, but the comment count always shows as 0, why is that?

First, please check if the comment function has been enabled on your website backend, and whether the article indeed has comments.If there are comments, please confirm whether these comments have passed the review and are in the "display" status. Comments that have not been reviewed or marked as hidden will not be counted.In addition, try to clear the website cache (there is a “Update Cache” function in the background) and the browser cache to ensure that the template changes and data are the most up-to-date.

2. Besides the comment count, what other article data can I display on the article list page?

Of Security CMSarchiveListTags provide rich article data fields. In addition,CommentCountyou can easily display the article title (item.Title) and article link (item.Link) publication time (item.CreatedTime), Page views (item.Views), Description (item.Description) as well as the thumbnail (item.Thumboritem.Logo) etc. You can flexibly choose and combine these fields to enrich the display information of the article list.

How do I add an icon next to the number of comments?

Adding an icon to the template is very simple. You can{{item.CommentCount}}Insert an icon label at the beginning or end, for example, using Font Awesome or another icon library. For example:评论：<i class="fa fa-comments"></i> <a href="{{item.Link}}#comments">...</a>Or, if the icon is an image:评论：<img src="/static/images/comment-icon.png" alt="评论" /> <a href="{{item.Link}}#comments">...</a>Remember to include the corresponding CSS or JS file to ensure the icons display correctly.