How to integrate the comment submission form and handle user comments?

In modern website operations, user comments are an important way to enhance the interaction and activity of content.AnQiCMS (AnQiCMS) provides a powerful and flexible comment feature that allows you to easily integrate a comment submission form on your website and effectively manage user comments.Next, we will explore how to achieve this goal in AnQiCMS.

I. Preparations and overview of the comment feature in the background

Before integrating the comment form, we first need to confirm that the comment feature is enabled in the background.AnQi CMS usually concentrates such interactive features in the 'Function Management' module.Here, you can find the 'Content Comments' option, to enable and disable the comment feature as a whole, as well as some basic comment rule settings.

In addition, to ensure the security of comment submission and avoid the泛滥 of spam comments, it is strongly recommended to enable captcha functionality.You can find and enable the captcha option under the "Content Settings" in the "Background Settings".After enabling, when integrating the comment form into the template, additional code related to the captcha needs to be added to coordinate with the backend settings.The "Content Comments" management page provided by the background, which is also the main battlefield for your future review, editing, and deletion of user comments.

II. Integrating the comment submission form in the template

Integrating the comment submission form into the detail page of the website (such as the article detail page or product detail page) is the first step for users to post comments.The Anqi CMS template system is very flexible, allowing you to build forms with simple tags and HTML structure.

usually, the comment form is placed in the detail page template file, for example{模型table}/detail.html. You need to build a standard HTML<form>element and specify its submission address as/comment/publish.

the core elements of the form include:

• Hidden fieldarchive_id: This is the identifier associated with specific content in the comment. You can usearchiveDetailtags to dynamically retrieve the document ID of the current page, for example{% archiveDetail with name="Id" %}, and use it asarchive_idthe value.
• Hidden fieldreturnThis field is used to specify the data format returned by the backend. It is usually set tohtmlorjson. If you want the page to refresh and display a success message, you can usehtml; Set to asynchronous processing through JavaScriptjson.
• Usernameuser_name: This is a text input box for the user to fill in their nickname.
• Comment contentcontentThis is a multi-line text field(textarea) for users to enter comments.
• Parent comment IDparent_id(Optional)When a user replies to a specific comment, this field is needed to establish a parent-child relationship. It is usually also a hidden field, set dynamically through JavaScript.

Integration of captcha

If the backend has enabled captcha, then the form must contain fields related to captcha. This usually includes a hiddencaptcha_idfield, one for user input.captchaText box, as well as a display of the captcha image<img>Label. Additionally, a JavaScript code is required to request the captcha image and refresh the image when the user clicks it.

For example, you can add the following code to the form:

<form method="post" action="/comment/publish">
  <input type="hidden" name="return" value="html">
  <input type="hidden" name="archive_id" value="{% archiveDetail with name="Id" %}">
  <input type="hidden" name="parent_id" value="0" id="comment-parent-id"> {# 默认为0，回复时动态修改 #}

  <div>
    <label for="user_name">您的昵称</label>
    <input type="text" name="user_name" id="user_name" required placeholder="请填写您的昵称">
  </div>

  <div>
    <label for="content">评论内容</label>
    <textarea name="content" id="content" required rows="5" placeholder="请留下您的宝贵评论"></textarea>
  </div>

  {# 验证码区域，如果后台启用 #}
  <div class="captcha-area">
    <input type="hidden" name="captcha_id" id="captcha_id">
    <input type="text" name="captcha" required placeholder="请填写验证码">
    <img src="" id="get-captcha" alt="验证码" title="点击刷新验证码">
    <script>
      // 推荐使用原生JS或您网站已引入的jQuery
      document.getElementById('get-captcha').addEventListener("click", function () {
        fetch('/api/captcha')
          .then(response => response.json())
          .then(res => {
            document.getElementById('captcha_id').value = res.data.captcha_id;
            document.getElementById('get-captcha').src = res.data.captcha;
          })
          .catch(err => console.error('获取验证码失败:', err));
      });
      document.getElementById('get-captcha').click(); // 页面加载时自动获取一次验证码
    </script>
  </div>

  <button type="submit">提交评论</button>
  <button type="reset">重置</button>
</form>

3. Display the user comment list

After submitting the form, users naturally want to see the comments that have been published. In the detail page template, use the CMS provided by Anqi.commentListTags, it can be very convenient to get and display the comment list.

Use{% commentList comments with archiveId=archive.Id type="page" limit="10" %}Such tags, you can:

• ByarchiveIdThe parameter specifies which document's comments to retrieve. This is also used here.archive.IdTo dynamically obtain the current document ID.
• type="page"Indicates that you want the comment list to support pagination, so that it can be配合paginationTag display pagination navigation.
• limit="10"It controls the number of comments displayed per page.

ByforLoop throughcommentsVariable, you can display the detailed information of each comment, such asitem.UserName(Commenter nickname),item.Content(Comment content) anditem.CreatedTime(Comment time).stampToDateThe filter can format timestamps into a readable date and time format.

AnQi CMS provides for the reply feature,item.ParentField, if the comment is a reply to another comment, this field will contain information about the replied comment, making it easier for you to build nested comment display styles. At the same time,item.StatusThe field can be used to determine whether a comment has passed review, you can decide whether to display or prompt the review status according to its value (Status = 1Indicates that it has been reviewed)})

Example of comment list and pagination:

`html

{% for item in comments %}
  {% if item.Status == 1 %} {# 只显示已审核的评论 #}
    <div class="comment-item">
      <div class="comment-meta">
        <span>{{ item.UserName }}</span>
        <span>- {{ stampToDate(item.CreatedTime, "2006-01-02 15:04") }}</span>
      </div>
      {% if item.Parent %}
        <blockquote class="reply-to">
          回复 {{ item.Parent.UserName }}: {{ item.Parent.Content|truncatechars:50 }}
        </blockquote>
      {% endif %}
      <p>{{ item.Content }}</p>
      <div class="comment-actions">
        <a href="javascript:;" class="reply-btn" data-comment-id="{{item.Id}}" data-user-name="{{item.UserName}}">回复</a>
        <a href="javascript:;" class="like-btn" data-comment-id="{{item.Id}}">赞 (<span>{{item.VoteCount}}</span>)</a>
      </div>
    </div>
  {% else %}
    <div class="