In website operation, user-generated content (UGC) is an important element to enhance interaction and activity, whether it is the comments below the articles or the overall message board of the website, it can effectively promote user communication and feedback collection.AnQiCMS (AnQiCMS) has fully considered the importance of user interaction from the beginning of its design and has provided powerful and flexible functions to manage and display the content submitted by users.

It is crucial to understand the template mechanism and built-in tags in AnQi CMS to display user-submitted comments or messages.AnQi CMS uses a syntax similar to the Django template engine, calling back-end data through specific tags and rendering it in the front-end template.

Smartly use template files and tags

The Anqi CMS has set specific template files and tags for the comment list and message board, making the display of content intuitive.

Generally, it is recommended to display the comment list incomment/list.htmlorcomment_list.htmlComplete in the template, and the message board recommends using it.guestbook/index.htmlorguestbook.htmlThese predefined template paths make content organization more standardized.

Display the user's submitted content in the comment list.

Want to display user comments below the article or product detail page? Anqicms provides a concise and efficient template tag:commentList.

  1. Call comment data: commentListTags are core. In your comment template file (for examplecomment/list.html), you can use it to retrieve comment data related to specific content. This tag usually needs aarchiveIdParameters are used to specify which article or product these comments belong to. For example:

    {% commentList comments with archiveId=archive.Id type="page" limit="10" %}
    {# 遍历评论列表 #}
    {% for item in comments %}
        {# 显示单条评论内容 #}
    {% endfor %}
{% endcommentList %}

    Herearchive.IdIt will automatically obtain the article or product ID of the current page.type="page"Means enabling pagination feature,limit="10"Then limit the display of 10 comments per page.

  2. Display comment details:In{% for item in comments %}Inside the loop, you can access the details of each comment, for example:

    • {{item.UserName}}: Nickname of the comment user.
    • {{item.Content}}: The specific content of the comment.
    • {{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}: Comment submission time, usingstampToDateFormat labels.
    • {{item.Status}}: Comment review status. This is a very important field, usually we decide whether to display this comment on the front end based on it. For example, only displayStatusWith1(Reviewed and approved) comment.
    • {{item.Parent}}: If this is a reply comment, this field will contain the complete information of the replied comment, which is very useful for building a multi-level reply comment section.

    A basic comment display structure may look like this:

    {% for item in comments %}
    {% if item.Status == 1 %} {# 只显示已审核的评论 #}
    <div class="comment-item">
        <div class="comment-header">
            <strong>{{item.UserName}}</strong>
            {% if item.Parent %}
                <span>回复</span> <strong>{{item.Parent.UserName}}</strong>
            {% endif %}
            <span class="comment-time">{{stampToDate(item.CreatedTime, "2006-01-02 15:04")}}</span>
        </div>
        <div class="comment-content">
            {% if item.Parent %}
            <blockquote>{{item.Parent.Content|truncatechars:100}}</blockquote> {# 截取父评论内容 #}
            {% endif %}
            <p>{{item.Content}}</p>
        </div>
        {# 这里可以添加回复按钮、点赞功能等交互元素 #}
    </div>
    {% else %}
    <div class="comment-item pending">
        <p>您的评论正在审核中，请耐心等待。</p>
    </div>
    {% endif %}
{% endfor %}

  3. Integrated comment pagination:If there are many comments, pagination is essential. IncommentListtag is set totype="page"After that, you can cooperate withpaginationCreate pagination links with tags.

    {% pagination pages with show="5" %}
    <div class="pagination-links">
        <a href="{{pages.FirstPage.Link}}">首页</a>
        {% if pages.PrevPage %}<a href="{{pages.PrevPage.Link}}">上一页</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}}">下一页</a>{% endif %}
        <a href="{{pages.LastPage.Link}}">尾页</a>
    </div>
{% endpagination %}

  4. Comment submission form:Just displaying comments is not enough, users also need a submission comment entry. This is usually a standard HTML form, itsactionproperty points to/comment/publishInterface. The form must includearchive_id(hidden field),user_nameandcontentfields.

Display the content submitted by the user on the message board

The AnqiCMS comment board feature is also flexible, allowing users to customize comment fields in the background to collect diverse information.

  1. Call the comment board field:The display of the comment board is usually inguestbook/index.htmlThe template implements. The core tag isguestbookIt will retrieve the message field information you defined in the background.

    {% guestbook fields %}
    <form method="post" action="/guestbook.html">
        {# 遍历后台定义的留言字段 #}
        {% for item in fields %}
            {# 根据字段类型生成表单元素 #}
        {% endfor %}
        <button type="submit">提交留言</button>
    </form>
{% endguestbook %}

  2. Dynamically generate form fields: guestbookthe tags returned byfieldsThe array contains detailed information about each custom field, such asitem.Name(Field Display Name,)item.FieldName(Form Submission Name,)item.Type(Field Type, such as,)text,textarea,radio(and so on,),item.Required(Is required) anditem.Items(Options for selecting a field type). You can according to,)item.TypeDynamically generate different HTML form elements:

    {% for item in fields %}
    <div>
        <label>{{item.Name}} {% if item.Required %}<span style="color:red">*</span>{% endif %}</label>
        <div>
            {% if item.Type == "text" or item.Type == "number" %}
                <input type="{{item.Type}}" name="{{item.FieldName}}" placeholder="{{item.Content}}" {% if item.Required %}required{% endif %}>
            {% elif item.Type == "textarea" %}
                <textarea name="{{item.FieldName}}" placeholder="{{item.Content}}" rows="5" {% if item.Required %}required{% endif %}></textarea>
            {% elif item.Type == "radio" %}
                {% for val in item.Items %}
                    <label><input type="radio" name="{{item.FieldName}}" value="{{val}}" {% if loop.index == 1 %}checked{% endif %}> {{val}}</label>
                {% endfor %}
            {# 更多类型如 checkbox, select 类似处理 #}
            {% endif %}
        </div>
    </div>
{% endfor %}

    This method allows you to flexibly adjust the message board fields in the background without modifying the front-end code.

  3. Message submission:After the message form is built, users can conveniently submit their messages