如何在 AnQiCMS 模板中集成和显示评论列表？

在安企CMS中有效集成和展示评论列表，对于提升网站的用户互动性、活跃社区氛围以及获取宝贵的用户反馈至关重要。作为一名资深的安企CMS网站运营人员，我深知高质量的内容离不开用户积极的参与。安企CMS提供了强大而灵活的模板标签，让我们可以轻松地在网站前端实现这一功能。

评论功能概述与模板文件组织

安企CMS内置了评论管理功能，允许网站管理员审核、回复和管理用户评论。为了在网站前端集成评论列表，我们首先需要了解其在模板结构中的建议位置。根据安企CMS的模板制作约定，评论列表页通常存放在comment/list.html这样的路径下。当然，您也可以根据实际需求，在文章详情页等其他模板文件中直接引入评论列表代码片段。

显示评论列表：commentList 标签的使用

安企CMS通过commentList模板标签来渲染评论内容。这个标签具有高度的灵活性，可以根据不同的参数来获取和展示评论。

要使用commentList标签，您需要在一个{% commentList comments with ... %}代码块中定义一个变量（例如comments），然后通过for循环遍历这个变量来显示每条评论的详细信息。

commentList标签支持以下几个关键参数：

• archiveId: 这是指定评论所属文档的ID。通常，在文章详情页中，我们会动态获取当前文章的ID，并将其作为archiveId的值。
• order: 用于指定评论的排序方式，例如id desc（按ID降序，即最新评论在前）或id asc（按ID升序）。
• limit: 控制显示评论的数量。如果您只想显示最新N条评论，可以使用limit="N"。它也支持offset模式，如limit="2,10"表示从第2条开始获取10条评论。
• type: 定义评论列表的类型。当type="list"时，它将直接显示指定数量的评论。而当type="page"时，则表示您希望评论列表具有分页功能，此时需要配合pagination标签一起使用。
• siteId: 当您的安企CMS部署了多个站点时，可以使用此参数指定要获取评论的站点ID。一般情况下，无需手动设置，系统会自动识别当前站点。

在for循环中，每条评论数据都以item变量的形式呈现，包含诸如Id（评论ID）、UserName（评论者名称）、Content（评论内容）、CreatedTime（评论时间）、Status（审核状态）、Parent（如果这是回复，则包含父级评论信息）等字段。在显示用户提交的内容时，为了防止XSS攻击，务必使用|safe过滤器进行输出。

下面是一个基本的评论列表代码示例，通常会放在文章详情页的底部：

<div class="comments-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=archive.Id type="list" limit="6" %}
        {% for item in comments %}
            <div class="comment-item">
                <div class="comment-meta">
                    <span class="username">
                        {% if item.Status != 1 %}
                            （审核中）{{item.UserName|truncatechars:6}}
                        {% else %}
                            {{item.UserName}}
                        {% endif %}
                    </span>
                    {% if item.Parent %}
                        <span class="reply-to">回复 
                            {% if item.Parent.Status != 1 %}
                                （审核中）{{item.Parent.UserName|truncatechars:6}}
                            {% else %}
                                {{item.Parent.UserName}}
                            {% endif %}
                        </span>
                    {% endif %}
                    <span class="time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
                </div>
                <div class="comment-content">
                    {% if item.Parent %}
                        <blockquote class="reply-quote">
                            {% if item.Parent.Status != 1 %}
                                该内容正在审核中：{{item.Parent.Content|truncatechars:9|safe}}
                            {% else %}
                                {{item.Parent.Content|truncatechars:100|safe}}
                            {% endif %}
                        </blockquote>
                    {% endif %}
                    {% if item.Status != 1 %}
                        该内容正在审核中：{{item.Content|truncatechars:9|safe}}
                    {% else %}
                        {{item.Content|safe}}
                    {% endif %}
                </div>
                <div class="comment-actions" data-id="{{item.Id}}" data-user="{{item.UserName}}">
                    <a class="action-btn vote-comment" data-id="praise">赞(<span class="vote-count">{{item.VoteCount}}</span>)</a>
                    <a class="action-btn reply-comment" data-id="reply">回复</a>
                </div>
            </div>
        {% endfor %}
        {% empty %}
            <p class="no-comments">目前还没有评论，快来发表您的看法吧！</p>
    {% endcommentList %}
</div>

如果您的评论数量较多，希望实现分页功能，则可以将type参数设置为page，并配合pagination标签来生成分页链接：

