在 AnQiCMS 中,评论功能是增强网站互动性的重要一环。如何将用户在网站上留下的宝贵评论清晰、美观地展示出来,是网站运营者关注的焦点。AnQiCMS 提供了灵活的模板标签,让我们能够轻松定制评论列表的显示,包括用户昵称、评论内容和发布时间等核心信息。

要实现评论列表的展示,我们主要会用到 AnQiCMS 的模板标签系统。这通常涉及编辑网站模板文件中的特定部分。

1. 确定评论列表的模板文件

首先,我们需要找到负责渲染评论列表的模板文件。根据 AnQiCMS 的模板约定,评论列表页通常位于 comment/list.html。当然,如果您的网站使用了自定义的模板结构,可能需要根据实际情况在您当前文章详情页或特定区块所引用的模板文件中寻找或创建相应的显示位置。

2. 引入 commentList 标签获取评论数据

AnQiCMS 提供了 commentList 标签,专门用于获取指定文章的评论数据。在使用这个标签时,我们需要明确以下几个关键参数:

  • archiveId:这是最重要的一项,它指定了要获取哪个文档(文章、产品等)的评论。通常,在文章详情页中,我们可以通过 archive.Id 来获取当前文章的 ID,并将其传递给 commentList 标签。
  • type:决定评论列表的展示方式。设置为 "page" 可以实现分页功能,而设置为 "list" 则只会显示指定数量的评论,不带分页。
  • limit:控制每页或每次显示评论的数量。例如,limit="10" 表示每页显示 10 条评论。

下面是 commentList 标签的基本使用结构:

{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 在这里循环显示每条评论 #}
{% endcommentList %}

在这里,comments 是一个自定义的变量名,它将包含获取到的评论数据集合,我们将在后续的循环中遍历它。

3. 循环遍历评论并显示所需信息

获取到评论数据集合后,我们可以使用 for 循环标签逐一显示每条评论的详细信息。在循环体内,item(或您自定义的循环变量名)将代表当前评论对象,我们可以通过它访问评论的各项属性。

显示用户昵称 (UserName)

每条评论的用户昵称可以通过 item.UserName 获取。考虑到评论可能处于审核状态,我们可以添加一个简单的判断来提示用户:

<span>
    {% if item.Status != 1 %}
    审核中:{{item.UserName|truncatechars:6}} {# 审核中的用户昵称可能截断显示 #}
    {% else %}
    {{item.UserName}}
    {% endif %}
</span>

显示评论内容 (Content)

评论的具体内容通过 item.Content 获取。需要注意的是,用户发布的评论内容可能包含 HTML 标签,为了确保这些内容能够被正确解析而不是直接显示源代码,我们需要使用 |safe 过滤器。如果评论内容过长,您还可以配合 |truncatechars 过滤器进行截断显示,以保持页面整洁。

{% if item.Status != 1 %}
    该内容正在审核中:{{item.Content|truncatechars:9|safe}} {# 审核中的评论内容可能截断显示并加提示 #}
{% else %}
    {{item.Content|safe}}
{% endif %}

显示发布时间 (CreatedTime)

评论的发布时间 (item.CreatedTime) 是一个时间戳,我们需要使用 AnQiCMS 提供的 stampToDate 标签对其进行格式化,以便以更易读的方式呈现给用户。stampToDate 标签的第二个参数是 Go 语言的时间格式化字符串,您可以根据需要调整。例如,"2006-01-02 15:04" 会显示为“年-月-日 时:分”。

<span>{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>

显示回复评论 (Parent)

AnQiCMS 的评论系统还支持多级回复。如果当前评论是对另一条评论的回复,您可以通过 item.Parent 对象获取到父级评论的信息,从而构建出更具层级感的评论列表。

{% if item.Parent %}
<blockquote>
    {# 显示父级评论的用户名和内容 #}
    <span>回复 {{item.Parent.UserName}}:</span>
    {% if item.Parent.Status != 1 %}
        该内容正在审核中:{{item.Parent.Content|truncatechars:100|safe}}
    {% else %}
        {{item.Parent.Content|truncatechars:100|safe}}
    {% endif %}
</blockquote>
{% endif %}

4. 添加分页功能

如果评论数量较多,分页功能将极大地提升用户体验。在 commentList 标签中设置 type="page" 后,我们就可以配合 pagination 标签来显示分页链接。

{# 假设上面的 commentList 标签已设置为 type="page" #}
<div>
    {% pagination pages with show="5" %}
        {# 首页 #}
        <a class="{% if pages.FirstPage.IsCurrent %}active{% endif %}" href="{{pages.FirstPage.Link}}">{{pages.FirstPage.Name}}</a>
        {# 上一页 #}
        {% if pages.PrevPage %}
        <a href="{{pages.PrevPage.Link}}">{{pages.PrevPage.Name}}</a>
        {% endif %}
        {# 中间多页 #}
        {% for pageItem in pages.Pages %}
        <a class="{% if pageItem.IsCurrent %}active{% endif %}" href="{{pageItem.Link}}">{{pageItem.Name}}</a>
        {% endfor %}
        {# 下一页 #}
        {% if pages.NextPage %}
        <a href="{{pages.NextPage.Link}}">{{pages.NextPage.Name}}</a>
        {% endif %}
        {# 尾页 #}
        <a class="{% if pages.LastPage.IsCurrent %}active{% endif %}" href="{{pages.LastPage.Link}}">{{pages.LastPage.Name}}</a>
    {% endpagination %}
</div>

5. 完整代码示例

将以上片段整合,一个基本的、包含用户昵称、评论内容、发布时间及分页功能的评论列表显示代码如下:

”`twig {# 假设 archive.Id 是当前文章的 ID,您可以根据实际情况替换 #}

<h3>用户评论</h3>
{% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {% for item in comments %}
    <div class="comment-item">
        <div class="comment-meta">
            <span class="user-name">
                {% if item.Status != 1 %}
                    审核中:{{item.UserName|truncatechars:6}}
                {% else %}
                    {{item.UserName}}
                {% endif %}
            </span>
            {% if item.Parent %}
                <span class="reply-to">回复</span>
                <span class="parent-user-name">
                    {% if item.Parent.Status != 1 %}
                        审核中:{{item.Parent.UserName|truncatechars:6}}
                    {% else %}
                        {{item.Parent.UserName}}
                    {% endif %}
                </span>
            {% endif %}
            <span class="publish-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
        </div>
        <div class="comment-content">
            {% if item.Status != 1 %}
                <p class="moderating-tip">该内容正在审核中,稍后可见。</p>
                <p class="comment-text">{{item.Content|truncatechars:100|safe}}</p>
            {% else %}
                {% if item.Parent %}
                    <blockquote class="parent-comment-quote">
                        <p>{{item.Parent.Content|truncatechars:100|safe}}</p>
                    </blockquote>
                {% endif %}
                <p class="comment-