How to display user group details, user avatar, username, and other personal information in a template?

In website operation, providing users with personalized experiences, enhancing community interaction, and clearly displaying the rights and interests of different user groups are the key to improving user stickiness and website value.AnQiCMS as a powerful content management system provides flexible template tags, allowing us to easily display users' personal information (such as username, avatar) and details of their user groups on the front-end page.

This article will delve into how to use AnQiCMS template tags to display these dynamic information, helping you build a more attractive and interactive website.

一、Get and display user personal information

In the template system of AnQiCMS,userDetailThe tag is a powerful tool for obtaining user personal information. Whether you want to display user information on the user's personal center page, next to the article author, or in the comment section, this tag can come in handy.

userDetailThe basic usage of the label is:{% userDetail 变量名称 with name="字段名称" id="用户ID" %}.idThe parameter is required, it specifies the specific user you want to query.

1. Display username and avatar

Username and avatar are the most common elements for personal information display. Suppose we want to display the username and avatar for the user with ID 123:

{% set userId = 123 %} {# 假设这是您要展示的特定用户ID #}

{% userDetail userInfo with id=userId %}
{% if userInfo %}
    <div class="user-profile">
        <img src="{{ userInfo.AvatarURL }}" alt="{{ userInfo.UserName }}的头像" class="user-avatar">
        <span class="user-name">{{ userInfo.UserName }}</span>
    </div>
{% else %}
    <span class="guest-name">匿名用户</span>
{% endif %}

In the above example:

  • We first go through{% set userId = 123 %}An ID of a user to be queried has been set. In practical applications, thisuserIdcould come from the author ID of the current article, the ID of the comment publisher, or obtained through URL parameters.
  • {% userDetail userInfo with id=userId %}Assign the details of the user IDuserIdtouserInfoa variable.
  • userInfo.AvatarURLThe avatar image address of the user will be displayed. If you need the full-size avatar, you can useuserInfo.FullAvatarURL.
  • userInfo.UserNamethen the nickname of the user will be output directly.
  • We have also added one{% if userInfo %}Judgment, in case the user does not exist, it can display "Anonymous User" or other alternative information to ensure the stability of the page.

2. Get more user details

userDetailThe label supports the acquisition of various personal information fields, allowing you to enrich the display content as needed:

  • userInfo.RealName: The real name of the user.
  • userInfo.Introduce: The personal introduction of the user.
  • userInfo.Email: Users email address.
  • userInfo.Phone: Users phone number.
  • userInfo.Link: Link to users personal homepage (if provided by the system).
  • userInfo.LastLogin: Timestamp of users last login, which needs to be processed throughstampToDate.

For example, display more detailed information about the user on the personal center page:

{% set currentUserId = 456 %} {# 假设这是当前登录用户的ID #}

{% userDetail profileInfo with id=currentUserId %}
{% if profileInfo %}
    <div class="user-detail-card">
        <h2>{{ profileInfo.UserName }} 的个人资料</h2>
        <img src="{{ profileInfo.FullAvatarURL }}" alt="{{ profileInfo.UserName }}的头像" class="profile-avatar large">
        <p>真实姓名: {{ profileInfo.RealName }}</p>
        <p>邮箱: {{ profileInfo.Email }}</p>
        <p>联系电话: {{ profileInfo.Phone }}</p>
        <p>个人简介: {{ profileInfo.Introduce }}</p>
        <p>最近登录: {{ stampToDate(profileInfo.LastLogin, "2006-01-02 15:04") }}</p>
        <a href="{{ profileInfo.Link }}" class="user-homepage-link">访问我的主页</a>
    </div>
{% else %}
    <p>抱歉，未找到该用户的信息。</p>
{% endif %}

Second, display the details of user groups

AnQiCMS supports user grouping management, different user groups may represent different membership levels or permissions.userGroupDetailTags allow us to display the detailed information of these groups.

userGroupDetailThe usage of the label is:{% userGroupDetail 变量名称 with name="字段名称" id="用户组ID" %}or{% userGroupDetail 变量名称 with name="字段名称" level="用户组等级" %}. You need to provideid(the unique identifier of the user group) orlevel(the level of the user group), either one of them.

1. Display the name of the user's group

We usually first obtain the user'sGroupId, and then use this ID to query the details of the user group. Here is an example of combining the two:

`twig {% set userId = 123 %} {# Again assuming this is the user ID to be queried #}

{% userDetail userWithGroupInfo with id=userId %} {% if userWithGroupInfo English %}

<div class="user-badge">
    <img src="{{ userWithGroupInfo.AvatarURL }}" alt="{{ userWithGroupInfo.UserName }}的头像" class="small-avatar">
    <span class="username">{{ userWithGroupInfo.UserName }}</span>

    {% userGroupDetail groupDetails with id=userWithGroupInfo.GroupId %}
    {% if groupDetails %}
        <span class="group-title">{{ groupDetails.Title }}</span>
        <span class="group-level">LV.{{ groupDetails.Level }}</span>
        {% if groupDetails.Description %}
            <span class="group-description