<div class="comments-section">
    <h3>用户评论</h3>
    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
        {# 评论列表内容与上方示例类似 #}
        {% for item in comments %}
            {# ... 显示评论内容 ... #}
        {% endfor %}
    {% endcommentList %}

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

评论提交表单：实现用户评论功能

用户发表评论通常通过一个HTML表单实现。此表单需要将数据提交到安企CMS的comment/publish接口。表单中必须包含archive_id、user_name和content字段，其中parent_id用于回复特定评论。

<div class="comment-form-section">
    <h3>发表评论</h3>
    <form method="post" action="/comment/publish" class="comment-submit-form">
        <input type="hidden" name="return" value="html"> {# 可选，指定后端返回HTML或JSON #}
        <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}"> {# 假设在文章详情页，archive.Id 可用 #}
        <input type="hidden" name="parent_id" id="parent_comment_id" value=""> {# 回复时动态填充 #}

        <div class="form-group">
            <label for="comment-username">您的昵称：</label>
            <input type="text" id="comment-username" name="user_name" required placeholder="请输入您的昵称" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="comment-content">评论内容：</label>
            <textarea id="comment-content" name="content" required rows="5" placeholder="请在此处输入您的评论"></textarea>
        </div>

        {# 验证码集成（如果启用） #}
        <div class="form-group captcha-group" style="display: flex; align-items: center;">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" required placeholder="请填写验证码" class="captcha-input">
            <img src="" id="get-captcha" class="captcha-image" title="点击刷新验证码">
        </div>
        
        <div class="form-actions">
            <button type="submit" class="submit-btn">提交评论</button>
            <button type="reset" class="reset-btn">重置</button>
        </div>
    </form>
</div>

<script>
// JavaScript 刷新验证码
document.getElementById('get-captcha').addEventListener("click", function () {
  fetch('/api/captcha')
    .then(response => response.json())
    .then(res => {
      document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id);
      document.getElementById('get-captcha').setAttribute("src", res.data.captcha);
    }).catch(err => console.error('Error fetching captcha:', err));
});
document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码

// JavaScript 处理回复功能
document.querySelectorAll('.reply-comment').forEach(button => {
    button.addEventListener('click', function() {
        const commentId = this.closest('.comment-actions').dataset.id;
        const userName = this.closest('.comment-actions').dataset.user;
        document.getElementById('parent_comment_id').value = commentId;
        document.getElementById('comment-content').value = `回复 @${userName}: `;
        document.getElementById('comment-content').focus();
    });
});
</script>

评论点赞功能：提升互动性

为了进一步增加用户互动，您可以为评论添加点赞功能。这通常通过JavaScript向/comment/praise接口发送一个POST请求来实现，请求体中需要包含评论的id。

// 假设您已经使用了jQuery，或自行实现Ajax请求
$(document).on('click', '.vote-comment', function() {
  const $this = $(this);
  const commentId = $this.closest('.comment-actions').data("id");

  $.ajax({
    url: "/comment/praise",
    method: "POST",
    data: { id: commentId },
    dataType: "json",
    success: function(res) {
      if (res.code === 0) {
        $this.find(".vote-count").text(res.data.vote_count);
        alert(res.msg || "点赞成功！");
      } else {
        alert(res.msg || "点赞失败，请稍后再试。");
      }
    },
    error: function(xhr, status, error) {
      alert("网络错误，请检查您的连接。");
      console.error("点赞请求失败:", status, error);
    }
  });
});

验证码的集成：防止垃圾评论

为了有效防止垃圾评论和恶意刷屏，安企CMS支持集成验证码功能。首先，您需要在安企CMS后台的全局设置 -> 内容设置中启用Markdown编辑器（文档中提到Captcha与Markdown编辑器相关，实际上Captcha是独立的评论功能辅助）。实际操作中，验证码功能通常在功能管理 -> 网站留言/内容评论的相关设置中启用。

一旦后台启用，您就可以在评论提交表单中加入验证码的HTML和JavaScript代码，如前面提交表单示例中所示。这包括一个隐藏的captcha_id字段、一个输入验证码的文本框以及一个用于显示验证码图片并刷新图片的<img>标签。JavaScript会负责获取并显示验证码图片，以及在用户点击图片时刷新验证码。

通过以上步骤，您可以为您的安企CMS网站构建一个功能完善、互动性强的评论系统，从而更好地吸引和保留用户。

---

常见问题解答 (FAQ)

1. 为什么我的评论列表无法显示或者评论提交后没有出现？

这通常有几个原因。首先，请确保您的模板代码正确使用了