在网站运营中,为用户展示个性化的资料,如用户名、头像以及会员等级,能极大提升用户体验和网站的互动性。AnQiCMS作为一个灵活的内容管理系统,提供了直观的模板标签,帮助我们轻松实现这一目标。
AnQiCMS的模板系统沿用了类似Django模板的语法,通过简洁的标签即可调用后台数据。当我们希望展示特定用户的详细信息时,主要会用到userDetail和userGroupDetail这两个核心标签。
获取与展示用户基础信息
首先,我们需要明确要获取哪个用户的资料。AnQiCMS的userDetail标签允许我们通过用户的唯一ID来指定目标用户。
获取用户名
要显示用户的名称,您可以使用userDetail标签的UserName字段。假设您已经知道了目标用户的ID,例如123,您可以在模板中这样调用:
{# 假设用户ID为123 #}
<div>
用户名:{% userDetail userName with name="UserName" id="123" %}
{{ userName }}
</div>
这里,我们通过id="123"指定了用户,并将获取到的用户名赋值给userName变量,然后将其展示出来。
展示用户头像
用户头像能够直观地代表用户身份。userDetail标签提供了AvatarURL和FullAvatarURL两个字段来获取用户的头像地址。通常,AvatarURL可能是一个缩略图,而FullAvatarURL则是原始尺寸或更大尺寸的头像。您可以根据设计需求选择使用。
{# 继续使用用户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>
在这个例子中,我们添加了一个简单的判断,如果用户未设置头像,则显示一个预设的默认头像,以确保页面的美观和完整性。
进一步获取用户等级信息
AnQiCMS支持用户组管理和VIP系统,这意味着用户可以拥有不同的等级。userDetail标签可以获取用户的GroupId(用户组ID),但要获取用户组的名称(即等级名称),我们需要结合userGroupDetail标签。
步骤一:获取用户组ID
首先从userDetail标签中获取用户的GroupId:
{# 获取用户ID 123的用户组ID #}
{% userDetail groupId with name="GroupId" id="123" %}
步骤二:根据用户组ID获取等级名称
接下来,使用获取到的groupId作为参数,调用userGroupDetail标签来获取该用户组的详细信息,特别是Title字段,它代表了用户组的名称(也就是会员等级)。
{% userDetail groupId with name="GroupId" id="123" %}
{% if groupId %} {# 确保用户有用户组ID #}
{% userGroupDetail groupTitle with name="Title" id=groupId %}
<div>
会员等级:{{ groupTitle }}
</div>
{% else %}
<div>
会员等级:普通用户
</div>
{% endif %}
这样,我们就通过两个标签的配合,成功地获取并展示了用户的会员等级。
综合实例:显示完整的用户资料卡
将上述元素整合起来,我们可以构建一个更完整的用户资料展示模块。同时,我们还可以获取用户的其他信息,例如上次登录时间LastLogin,并使用stampToDate过滤器将其格式化为可读的日期时间。
”`twig {# 假设要展示的用户ID为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;