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

In website operations, providing personalized experiences for users, enhancing community interaction, and clearly displaying the rights and interests of different user groups is the key to increasing 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 the user groups they belong to on the front-end page.

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

First, obtain and display user personal information

In the AnQiCMS template system,userDetailThe tag is a 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 information, or in the comments section, this tag can come in handy.

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

1. Display username and avatar

Username and profile picture are the most common elements of personal information display. Suppose we want to display the username and profile picture of 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 pass through{% set userId = 123 %}Set a user ID to be queried. In practice, thisuserIdmay 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 %}Set the user ID touserIdAssign the detailed information touserInfoVariable.
  • userInfo.AvatarURLWill display the user's avatar image address. If you need a full-size avatar, you can useuserInfo.FullAvatarURL.
  • userInfo.UserNameThen directly output the user's nickname.
  • We also added one{% if userInfo %}Judgment, in case the user does not exist, it can display 'Anonymous User' or other alternative information to ensure page stability.

2. Get more user details

userDetailTags support 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.EmailUser's email address.
  • userInfo.PhoneUser's phone number.
  • userInfo.LinkUser's personal homepage link (if provided).
  • userInfo.LastLoginTimestamp of user's last login, which needs to be processed throughstampToDateformatted.

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 %}

2. Display user group details

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

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

1. Display the name of the user's group.

We usually get the user firstGroupIdThen we 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 %}

<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