In website operation, user interaction is an important factor in enhancing content value and website activity.The comment feature acts as a bridge for users to directly communicate with content, not only enriching the page content, bringing unique UGC (User Generated Content) to the website, but also enhancing the community atmosphere and having a positive effect on search engine optimization (SEO).AnQiCMS (AnQiCMS) offers a powerful and flexible comment list display feature that allows you to easily display user comments on articles or product detail pages and manage them effectively.

Understand the comment mechanism of AnQiCMS

The comment feature of AnQi CMS is designed to be very practical.In the content management backend, you can manage comments uniformly, including review, delete, and other operations.On the front-end page, the display of comments is achieved through concise and clear template tags.This means that you do not need to delve into complex code, just use the specific tags in the corresponding template file to control the display of comments.

The display of the comment list mainly depends oncommentListTag.This tag can flexibly extract comment data associated with a specific article or product from the database and display it on the web page.It supports various parameter configurations to meet different display requirements, such as specifying the article or product to which the comment belongs, setting the sorting method of the comments, and deciding whether the comment list is displayed in pagination or listed in full.

Display the comment list in the template

To display the comment list on the article or product detail page, you first need to find the corresponding detail page template file. Anqi CMS templates follow the Django template engine syntax, and the files are usually located at/templateUnder the directory, the detail page template may be named{模型table}/detail.htmlor a similar structure.

In the detail page template, you can usecommentListtags to call comment data. The most core parameter isarchiveIdIt is used to specify the article or product ID of the comment. Usually, this ID is automatically obtained from the current page's article or product details, and you can also pass it explicitly.

For example, a basic code to display a comment list might look like this:

