How to display the detailed information of the currently logged-in user (such as username, avatar, VIP status)?

In AnQi CMS, displaying the detailed information of the currently logged-in user, such as username, avatar, and VIP status, is a crucial step to enhance user experience and build a personalized website.Safe CMS enables us to easily implement these features with its flexible template engine.This article will introduce in detail how to display this information on your website's frontend.

Get the basic information of the currently logged-in user

The template system provided by Anqi CMS offersuserDetailTags, it is the core tool to obtain various information of the currently logged-in user. This tag can directly obtain the user data of the current session without the need for us to manually pass the user ID.

We can use it like thisuserDetailUse tags to get a user's basic information:

{# 假设我们想获取当前用户的用户名和头像 #}
{% userDetail currentUser with name="UserName" %}
{% userDetail userAvatar with name="AvatarURL" %}

{% if currentUser %}
    <div class="user-info">
        <img src="{{ userAvatar }}" alt="{{ currentUser }}" class="user-avatar" />
        <span class="username">{{ currentUser }}</span>
    </div>
{% else %}
    <div class="user-info">
        <a href="/login">请登录</a>
    </div>
{% endif %}

In the above code:

  • {% userDetail currentUser with name="UserName" %}Assign the username of the currently logged-in user tocurrentUsera variable.
  • {% userDetail userAvatar with name="AvatarURL" %}Then get the user's avatar URL and assign it touserAvatara variable.
  • We first go through{% if currentUser %}Determine if the user is logged in. IfcurrentUserthe variable has a value, it means the user is logged in, and we can display their avatar and username.
  • AvatarURLThe field will provide the user's avatar image link. You can also useFullAvatarURLto get the full avatar link (if your storage configuration is different).

Display the user's VIP status and expiration date

The [en] built-in user group management and VIP system, so we can combine the user's group information and VIP expiration time to display the VIP status.

Firstly, we can fromuserDetailRetrieve the user from the tagGroupId(User's group ID) andExpireTime(VIP expiration time). Then, useuserGroupDetailthe tag based onGroupIdTo get detailed information about a user group, such as the name of the user group (e.g., "VIP Member

{# 获取当前用户的所有详细信息，包括GroupId和ExpireTime #}
{% userDetail user with name="Id" %} {# 确认获取到用户ID以判断登录状态 #}
{% if user.Id %}
    {% userDetail userDetailData with name="UserName" %}
    {% userDetail userAvatar with name="AvatarURL" %}
    {% userDetail userGroupId with name="GroupId" %}
    {% userDetail vipExpireTime with name="ExpireTime" %}

    <div class="user-profile">
        <img src="{{ userAvatar }}" alt="{{ userDetailData }}" class="user-avatar" />
        <span class="username">{{ userDetailData }}</span>

        {% if userGroupId %}
            {# 根据GroupId获取用户组详情，例如用户组的标题（VIP等级名称） #}
            {% userGroupDetail userGroup with id=userGroupId %}
            {% if userGroup %}
                <span class="user-vip-status">
                    {% if userGroup.Title %}
                        {{ userGroup.Title }}
                    {% else %}
                        普通用户
                    {% endif %}
                </span>
                {# 格式化VIP过期时间，并判断是否过期 #}
                {% if vipExpireTime > 0 %}
                    {% set formattedExpireTime = stampToDate(vipExpireTime, "2006-01-02") %}
                    {% set currentTime = now "2006-01-02" | stampToDate %} {# 获取当前日期并转换为时间戳 #}
                    {% if vipExpireTime > currentTime %}
                        <span class="vip-expiration">（有效期至：{{ formattedExpireTime }}）</span>
                    {% else %}
                        <span class="vip-expired">（VIP已过期）</span>
                    {% endif %}
                {% endif %}
            {% endif %}
        {% else %}
            <span class="user-vip-status">普通用户</span>
        {% endif %}
    </div>
{% else %}
    <div class="user-profile">
        <a href="/login">您尚未登录，请点击登录</a>
    </div>
{% endif %}

In this code block, we:

  • Firstly use{% userDetail user with name="Id" %}Retrieve the current logged-in user's ID and use it to determine if the user is logged in.
  • If the user is already logged in, we will continue to retrieve the username, avatar URL, user group ID, and VIP expiration time.
  • {% userGroupDetail userGroup with id=userGroupId %}Tags are used to filter byuserGroupIdRetrieve the detailed information of the corresponding user group and assign it touserGroupa variable.
  • userGroup.TitleIt will display the name of the user group, for example, “VIP Member”.
  • vipExpireTimeIt is a timestamp, we use{{ stampToDate(vipExpireTime, "2006-01-02") }}The filter formats it into a readable date.
  • To determine if the VIP has expired, we also need to get the current timestamp and compare it withvipExpireTimeIfvipExpireTimeIf it is later than the current time, show the validity period; otherwise, show it has expired.

By combining these tags, you can flexibly and clearly display the detailed information of the currently logged-in user at any location on the website, such as the top navigation bar, sidebar, or personal center page, greatly enhancing the user experience.The strength and ease of use of AnQi CMS make these seemingly complex personalized features accessible.

Common Questions (FAQ)

  1. Q: How to determine if the user has logged in?Answer: In the template of Anqi CMS, you can determine if a user is logged in by checking whether a certain field of the user object exists. For example, you can use{% userDetail user with name="Id" %}get the user ID, then use{% if user.Id %}or{% if userDetailData %}(If the username has been assigned touserDetailData)to determine if the user is logged in. If the user is not logged in, these fields are usually empty or zero.

  2. Question: What should I do if the user's avatar does not display or displays a default avatar?Answer: If the user's avatar does not display, please first checkAvatarURLwhether the field has a value. You can set it in the template.<img>Set a backup default avatar image link for tags to ensure that the page can still display normally if the user has not uploaded an avatar. For example:<img src="{{ userAvatar if userAvatar else '/static/images/default-avatar.png' }}" alt="{{ currentUser }}" class="user-avatar" />Ensure that the user has uploaded an avatar in the background settings and that the image path is correct and accessible.

  3. Question: Why does the VIP status display 'General User' instead of a specific level (such as 'Gold Member')?Answer: This is usually due to the current logged-in user'sGroupIdNo correct association with the corresponding VIP user group, oruserGroupDetailLabel failed to be retrieved