In website operation, displaying personalized information to users such as usernames, avatars, and membership levels can greatly enhance user experience and website interactivity.AnQiCMS as a flexible content management system, provides intuitive template tags to help us easily achieve this goal.
AnQiCMS's template system follows the syntax similar to Django templates, which can call background data through simple tags. When we want to display detailed information of a specific user, we will mainly useuserDetailanduserGroupDetailThese core tags.
Get and display user basic information
Firstly, we need to specify which user's information we want to get. AnQiCMS'suserDetailThe label allows us to specify the target user by the user's unique ID.
Get the username
To display the user's name, you can useuserDetailTagsUserNameField. Assume you already know the target user's ID, for example123You can call it like this in the template:
{# 假设用户ID为123 #}
<div>
用户名:{% userDetail userName with name="UserName" id="123" %}
{{ userName }}
</div>
Here, we useid="123"specified the user, and assigns the obtained username touserNameVariable, then display it.
Display the user's avatar.
The user's avatar can directly represent the user's identity.userDetailTags provideAvatarURLandFullAvatarURLTwo fields to get the user's avatar address. Usually,AvatarURLIt may be a thumbnail, orFullAvatarURLit is an original size or larger avatar. You can choose to use it according to your design needs.
{# 继续使用用户ID 123 #}
<div>
用户头像:{% userDetail avatar with name="AvatarURL" id="123" %}
{% if avatar %} {# 检查头像是否存在,避免链接为空 #}
<img src="{{ avatar }}" alt="用户头像" style="width: 50px; height: 50px; border-radius: 50%;" />
{% else %}
<img src="/static/default-avatar.png" alt="默认头像" style="width: 50px; height: 50px; border-radius: 50%;" />
{% endif %}
</div>
In this example, we added a simple judgment, if the user has not set an avatar, then display a preset default avatar to ensure the beauty and integrity of the page.
Further obtain user level information
AnQiCMS supports user group management and VIP system, which means users can have different levels.userDetailTags can obtain usersGroupId(User group ID), but to get the user group'sName(That is, the level name), we need to combineuserGroupDetailLabel.
Step 1: Get the user group ID
First fromuserDetailRetrieve the user from the tagGroupId:
{# 获取用户ID 123的用户组ID #}
{% userDetail groupId with name="GroupId" id="123" %}
步骤二:根据用户组ID获取等级名称
接下来,使用获取到的groupId作为参数,调用userGroupDetail标签来获取该用户组的详细信息,特别是TitleThe field represents the name of the user group (also known as the member level).
{% userDetail groupId with name="GroupId" id="123" %}
{% if groupId %} {# 确保用户有用户组ID #}
{% userGroupDetail groupTitle with name="Title" id=groupId %}
<div>
会员等级:{{ groupTitle }}
</div>
{% else %}
<div>
会员等级:普通用户
</div>
{% endif %}
Thus, we have successfully obtained and displayed the user's member level through the cooperation of two tags.
Complete User Profile Display: Comprehensive Example
Combine the above elements, we can build a more complete user profile display module. At the same time, we can also obtain other information about the user, such as the last login timeLastLoginand is usedstampToDateThe filter formats it into a readable date and time.
`twig {# Assuming the user ID to display is 123 #}
/* 简单的样式,您可以根据需要自定义 */
.user-profile-card {
border: 1px solid #eee;
padding: 20px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 15px;
max-width: 300px;
margin: 20px auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.user-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #ddd;
}
.username {
margin: 0;
font-size: 1.2em;
color: #333;
}
.user-level, .last-login {
margin: 5px 0;
font-size: 0.9em;
color: #666;
}
.view-profile-btn {
display: inline-block;
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;