In AnQiCMS-built websites, the core of the document detail page is often the main content of the article, that is,ContentField.This field carries a rich information, ranging from simple text to complex text and image layout, multimedia embedding, and even custom code segments.Therefore, how to correctly and safely display these HTML-formatted contents in the template is a key skill that every AnQiCMS user needs to master.

AnQiCMS takes full consideration of content security during the design template rendering.By default, to prevent potential cross-site scripting (XSS) attacks, the system automatically escapes any field that may contain HTML tags retrieved from the database.{{archive.Content}}to display the content, where all HTML tags (such as<p>/<img>/<a>[en]All) will be converted to their corresponding HTML entities (such as&lt;p&gt;/&lt;img&gt;/&lt;a&gt;), and the text displayed on the page will be the code with angle brackets, rather than the rendered text and image effect of the browser.

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

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

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

Here,archiveIt is usually a contextual variable on the document detail page, representing the current document object being viewed.ContentIt is a property of the document object, storing the main content in HTML format.|safeis applied toarchive.ContentThe filter on, indicating that the template engine will treat this content as 'safe', thus avoiding the default HTML escaping, and outputting the original HTML code directly, allowing the browser to correctly parse and render the expected graphic effect.

It is worth noting that AnQiCMS also supports Markdown editor. If you have enabled the Markdown editor in the background to write documents, thenContentThe text stored in the field may be in Markdown format.In this case, AnQiCMS's template engine will automatically convert it to HTML.archiveDetailofContentThe field usage also mentions that it can be controlled byrendermanually adjusting the Markdown to HTML conversion:

{# 假设 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 are the|renderThe filter ensures that Markdown text is correctly parsed and converted to HTML structure. Followed by|safeThe filter is responsible for safely outputting the converted HTML content to the page, preventing it from being escaped again. Typically, if the Markdown editor is set in the background, the system will automatically render it, but explicit use of|renderThis can be ensured, especially whenContentit may mix rich text and Markdown.

In summary, on the document detail page of AnQiCMS,ContentIs the field directly containing HTML rich text or Markdown text, the core approach to ultimately safely and correctly display it on the page is to add it after.|safeFilter. If the content is in Markdown format, you may consider using|renderthe filter for conversion, and then use|safethe output. Use it correctlysafeFilter, an important link between content richness and website security.

Common Questions (FAQ)

1. Why do I show directly?{{archive.Content}}When, is displayed on the page HTML code with angle brackets, rather than the rendered text and graphic effect?

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

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

|safeThe filter indicates to the template engine that the content should be treated as "safe", and not to escape HTML, outputting the original HTML directly.Therefore, its security depends on your trust in the source of the content.ContentThe 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 unfiltered data, use|safeThe risk of XSS vulnerability may be present. When handling such data, it should be strictly filtered and sanitized before saving to the database.

3. If IContentThe field contains both HTML edited through a rich text editor and Markdown text handwritten or pasted, how should I handle it?

AnQiCMS's Markdown editor, when enabled, usually performs auto-recognition and rendering of Markdown syntax in the content.ContentWhen your Markdown syntax in the field is recognized automatically and rendered.ContentWhen the field may contain both rich text and Markdown, **practice is to use first**|renderA filter to ensure that the Markdown part is correctly converted to HTML, and then use|safeFilter output. For example:{{ archive.Content|render|safe }}This can maximize compatibility with two content formats and ensure the final output is renderable HTML.