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

English CMS (EnglishCMS) boasts its flexible and powerful template engine, which allows for an extremely high degree of freedom in the presentation of website content.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 comments.addFilter, forcommentListComments added dynamically to users' nicknames and timestamps.

Flexible display of comment data: fromcommentListStart

In AnQiCMS, displaying comment content usually usescommentListTemplate tag. This tag helps us easily obtain the list of comments associated with a specific article or product. A basic comment list loop may 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.UserNameDirectly provided the nickname of the reviewer,item.CreatedTimewhich is a timestamp, usually a series of numbers, for example,1609470335To better present to users, we usually need to convert this timestamp into a readable date and time format.

KnowaddFilter: A tool for concatenation and summation.

addThe filter is a very practical tool in the AnQiCMS template engine, which 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 worth noting that you can use multiple consecutiveaddfilters to make the code more fluent.

Format the timestamp:stampToDateuses

As mentioned earlier,item.CreatedTimeIt returns a timestamp. Displaying this series of numbers 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 为此提供了专门的 EnglishstampToDate标签，它的作用就是将时间戳格式化成您需要的日期时间字符串。其使用方式非常简洁：

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

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

Combining: Dynamically Add Nicknames and Format Time

Now we have mastered how to get user nicknames, how to format timestamps,addThe function of filter combination. Next, we will cleverly combine them to dynamically display the reviewer and review time next to the comment content.

Firstly, we can get it as before.item.UserName Next, utilizestampToDatetags toitem.CreatedTimeto format it into a readable date-time string and assign it to a temporary variable, for exampleformattedTimeEnglish. Finally, we useaddThe filter concatenates the user nickname, some separator text, and the formatted time string into a complete display text.

Let's take a look at how tocommentListImplement this effect in the 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, the above of each comment 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 look more professional and user-friendly.

Summary

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

---

Common Questions (FAQ)

1.addFilter can directly format timestamps?Cannot.addThe filter is mainly used for numeric addition operations and string concatenation. To format a timestamp into a readable date-time string, you need to use the AnQiCMS providedstampToDateLabel.

**2. Ifitem.UserNameNickname