How to display user details such as avatar and username in AnQiCMS templates?

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

Understand the data calling mechanism of AnQiCMS templates

AnQiCMS's template system adopts 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.For displaying user information, we mainly rely onuserDetail.

userDetailThe tag is a built-in tag used to obtain and display user information. It allows you to retrieve various attributes of a specified user through the user ID and use it flexibly in the front-end template.

How to useuserDetailLabel to get user data

userDetailThe basic usage 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 exampleuserInfo. This is beneficial because you can directly access it in subsequent code.userInfo.字段名Access all user properties to avoid 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 an article) or is automatically provided by the system on a specific user page (such as a personal center).

Display of core user information

Once you pass throughuserDetailThe tag gets user data and assigns it to a variable (for exampleuserInfo），You can access the various fields it contains：

1. User Avatar (Avatar)The user's avatar is usually obtained throughAvatarURLorFullAvatarURLfield to retrieve.

   • AvatarURL: It is usually a processed (such as cropped, compressed) avatar thumbnail link, suitable for display in lists or small-sized areas.
   • FullAvatarURL: May provide the original or larger size avatar link, suitable for user profiles and other scenarios requiring high-definition display.

   Example:

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

2. Username (Username)Username verifiedUserNameField retrieval, this is the most direct manifestation of user 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,LinkThe field provides the URL of the 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 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 byarchiveDetailTag 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, fetch all author 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">
      作者：