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, especially the self-written personal introduction, can greatly enhance the vitality and sense of belonging of the community. For AnQiCMS users, they want to display their activities on the personal profile page,IntroduceThe field filled in is actually a very intuitive and flexible operation, mainly depending on the powerful template tag system of Anqi CMS.

Understanding the template mechanism of AnQiCMS

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

Get user profile:userDetailTag

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

Generally, on the user's profile page, you can access URL parameters such as?userId=123Or the user's ID obtained from the current logged-in user session. ThroughuserDetailTag, we can accurately obtain all related personal information of the user based on their unique ID.

The use 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>

DisplayIntroduceField personal introduction

Since we have already understood how to useuserDetailtags to obtain user data, then displayingIntroducethe content of the field is as smooth as silk.IntroduceIsuserDetaila field supported by tags, used to store the user's personal introduction.

The (Introduce) field usually allows users to input rich text, such as formatted text, links, images, or use Markdown syntax for formatting.To ensure that this content is rendered correctly and displayed safely, we need to pay attention to some details.

1. Safe output: use|safeFilterBy default, AnQi CMS will escape the output content of templates to prevent potential cross-site scripting (XSS) attacks. This means that if yourIntroduceThe field contains HTML tags (such as<p>,<a>,<strong>They may be displayed as plain text rather than the actual rendering effect. To make these HTML tags parse and display normally, we need to use|safeFilter. This filter will inform 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: usingrender=trueParameterIf your website has enabled Markdown editor and allows users to enterIntroduceMarkdown formatted content in the field, then simply use|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 foruserDetailtagsrender=trueThe parameter will explicitly tell AnQiCMS to obtainIntroduceThe field content is 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-bodyIt is a common CSS class name used to provide styles for Markdown-rendered content, 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>

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

---

Frequently Asked Questions (FAQ)

Q1: IfIntroduceWhat will be displayed on the page if there is no content in the field?A1: IfIntroducethe field is empty,{% userDetail ... %}The tag will not output any value. In the above example, we use{% if userIntroduceContent %}To check if it is empty, if it is empty, then display "The user has not filled in a personal introduction yet." You can also usedefaulta filter to set a default placeholder, such as{{ userIntroduceContent|default:"暂无个人介绍"|safe }}.

Q2: BesidesIntroduceField, what other user information can I display?A2:userDetailTags support obtaining various user information, such asId(User ID),UserName(Username), `RealName