How to display user registration or group details (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 is 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 call capabilities, making the display of this information easy and simple.

Understand the AnQiCMS user and group data

In the AnQiCMS backend, user data and user group data are independent and interrelated.Each user has unique ID, username, avatar information, and they are also assigned to specific user groups, and each user group also has its own name and level.The information needs to be displayed on the front end, we mainly use the AnQiCMS provideduserDetailanduserGroupDetailthese two template tags.

Display user personal information

To display user details, such as username, avatar, and level, we usually start by fetching user details. Suppose we want to display the information of the currently logged-in user or a specific user.userDetailThe label is our preference.

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

{% 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 %}It will depend 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 }}displays the user's avatar. Here we usethumbA filter that can automatically generate optimized avatar sizes based on the thumbnail configuration in the background content settings, thereby improving page loading speed. If the user has not set an avatar, we also through{% if ... else ... %}Determine whether to display a default avatar.
  • {{ userProfile.Email }}Simply displayed 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 of the user profile, such asRealName(Real name),Introduce(Personal introduction) and so on.

Display user group information

User groups are an important feature in AnQiCMS for managing user permissions and identities, such as VIP members, ordinary users, and so on.Each user belongs to a specific user group, and the user group itself also has its name and level.To display the details of the user's group, we first need to obtain the details from the user's informationGroupIdThen useuserGroupDetail.

Continuing with the above example, we can display the user's personal information while obtaining and displaying their 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 pass through{% if userProfile.GroupId > 0 %}Determine if the user has been assigned to a specific user group (typically, an ID greater than 0 indicates a valid group).
  • {% userGroupDetail groupInfo with id=userProfile.GroupId %}tags touserProfile.GroupIdAs a parameter, obtain the detailed information of the user group and store it in.groupInfoVariable.
  • We can call it afterwards{{ groupInfo.Title }}and the group name{{ groupInfo.Level }}to display to the front-end users.

Combine the user's personal information with the user group information to display, which can make the content of the page more rich and personalized, for example, displaying the user level of the评论者评论者 in the comments section, or displaying the VIP indicator next to the author's introduction.

Practical skills and precautions

  1. Data security considerations:When displaying user data on the front end, be sure to pay attention to the sensitivity of the information.For example, the user's mobile number, detailed address, or password and other privacy information should not be directly displayed on the front page 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 as needed, 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 incorrect display on the page, we can use AnQiCMS filters to provide default values for missing data. For example,{{ userProfile.Introduce|default:"该用户暂无简介。" }}When the personal introduction is empty, it will display "This user has no introduction.".
  3. Image optimization:User avatars and related images play an important role in website loading speed. In addition to usingthumbFiltering thumbnail processing outside, the "Content Settings" on the AnQiCMS background also provides whether to enable Webp