How to display the detailed information of user registration or group (such as username, level, avatar) on the front page?

In website operation, displaying rich user-related information on the front page is an effective way to enhance user experience and community activity.Whether it's displaying the author's avatar, the user's level, or the username at registration, these personalized details can make the website more vibrant.AnQiCMS as a powerful content management system, provides us with very flexible template tags and data calling capabilities, making the display of this information easy and simple.

Understanding the user and group data of AnQiCMS

In the AnQiCMS backend, user data and user group data are independent and interrelated.Each user has their unique ID, username, avatar, and other information. At the same time, they are also assigned to specific user groups, and each user group also has its own name and level.userDetailanduserGroupDetailThese two template tags.

Display user personal information

To display detailed information about a user, such as username, avatar, and level, etc., we usually start by obtaining user details. Suppose we want to display the profile of the currently logged-in user or a specific user's information.userDetailLabels are our first choice.

For example, when displaying author information on the user's personal center page, or on the article detail page, we may have already obtained the current user or author's ID in the template context. With this ID, we can retrieve all the user's information in this way:

{% userDetail userProfile with id=user.Id %}
  <div>
    <h4>用户名：{{ userProfile.UserName }}</h4>
    {% if userProfile.AvatarURL %}
      <img src="{{ userProfile.AvatarURL|thumb }}" alt="{{ userProfile.UserName }}的头像" style="width: 80px; height: 80px; border-radius: 50%;">
    {% else %}
      <img src="/static/images/default-avatar.png" alt="默认头像" style="width: 80px; height: 80px; border-radius: 50%;">
    {% endif %}
    <p>邮箱：{{ userProfile.Email }}</p>
    <p>最近登录时间：{{ stampToDate(userProfile.LastLogin, "2006-01-02 15:04") }}</p>
  </div>
{% enduserDetail %}

In this code block:

  • {% userDetail userProfile with id=user.Id %}depending on the contextuser.Idto retrieve the full information of the user, and assign it touserProfilethis variable.
  • {{ userProfile.UserName }}directly displays the user's name.
  • {{ userProfile.AvatarURL|thumb }}displayed the user's avatar. Here we usedthumbA filter that can automatically generate optimized avatar sizes based on the thumbnail settings in the background content configuration, thus improving page loading speed. If the user has not set an avatar, we also provide{% if ... else ... %}Determine and display a default avatar.
  • {{ userProfile.Email }}Simply displays the user's registered email.
  • {{ stampToDate(userProfile.LastLogin, "2006-01-02 15:04") }}Demonstrates how to format a timestamp into a readable date and time.

In this way, we can flexibly retrieve and display various fields from the user profile, such asRealName(Real Name),Introduce(Personal Introduction) and others.

Display user group information

User grouping is an important feature in AnQiCMS for managing user permissions and identity, such as VIP members, ordinary users, etc.Each user belongs to a specific user group, and the user group itself has its name and level.GroupId, and then useuserGroupDetailLabel.

Following the above example, we can display the user's personal information while obtaining and showing their user group information:

{% userDetail userProfile with id=user.Id %}
  <div>
    <h4>用户名：{{ userProfile.UserName }}</h4>
    <p>邮箱：{{ userProfile.Email }}</p>
    {% if userProfile.GroupId > 0 %} {# 检查用户是否属于某个分组 #}
      {% userGroupDetail groupInfo with id=userProfile.GroupId %}
        <p>用户等级：{{ groupInfo.Title }} (Lv.{{ groupInfo.Level }})</p>
        <p>等级描述：{{ groupInfo.Description }}</p>
      {% enduserGroupDetail %}
    {% else %}
      <p>用户等级：普通用户</p>
    {% endif %}
  </div>
{% enduserDetail %}

Here:

  • We first go through{% if userProfile.GroupId > 0 %}Determine if the user has been assigned to a user group (usually, an ID greater than 0 indicates a valid group).
  • {% userGroupDetail groupInfo with id=userProfile.GroupId %}labels touserProfile.GroupIdAs a parameter, obtain the detailed information of the user group and store it ingroupInfoa variable.
  • Then, we can call{{ groupInfo.Title }}(Group name) and{{ groupInfo.Level }}(Group level) to display to the front-end users.

Combining user personal information with user group information can make the page content more rich and personalized, for example, displaying the user level of the commentor in the comments section, or showing the VIP identifier next to the author's introduction, etc.

Useful Tips and Considerations

  1. Data Security Considerations:Ensure the sensitivity of information is paid attention to when displaying user data on the front end.For example, users' phone numbers, detailed addresses, or passwords, and other private information should not be displayed on the front end directly unless there is a clear business need and the user's consent is obtained.The template design philosophy of AnQiCMS itself also encourages us to call on demand, reducing the risk of sensitive information leakage.
  2. Default Value Handling:Some users may not have set a profile picture or bio.To avoid blank or error display on the page, we can use AnQiCMS filters to provide default values for these missing data.{{ userProfile.Introduce|default:"该用户暂无简介。" }}In this way, when there is no personal introduction, it will display “This user has no introduction.”.
  3. Image Optimization:Users' avatars and related images play a significant role in website loading speed. Besides usingthumbFilter processing thumbnail, the 'Content Settings' in AnQiCMS backend also provides 'Whether to enable Webp'}]