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

In AnQi CMS, displaying detailed information about the currently logged-in user, such as username, avatar, and VIP status, is a key step in enhancing user experience and building a personalized website.AnQi CMS with its flexible template engine allows us to easily implement these functions.This article will provide a detailed introduction on how to display this information on your website front-end.

Get the basic information of the currently logged-in user

The Anqi CMS template system providesuserDetailThe tag is the core tool to obtain various information of the currently logged-in user. This tag can directly obtain user data from the current session without manually passing the user ID.

We can use it like thisuserDetailLabel to get 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 code above:

• {% userDetail currentUser with name="UserName" %}Assign the username of the currently logged-in user tocurrentUserVariable.
• {% userDetail userAvatar with name="AvatarURL" %}Then get the user's avatar URL and assign it touserAvatarVariable.
• We first pass through{% if currentUser %}Determine if the user is logged in. IfcurrentUserThe variable has a value, indicating that the user is logged in, and we can display their avatar and username.
• AvatarURLThe field will provide the link to the user's avatar image. You can also useFullAvatarURLGet the complete avatar link (if your storage configuration is different).

Show the user's VIP status and expiration time

The AnQi CMS is built-in with user group management and VIP system, so we can combine the user's group information and VIP expiration time to display the VIP status.

First, we can start fromuserDetailthe tag to get the user'sGroupId(User's group ID) andExpireTime(VIP expiration time). Then, useuserGroupDetailLabel based onGroupIdTo obtain detailed information about user groups, such as the name of the user group (e.g., "VIP Member", "Senior 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, we:

• First use{% userDetail user with name="Id" %}Get the current logged-in user's ID and use it to determine if the user is logged in.
• If the user is 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 classify according touserGroupIdGet the detailed information of the corresponding user group and assign it touserGroupVariable.
• userGroup.TitleIt will display the name of the user group, such as "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 is expired, we also need to get the current timestamp and compare it withvipExpireTimeto compare. IfvipExpireTimeIf greater than the current time, display the validity period; otherwise, display expired.

By combining these tags, you can flexibly and clearly display various details 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 powerful and easy-to-use nature of Anqi CMS makes these seemingly complex personalized features accessible.

Frequently Asked Questions (FAQ)

1. Question: How to determine if the user is logged in?Answer: In the AnQi CMS template, you can determine if a user is logged in by checking if a certain field exists in the user object. For example, you can use{% userDetail user with name="Id" %}to 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. How do I fix the issue where the user's avatar does not display or shows a default avatar?If the user's avatar does not display, please first checkAvatarURLwhether the field has a value. You can set it in the template.<img>Label a backup default avatar image link to ensure that the page can display normally even 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" />Make sure that the avatar has been uploaded in the background settings and the image path is correct and accessible.

3. Ask: Why does the VIP status display 'General User' instead of the specific level (such as 'Gold Member')?The answer is usually due to the currently logged-in user'sGroupIdNot correctly associated with the corresponding VIP user group oruserGroupDetailLabel could not be retrieved