{# 假设当前页面是文章详情页，且已通过archiveDetail标签获取了当前文章的ID #}
{% archiveDetail currentArchive with name="Id" %}
<div class="comments-section">
    <h3>用户评论 ({{ currentArchive.CommentCount }})</h3>
    {% commentList comments with archiveId=currentArchive type="list" limit="10" order="id desc" %}
        {% for item in comments %}
        <div class="comment-item">
            <div class="comment-header">
                <span class="username">
                    {% if item.Status != 1 %}
                    审核中：{{ item.UserName|truncatechars:6 }}
                    {% else %}
                    {{ item.UserName }}
                    {% endif %}
                </span>
                <span class="time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
            </div>
            <div class="comment-content">
                {% if item.Parent %}
                <blockquote class="reply-to">
                    回复 @{{ item.Parent.UserName }}:
                    {% if item.Parent.Status != 1 %}
                    该内容正在审核中...
                    {% else %}
                    {{ item.Parent.Content|truncatechars:100 }}
                    {% endif %}
                </blockquote>
                {% endif %}
                {% if item.Status != 1 %}
                <p>该评论正在审核中，请耐心等待。</p>
                {% else %}
                <p>{{ item.Content }}</p>
                {% endif %}
            </div>
            {# 如果需要点赞功能，可以在这里添加相关的HTML和JS逻辑 #}
            <div class="comment-actions">
                <a class="praise-btn" data-id="{{ item.Id }}">赞 ({{ item.VoteCount }})</a>
                <a class="reply-btn" data-parent-id="{{ item.Id }}" data-username="{{ item.UserName }}">回复</a>
            </div>
        </div>
        {% empty %}
        <p>暂无评论，快来发表您的看法吧！</p>
        {% endfor %}
    {% endcommentList %}
</div>

In this example,archiveIdSet tocurrentArchiveID.type="list"Means only a specified number of comments are listed,limit="10"Limited the number of displayed comments,order="id desc"Then let the latest comments be displayed at the top.

It is worth noting that each commentitemhasStatusField, used to indicate whether the comment has been reviewedStatus = 1Means it has been approved,0Indicates under review). To provide a better user experience, you can judge by whetherStatusThe field displays a "under review" prompt instead of directly showing the unreviewed content. Additionally, if a comment is a reply to another comment,item.ParentThe field contains information about the parent comment, allowing you to clearly display the comment hierarchy.

Paginated display of comment list

When there are many comments, loading all comments at once may affect page loading speed and user experience. The Anqi CMS'scommentListTag supporttype="page"parameters, can be combinedpaginationtags can be used to implement comment pagination.

While usingtype="page"after,commentListThe tag intelligently handles the current page number and total page number information, andpaginationThe tag outputs pagination navigation.

{# 假设当前页面是文章详情页，且已通过archiveDetail标签获取了当前文章的ID #}
{% archiveDetail currentArchive with name="Id" %}
<div class="comments-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=currentArchive type="page" limit="5" order="id desc" %}
        {% for item in comments %}
            {# 评论显示逻辑同上 #}
            <div class="comment-item">
                <div class="comment-header">
                    <span class="username">
                        {% if item.Status != 1 %}
                        审核中：{{ item.UserName|truncatechars:6 }}
                        {% else %}
                        {{ item.UserName }}
                        {% endif %}
                    </span>
                    <span class="time">{{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
                </div>
                <div class="comment-content">
                    {% if item.Parent %}
                    <blockquote class="reply-to">
                        回复 @{{ item.Parent.UserName }}:
                        {% if item.Parent.Status != 1 %}
                        该内容正在审核中...
                        {% else %}
                        {{ item.Parent.Content|truncatechars:100 }}
                        {% endif %}
                    </blockquote>
                    {% endif %}
                    {% if item.Status != 1 %}
                    <p>该评论正在审核中，请耐心等待。</p>
                    {% else %}
                    <p>{{ item.Content }}</p>
                    {% endif %}
                </div>
                <div class="comment-actions">
                    <a class="praise-btn" data-id="{{ item.Id }}">赞 ({{ item.VoteCount }})</a>
                    <a class="reply-btn" data-parent-id="{{ item.Id }}" data-username="{{ item.UserName }}">回复</a>
                </div>
            </div>
        {% empty %}
        <p>暂无评论，快来发表您的看法吧！</p>
        {% endfor %}
    {% endcommentList %}

    {# 分页导航 #}
    <div class="pagination-section">
        {% pagination pages with show="5" %}
            <ul>
                {% if pages.FirstPage %}
                <li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
                </li>
                {% endif %}
                {% if pages.PrevPage %}
                <li class="page-item">
                    <a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
                </li>
                {% endif %}
                {% for pageItem in pages.Pages %}
                <li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
                    <a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
                </li>
                {% endfor %}
                {% if pages.NextPage %}
                <li class="page-item">
                    <a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
                </li>
                {% endif %}
                {% if pages.LastPage %}
                <li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
                    <a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
                </li>
                {% endif %}
            </ul>
        {% endpagination %}
    </div>
</div>

Through the pagination feature, even with a large number of comments, the page can maintain neatness and loading efficiency.

Submit comment form

After the comment list is displayed, it is usually necessary to provide a form for users to submit new comments. The submission target address of the comment form is/comment/publish. The form needs to include several key fields, such asarchive_id(ID of the article/product the comment belongs to),user_name(Name of the commenter),content(Comment content), optional),parent_id(If this is a reply to a specific comment).

To prevent spam comments, you can also enable the comment captcha feature in the background. Once enabled, you need to integrate the captcha display and verification logic into the comment form, which can be done bytag-/anqiapi-other/167.htmlThe provided JavaScript code snippet can be easily implemented.

Summary

Anqi CMS passedcommentListandpaginationThe template tags provide an efficient and flexible solution for displaying comments lists on article or product detail pages.From simple comment listing to pagination display, to the presentation of comment levels and review status, these features can help you build a website with rich interactivity and content.Reasonably utilize these features to greatly enhance user engagement and effectively manage user-generated content.

Frequently Asked Questions (FAQ)

1. How to enable or disable the comment function on the article/product detail page?

The overall enable or disable of the comment function is usually set in the Anqi CMS backend.You can log in to the backend, find the relevant options under "Function Management" and "Content Comment Management".Here, you may find global settings that control whether users are allowed to comment on articles or products.

2. Do user submitted comments need to be reviewed before displaying on the front page?

Yes, Anqi CMS provides a comment review mechanism. When displaying the comment list, as shown in the article, there is aStatusfield (1indicating the review has passed,0Reviewing...This means that newly submitted comments are set to pending review by default, and they can only be publicly displayed on the front end after passing the review from the back end.This helps website administrators control content quality and avoid inappropriate speech.

How to add 'like' or 'reply' and other interactive features to the comment list?

For each item in the comment list,itemIn Chinese, you can add custom HTML elements (such as buttons or links) to implement the "like" and "reply" functions. For "like", it usually requires JavaScript to/comment/praiseThe interface sends a POST request and passes the comment'sid. For 'reply', you can dynamically generate a reply form or fill in an existing form using JavaScript.parent_idanduser_nameThe field indicates which comment is being replied to, thus enabling the nesting and interaction of comments.