How to display a user's detailed information, such as avatar and username, in AnQiCMS template?

In AnQiCMS, displaying users' detailed information flexibly in templates, such as avatars and usernames, is an important step to achieve personalization and enhance website interactivity.AnQiCMS powerful template engine provides an intuitive and efficient way to integrate these data.

Understand the data call mechanism of AnQiCMS templates in English

AnQiCMS's template system uses a syntax style similar to Django, which makes template writing both intuitive and powerful.The core lies in using specific template tags to call back-end data.userDetailLabel.

userDetailTags are built-in tags specifically used for retrieving and displaying user detailed information. It allows you to obtain various properties of a specified user by user ID and to flexibly apply them in front-end templates.

How to useuserDetailLabel to get user data

userDetailThe basic usage method of the tag is as follows:

{% userDetail 变量名 with id="用户ID" %}

Here:

• 变量名You can define a variable to store all the information obtained from the user, for exampleuserInfoThis has the advantage that you can directly access it in subsequent code.userInfo.字段名Access all properties of the user, avoiding repeated calls to the tag.
• id="用户ID"This is a required parameter, you need to provide a unique user ID.This ID usually comes from other data (such as the author ID of the article) or is automatically provided by the system on a specific user page (such as the personal center).

Display of core user information

once you have passed throughuserDetailThe tag gets user data and assigns it to a variable (for exampleuserInfo），You can access various fields it contains:)

1. User Avatar (Avatar))The user's avatar is usually through)AvatarURLorFullAvatarURLfield to obtain.

   • AvatarURL：通常是经过处理（如裁剪、压缩）的头像缩略图链接，适合在列表或小尺寸区域展示。
   • FullAvatarURL：May provide links to original or larger size profile pictures, suitable for scenarios that require high-definition display such as user profiles.

   Example:

   <img src="{{ userInfo.AvatarURL }}" alt="{{ userInfo.UserName }}的头像" class="user-avatar" />
   

2. Username (Username)Username throughUserNameField acquisition, this is the most direct reflection of the user's identity.

   Example:

   <span>{{ userInfo.UserName }}</span>
   

3. User homepage link (Link)If your website provides an independent personal homepage or profile page for each user,LinkField will provide the URL of this page.

   Example:

   <a href="{{ userInfo.Link }}" class="user-profile-link">{{ userInfo.UserName }}的主页</a>
   

Case study: Display author information on the article detail page

Assuming you are on the article detail page of AnQiCMS and you want to display the author's avatar, username, and last login time below the article content. The data for the article detail page can be accessed byarchiveDetailLabel acquisition, which includes the author'sUserId.

`twig {# 1. First, get the author ID of the current article #} {%- archiveDetail articleAuthorId with name=“UserId” %}

{%- if articleAuthorId %} {# 2. Use the author ID, retrieve all the author's details in one go using the userDetail tag, and store them in the userInfo variable #} {% userDetail userInfo id=articleAuthorId %}

<h3 class="section-title">关于作者</h3>
<div class="author-details">
  {# 显示作者头像 #}
  {% if userInfo.AvatarURL %}
    <img src="{{ userInfo.AvatarURL }}" alt="{{ userInfo.UserName }}的头像" class="author-avatar" />
  {% else %}
    {# 如果没有头像，可以显示一个默认占位符图片 #}
    <img src="/public/static/images/default-avatar.png" alt="默认头像" class="author-avatar" />
  {% endif %}

  <div class="author-text-info">
    {# 显示作者用户名，并链接到其个人主页（如果 userInfo.Link 存在） #}
    <p class="author-name">
      作者：