When will the `item.Content` field be used in the `categoryList` loop, can it display rich text content?

Hello! As an experienced website operation expert, I am very happy to delve into the AnQiCMS (AnQiCMS) in detailitem.Contentfield incategoryListApplications in loops, as well as how to elegantly display rich text content.

In AnQi CMSitem.Contentfield incategoryListThe versatility of loops and rich text display

AnQi CMS, with its flexible content model and powerful template engine, gives content operators great freedom.In daily website content layout, we often need to display information of multiple categories on a single page, not just by entering each category detail page.categoryListThe tag has become our helpful assistant. The question you raised is about how to fully utilize the loop in this tag.item.ContentField to display rich text content of the category.

The answer is affirmative,item.ContentThe field can be incategoryListUsed in the loop and can perfectly display rich text content. This is due to the unified processing and flexible filter mechanism of AnQiCMS template engine.

item.ContentIncategoryListapplication scenarios in the loop

First, let's understand why wecategoryListuse in the loopitem.Content. Generally speaking,categoryListTags are mainly used to traverse the classification structure of a website, generate navigation menus, classification lists, or classification blocks on the homepage. In these scenarios, we may not only want to display the names of the classifications (item.Title) and the links(item.Link), I also hope that each category can have a brief introduction, a distinctive description, or custom rich text content.

For example, on the homepage of the website, you may have designed a block to display various product categories.Each product category should also display its name, along with a carefully written, formatted introduction, and even include rich text fragments with images or links to attract user clicks.Or, on a dedicated category overview page, you may need to list all top-level categories and provide a more detailed rich text content preview.item.Contentfield comes into play.

In the AnQiCMS category management backend, each category supports filling in 'category content'. This content field is inherently designed to store rich text information.It allows you to enter content with various formats such as images, links, bold, colors, and more using a rich text editor (or Markdown editor).categoryListlabel traverses each category,itemThis will contain the variableContentfield.

How to ensure rich text content is displayed correctly:|safeFilters and Markdown rendering

Whenitem.ContentContaining HTML tags (such as<p>,<img>,<a>such as"), direct output{{ item.Content }}You may encounter a common problem: these HTML tags are not parsed by the browser but are displayed as plain text, which is usually not the result we expect.This is because AnQiCMS (and most modern template engines) default to HTML encoding all output content for security reasons, to prevent cross-site scripting attacks (XSS).

In order toitem.ContentThe HTML code is correctly parsed and rendered by the browser, we need to use|safefilter.

|safeFilter

|safeThe filter tells the template engine that this content is 'safe', and it does not need to be HTML-escaped. It can be output directly as HTML code.

Usage example:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <div class="category-card">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <div class="category-description">
                {# 使用 |safe 过滤器确保富文本内容正确解析 #}
                {{ item.Content|safe }}
            </div>
            <a href="{{ item.Link }}" class="more-info">查看更多</a>
        </div>
    {% endfor %}
{% endcategoryList %}

In the above example,{{ item.Content|safe }}Ensure that any HTML format (such as images, paragraphs, links, etc.) you enter in the classified content can be normally parsed and displayed by the browser.

Rendering of Markdown content

AnQiCMS also supports Markdown editors. If you choose to use Markdown format to edit category content in the background, thenitem.ContentThe field will store Markdown syntax text. In this case, it is simply using|safeThe filter is not enough because it only outputs the Markdown original text without converting it to HTML.

At this point, you need to combinerender=trueParameters to explicitly indicate that the template engine should render Markdown content. AnQiCMS isContentThe field call includes a built-in function for Markdown conversion.

Usage example:

{% categoryList categories with moduleId="1" parentId="0" %}
    {% for item in categories %}
        <div class="category-card">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <div class="category-description">
                {# 如果分类内容是Markdown格式，需要render=true进行转换 #}
                {{ item.Content|render:true|safe }}
            </div>
            <a href="{{ item.Link }}" class="more-info">查看更多</a>
        </div>
    {% endfor %}
{% endcategoryList %}

Here|render:true|safeThe order is important: firstrender:trueIt will convert Markdown text to HTML, then|safeEnsure that the converted HTML can be safely output to the page.

In this way, no matter if your categorized content is direct HTML rich text or entered through a Markdown editor, AnQiCMS can handle it.categoryListFlexibly and correctly displayed in the loop, greatly enriching the diversity of page layout and content presentation.

Frequently Asked Questions (FAQ)

Q1: If categorizeditem.ContentHow can I display only a part of the summary if the content is too long?

A1: Whenitem.ContentIf it is a rich text format (including HTML tags), you can use the AnQiCMS providedtruncatechars_htmlortruncatewords_htmlFilters to safely truncate content and add ellipses. These filters intelligently handle HTML tags to ensure that the truncated HTML structure is not destroyed. For example,{{ item.Content|truncatechars_html:100|safe }}The content will be truncated to 100 characters (including HTML tags), and the correct HTML structure will be maintained.

Q2: How can I universally process content that has both HTML rich text and Markdown format?

A2: AnQiCMS'ContentThe field will automatically detect whether the content is in Markdown format and render it. However, for clearer and safer control, it is recommended to always use|render:true|safeIf the content is not Markdown,render:trueIt will not cause any additional effect, but it can ensure that Markdown content is processed correctly. This is a**practice, which can accommodate two content formats.

Q3: Use|safeWhat are the potential risks of the filter? How can I avoid them?

A3:|safeThe filter will disable HTML escaping, which means ifitem.ContentContains malicious scripts (such as code that is injected illicitly through the backend), which will also be executed by the browser, leading to cross-site scripting attacks (XSS). The key to avoiding risks lies in:

1. Strictly control back-end permissions:Ensure that only trusted users can edit category content.
2. Content source is可信:Avoid directly copying and pasting HTML content from untrusted sources to the back-end.
3. Content review:Ensure strict review of user-generated content, filter out potential malicious code. Under the premise of ensuring the safety and controllability of content sources and editing processes, use|safeThe filter is the standard and necessary way to display rich text in AnQiCMS.