How to use the `add` filter to dynamically add username and timestamp to the `commentList` comments?

AnQiCMS (AnQiCMS) leverages its flexible and powerful template engine, allowing the presentation of website content to have a high degree of freedom.In website operation, the comment section is an important place for user interaction. Clearly displaying the information of the commenters can effectively enhance the reading experience and interaction atmosphere of the comment content.This article will introduce you in detail how to useaddFilter, forcommentListDynamically add user nickname and timestamp in the comments.

Flexible display of comment data: fromcommentListStart

In AnQiCMS, displaying comment content usually usescommentListTemplate tag. This tag helps us easily retrieve the comment list associated with a specific article or product. A basic comment list loop might look like this:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
        <div class="comment-item">
            <p>评论人：{{ item.UserName }}</p>
            <p>评论内容：{{ item.Content }}</p>
            <p>评论时间（原始）：{{ item.CreatedTime }}</p>
        </div>
    {% endfor %}
{% endcommentList %}

Here, item.UserNameThe comment provides the nickname of the commenter, anditem.CreatedTimewhich is a timestamp, usually a series of numbers, such as1609470335. To better present to the user, we usually need to convert this timestamp into a readable date and time format.

Get to knowaddFilter: The tool for concatenation and summation.

addThe filter is a very practical tool in the AnQiCMS template engine, it is mainly used in the following two scenarios:

1. Add numbers:If the object being operated on is a number,addThe filter will perform addition operations.

   
   {{ 5|add:2 }} {# 结果：7 #}
   

2. string concatenation:If the object being operated on is a string, or one of them is a string,addThe filter will concatenate them.

   
   {{ "安企"|add:"CMS" }}    {# 结果：安企CMS #}
   {{ "欢迎"|add:"使用"|add:"AnQiCMS" }} {# 结果：欢迎使用AnQiCMS #}
   

   It is noteworthy that when concatenating strings, you can use multipleaddfilters to make the code more fluid.

Format timestamps:stampToDateusefulness

As mentioned earlier,item.CreatedTimeIt returns a timestamp. Displaying this number directly is not intuitive. AlthoughaddThe filter can be used for string concatenation, but it cannot directly format timestamps into the common date and time format we see (e.g.,

AnQiCMS provides a specialstampToDatetag, which is used to format timestamps into the date and time string you need. Its usage is very concise:

{{ stampToDate(item.CreatedTime, "2006年01月02日 15:04") }}

Here"2006年01月02日 15:04"Is the standard placeholder for date and time formatting in Golang, corresponding to year, month, day, hour, and minute.You can adjust this format string as needed to display different date and time styles.

Use in combination: Dynamically add nickname and format time

Now we have mastered how to get the user's nickname, how to format the timestamp, andaddThe function of combining filters. Next, we will cleverly combine them to dynamically display the reviewer and the review time next to the comment content.

First, we can get it like beforeitem.UserName. Next, usestampToDateLabels willitem.CreatedTimeFormat it into a readable date and time string, and assign it to a temporary variable, such asformattedTime. Finally, we useaddThe filter concatenates the user's nickname, some separator text, and the formatted time string into a complete display text.

Let's see how tocommentListTo implement this effect in a loop:

{% commentList comments with archiveId=archive.Id type="list" limit="6" %}
    {% for item in comments %}
        <div class="comment-item">
            <p>
                {# 使用 stampToDate 格式化时间戳，并赋值给 formattedTime 变量 #}
                {% set formattedTime = stampToDate(item.CreatedTime, "2006年01月02日 15:04") %}
                
                {# 使用 add 过滤器将用户昵称、固定文本和格式化后的时间拼接起来 #}
                <strong>
                    {{ item.UserName|add:" " |add:"(发布于 "|add:formattedTime|add:")" }}
                </strong>
            </p>
            <p>{{ item.Content }}</p>
        </div>
    {% endfor %}
{% endcommentList %}

Through this code, above each comment, there will dynamically display information similar to “Zhang San (Posted on October 26, 2023, 10:30)” followed by the actual content of the comment.This not only improves the readability of the information, but also makes the comment section more professional and humanized.

Summary

AnQiCMS's template engine provides rich tags and filters, which can be flexibly combined to meet various complex page display needs. Masteraddthe filter meetsstampToDateThe usage of tags, you can easily add more dynamic and user-friendly information to the website comment section, thereby significantly improving the website user experience.

---

Frequently Asked Questions (FAQ)

1.addCan the filter directly format timestamps?No.addThe filter is mainly used for arithmetic operations on numbers and string concatenation. To format a timestamp into a readable date and time string, you need to use the AnQiCMS providedstampToDate.

If **2.item.UserNameNick