In website operation, displaying personalized information to users, such as usernames, avatars, and membership levels, can greatly enhance user experience and the interactivity of the website.AnQiCMS as a flexible content management system provides intuitive template tags, helping us easily achieve this goal.
The AnQiCMS template system follows a syntax similar to Django templates, allowing backend data to be called through concise tags. When we want to display specific user details, we mainly useuserDetailanduserGroupDetailthese two core tags.
Retrieve and display user basic information
Firstly, we need to clarify which user's information we need to retrieve. AnQiCMS'suserDetailTags allow us to specify the target user through the user's unique ID.
Get the username
To display the user's name, you can useuserDetaillabel'sUserNamefield. Suppose 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 assigned the username obtained touserNamea variable, and then displayed it.
display the user's avatar
The user avatar can directly represent the user's identity.userDetailTags providedAvatarURLandFullAvatarURLTwo fields to get the user's avatar address. Usually,AvatarURLit may be a thumbnail, andFullAvatarURLIs an avatar of the original size or larger. 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 users' information.GroupId(User Group ID), but to get the user group'sname(which is the level name), we need to combineuserGroupDetail.
Step 1: Get the User Group ID
First fromuserDetailthe tag to get the user'sGroupId:
{# 获取用户ID 123的用户组ID #}
{% userDetail groupId with name="GroupId" id="123" %}
Step two: Get the level name according to the user group ID
Next, use the obtainedgroupIdas a parameter, calluserGroupDetaillabel to get the detailed information of the user group, especiallyTitleField, it represents the name of the user group (also known as the membership 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 %}
In this way, we successfully obtained and displayed the user's membership level by combining two tags.
Comprehensive example: Display the complete user profile card
By integrating these 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 timeLastLogin, and usestampToDateThe filter formats it into a readable date and time.
`twig {# Assuming the user ID to be displayed 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;