How to display the personal introduction filled in the `Introduce` field on the user's profile page?

In website operation, providing users with personalized profile display can greatly enhance the vitality of the community and the sense of belonging of users. Especially for the personal introduction filled in by users themselves. For AnQiCMS users, they want to display the user'sIntroduceThe personal introduction filled in the field is actually a very intuitive and flexible operation, mainly relying on the powerful template tag system of AnQi CMS.

Understanding the template mechanism of AnQiCMS

In the AnQi CMS, the display content of the website pages is controlled by templates. Template files are usually used.htmlSuffix, and adopt syntax similar to Django template engine. This means that we use double curly braces{{变量}}to output data, through single curly braces and percentage signs{% 标签 %}Call a feature tag or perform logical control. Understanding this basic mechanism is the key to subsequent operations.

Get user profile:userDetailtags

To display a user's personal introduction on the profile page, first you need to obtain the user's detailed information. Anqi CMS providesuserDetailLabel. This label is specifically used for querying and displaying users' various information.

Generally, on the user's profile page, you can access it through URL parameters (such as?userId=123）or obtain the user's ID from the current login user session.userDetailTags, we can accurately obtain all relevant personal information of the user based on their unique ID.

The usage of this tag is very direct, you just need to specify the field name you want to retrieve and pass in the user's ID.

{# 假设我们正在访问某个用户的个人资料页，并且该用户的ID已经可以通过某种方式获取到，例如URL参数或当前上下文中的user对象 #}
{% set currentUserId = 123 %} {# 示例：这里假设用户ID为123，实际应用中会动态获取 #}

{# 获取用户的用户名 #}
<div>用户名：{% userDetail with name="UserName" id=currentUserId %}</div>

displayIntroducePersonal introduction of the field

Since we have learned how to useuserDetailtags to get user data, then displayingIntroducethe content of the field is a piece of cake.IntroduceYesuserDetaila field supported by tags, used to store the personal introduction of the user.

用户介绍（Introduce）字段通常允许用户输入富文本，比如带有格式的文字、链接甚至是图片，或者使用 Markdown 语法进行排版。To ensure that this content is rendered and displayed correctly and safely, we need to pay attention to some details.

1. Safe output: using|safeFilterBy default, the security CMS will perform security escaping on the content output by the template to prevent potential cross-site scripting (XSS) attacks. This means that if yourIntroduce字段中包含了 HTML 标签（如 English<p>,<a>,<strong>They may be displayed as plain text instead of the actual rendering effect. In order for these HTML tags to be parsed and displayed normally, we need to use|safeFilter. This filter tells AnQiCMS that the current output content is safe and does not require escaping.

   {# 获取并安全显示用户的个人介绍，假设其中包含简单的HTML标签 #}
   {% userDetail userIntro with name="Introduce" id=currentUserId %}
   <div class="user-introduction-content">
       {{ userIntro|safe }}
   </div>
   

2. Render Markdown content: userender=trueParametersIf your website has enabled Markdown editor and allows users to input Markdown formatted content, then just usingIntroducethe field to input Markdown formatted content is enough.|safeMay not be sufficient to display correctly. Markdown content needs to be parsed and converted to HTML before it can be safely displayed. In this case, you need to beuserDetailLabel addrender=trueParameter. This parameter will clearly inform QiCMS to get theIntroducefield content rendered into HTML according to Markdown syntax. After rendering, it is combined with|safeThe filter ensures that the final HTML code can be parsed by the browser.

   {# 获取并渲染Markdown格式的用户个人介绍，然后安全显示 #}
   {% userDetail userIntro with name="Introduce" id=currentUserId render=true %}
   <div class="user-introduction-content markdown-body">
       {{ userIntro|safe }}
   </div>
   

   Here,markdown-bodyis a common CSS class name, used to provide styles for the rendered content of Markdown, and you can adjust or remove it according to your template design.

Comprehensive Example

Now, let's integrate these knowledge points and see how various user information, including personal introductions, are displayed on a typical user profile page:

{# 假设当前访问的用户ID已存储在名为 currentUserId 的变量中 #}
{% set currentUserId = 1 %} {# 实际应用中会动态获取此ID，例如从路由参数或当前会话 #}

<div class="user-profile-wrapper">
    <div class="user-header">
        <img class="user-avatar" src="{% userDetail with name="FullAvatarURL" id=currentUserId %}" alt="用户头像">
        <h1 class="user-display-name">
            {% userDetail with name="UserName" id=currentUserId %}
            <small>（ID: {% userDetail with name="Id" id=currentUserId %}）</small>
        </h1>
        <p class="user-realname">真实姓名：{% userDetail with name="RealName" id=currentUserId %}</p>
    </div>

    <div class="user-details-body">
        <section class="user-contact-info">
            <h2>联系信息</h2>
            <p>邮箱：{% userDetail with name="Email" id=currentUserId %}</p>
            <p>手机：{% userDetail with name="Phone" id=currentUserId %}</p>
            {# 更多联系方式... #}
        </section>

        <section class="user-introduction-section">
            <h2>个人介绍</h2>
            <div class="user-intro-content">
                {# 获取并渲染Introduce字段内容，假设可能包含Markdown或HTML #}
                {% userDetail userIntroduceContent with name="Introduce" id=currentUserId render=true %}
                {% if userIntroduceContent %}
                    {{ userIntroduceContent|safe }}
                {% else %}
                    <p>该用户暂未填写个人介绍。</p>
                {% endif %}
            </div>
        </section>

        <section class="user-status-info">
            <h2>账户状态</h2>
            <p>账户余额：¥{% userDetail with name="Balance" id=currentUserId %}</p>
            <p>累计收益：¥{% userDetail with name="TotalReward" id=currentUserId %}</p>
            <p>VIP 过期时间：{% userDetail vipExpireTime with name="ExpireTime" id=currentUserId %}{{ stampToDate(vipExpireTime, "2006年01月02日") }}</p>
            <p>最近登录：{% userDetail lastLoginTime with name="LastLogin" id=currentUserId %}{{ stampToDate(lastLoginTime, "2006-01-02 15:04") }}</p>
        </section>
    </div>
</div>

Through this example, you can see how flexibly to calluserDetailtags to display various information of users, andrender=trueand|safeEnsureIntroducethe content of the fields can be displayed correctly and safely to the users.

---

Common Questions (FAQ)

Q1: IfIntroduceField is empty, what will the page display?A1: IfIntroduceField is empty,{% userDetail ... %}The tag will not output any value. In the above example, we use{% if userIntroduceContent %}To determine if it is empty, if it is empty, then display 'This user has not filled in a personal introduction yet.' You can also use a filter to set a default placeholder, for example,defaulta default placeholder, for example,{{ userIntroduceContent|default:"暂无个人介绍"|safe }}.

Q2: BesidesIntroduceField, can I display other information about the user?A2:userDetailTags support retrieving various user information, such asId(UserID),UserName(Username), `RealName