How to call and safely display the `Content` field that contains HTML on the AnQiCMS document detail page?

On AnQiCMS-built websites, the core of the document detail page is often the main content of the article, that isContentThis field carries a variety of information, from simple text to complex text layout, multimedia embedding, and even custom code segments.Therefore, how to correctly and safely display the content containing HTML format in the template is a key skill that every AnQiCMS user needs to master.

AnQiCMS designs templates for rendering, fully considering the security of the content.By default, to prevent potential cross-site scripting (XSS) attacks, the system automatically escapes any field that may contain HTML tags extracted from the database.This means, if you use directly in the template{{archive.Content}}to display content, including all HTML tags (such as<p>/<img>/<a>An HTML entity (such as<p>/<img>/<a>) will be converted to the corresponding HTML entity, and the final display on the page will be the code text with angle brackets, rather than the rendered graphic effect of the browser.

To makeContentThe HTML content within the field can be normally parsed and rendered by the browser. We need to explicitly tell AnQiCMS that this content has been carefully edited and confirmed to be safe and does not require escaping. At this point, it is necessary to use the AnQiCMS template engine providedsafefilter.

For example, in the template file of the document detail page (usuallyarchive/detail.htmlor a custom document template), you can call and display it like thisContentField:

<div class="article-content">
    {{ archive.Content|safe }}
</div>

here,archiveIt is usually a context variable on the document detail page, representing the document object being viewed.ContentIt is an attribute of the document object, storing the main content with HTML formatting.|safeis applied toarchive.ContentThe filter indicates that the template engine should treat this content as 'safe', thus avoiding the default HTML escaping and directly outputting the original HTML code so that the browser can correctly parse and render the expected text and graphic effects.

It is noteworthy that AnQiCMS also supports Markdown editors. If you have enabled the Markdown editor in the background to write documents, thenContentThe field may contain text formatted in Markdown.In this case, the AnQiCMS template engine will automatically convert it to HTML.Document Details LabelarchiveDetailofContentThe field usage also mentions that it can be achieved throughrenderParameter manually control the conversion from Markdown to HTML:

{# 假设 Content 字段包含 Markdown 内容，并希望手动控制渲染 #}
<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{ articleContent|safe }}
</div>

Or more commonly, directly througharchiveObject access and rendering:

<div class="article-content">
    {{ archive.Content|render|safe }}
</div>

Here|renderThe filter ensures that Markdown text is correctly parsed and converted into HTML structure. Following it is the|safeThe filter is responsible for safely outputting the converted HTML content to the page, preventing it from being escaped again. Usually, if the backend is set up with a Markdown editor, the system will automatically render it, but explicit usage is recommended|renderThis can be ensured, especially whenContentIt may be a mix of rich text and Markdown.

In summary, on the document detail page of AnQiCMS, no matterContentThe core practice of displaying field content directly containing HTML rich text or Markdown text safely and correctly on the page is to add it after.|safeFilter. If the content is in Markdown format, you can consider using it first|renderto convert it, then use|safeoutput. Use it correctlysafeFilter, it is an important aspect of balancing content richness and website security.

Frequently Asked Questions (FAQ)

1. Why do I show directly.{{archive.Content}}When, the page displays the HTML code with angle brackets instead of the rendered graphic effect?

This is because of the default security mechanism of AnQiCMS template engine.To prevent potential XSS attacks, the system will automatically escape any string content that may contain HTML tags.This means<p>Will become<p>,<img>Will become<img>etc. If you are sure that the content is safe and needs to render HTML, you need to{{archive.Content}}then add|safea filter such as{{archive.Content|safe}}.

2.|safeDoes the filter always safely display all content?

|safeThe filter indicates that the template engine treats the content as “safe”, no longer performs HTML escaping, and outputs the original HTML directly.Therefore, its security depends on your trust in the content source. IfContentThe content of the field is generated by the backend rich text editor or Markdown editor, which is usually safe. However, if the content comes from untrusted user input or external uncleaned data, use|safeThe risk of bringing XSS vulnerabilities. When handling such data, it should be strictly filtered and sanitized before being saved to the database.

3. If myContentHow should I handle a field that contains both HTML edited through a rich text editor and Markdown text written or pasted?

The AnQiCMS Markdown editor, when enabled, usuallyContentautomatically identifies and renders the Markdown syntax in the field. When youContentWhen a field may mix rich text and Markdown, **the practice is to use first,|renderThe filter ensures that the Markdown section is correctly converted to HTML and then used|safeThe filter output. For example:{{ archive.Content|render|safe }}. This can maximize compatibility with two content formats and ensure that the final output is rendered as HTML.