AnQi CMS is favored by many users for its efficient and flexible content management capabilities.In content creation, Markdown format is the preferred choice for many content creators due to its simplicity and efficiency.But how to beautifully present these Markdown-formatted contents as structured HTML on the website front-end is a concern for many users.This article will introduce the powerful of AnQi CMS in detailrenderFilter, and how to flexibly use it in templates to perfectly convert Markdown content to HTML, making your website content display even better.

Enable Markdown support for rendering preparation

While usingrenderBefore the filter, you need to make sure that the Aqie CMS has enabled the Markdown editor.This setting is very simple, just log in to the Anqi CMS backend management interface, find the 'Global Settings' under the 'Content Settings' option.Here, you will see a toggle to enable Markdown editor.Open it so that the system can recognize and process your Markdown formatted content.After enabling this feature, you can directly use Markdown syntax to create content when publishing or editing articles, and the system backend will automatically store it in Markdown format.

renderFilter: Bridge from Markdown to HTML

Of Security CMSrenderThe filter is a very practical tool, its core function is to convert Markdown formatted text content into browser recognizable HTML code.This means you can easily format in Markdown in the background, and the visitors will see a beautiful, well-structured HTML page on the front end.

The advantage of this filter lies in its flexibility. Regardless of where your Markdown content is stored, whether it is in the main body of the article, a custom field, or any other variable,renderFilters can easily handle it, converting it to HTML as needed.At the same time, in order to avoid security issues such as XSS (Cross-Site Scripting attacks), the HTML content converted from Markdown is usually escaped by the system by default.Therefore, when outputting this HTML content, we also need to use in combination withsafeThe filter, explicitly tells the template engine that this content is safe, and can be directly parsed as HTML.

Used in the template.renderFilter

In the AnQi CMS template system,renderThere are two main ways to use a filter: directly applying it to a variable, and passing it as a parameter to a tag.

  1. Used as a variable filter.This is the most direct way. When you get Markdown formatted text content from a database or other place and store it in a variable, you can directly apply this variable torenderFilter. For example, if you have a custom field namedintroductionthat contains Markdown content, you can render it in the template like this:

    {% archiveDetail introduction with name="introduction" %}
{{ introduction|render|safe }}

    here,introductionThe variable is firstrenderThe filter processes, converting Markdown syntax to HTML, thensafeThe filter ensures that this HTML code is not escaped, and ultimately appears on the page in a parseable HTML form.

  2. Used as a tag parameter.In many content display tags of Anqi CMS (such asarchiveDetailused for document details,pageDetailused for single page details,tagDetailused for tag details), for the content fields (such asContent) providedrenderThe parameter allows you to control whether Markdown content is converted to HTML while fetching the content.

    • Default behaviorWhen the Markdown editor is enabled, these tags'Contentfields will usually be automatically converted from Markdown to HTML.
    • Manual controlIf you need to explicitly control the conversion behavior, you can setrender=trueforce conversion, orrender=falseto prevent conversion.

    For example, when displaying the document text:

    {# 默认行为下，如果Markdown编辑器已开启，Content会默认渲染 #}
<div>文档内容：{% archiveDetail with name="Content" %}{{archive.Content|safe}}</div>


{# 强制进行Markdown到HTML的转换 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>


{# 明确不进行Markdown到HTML的转换（此时会显示原始Markdown文本） #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent}}</div>

    The convenience of this method lies in the fact that you can specify the rendering logic directly within the tag, without needing to filter the variables again externally.

    It is worth mentioning,renderParameters can be used withlazyParameters (used for lazy loading of images) are used together to process the loading of images and Markdown rendering in the content.

Enhance the display effect of Markdown content.

AlthoughrenderThe filter can convert Markdown to HTML, but to achieve better visual effects and functionality, you can also combine third-party libraries to enhance the rendered content. Anqi CMS itself supports integrating these features, and you canbase.htmlInclude the corresponding CSS and JavaScript in the general template file:

  • GitHub style: Includegithub-markdown-cssThe library can provide clear and professional GitHub-style formatting for rendered Markdown content.
  • Support for mathematical formulas: Through integrationMathJaxYou can write complex mathematical formulas in Markdown and get beautiful rendering on the front end.
  • Flowcharts and charts:MermaidThe library allows you to directly draw flowcharts, sequence diagrams, and more in Markdown and dynamically display them on the page.

These additional integrations will greatly enrich the expressiveness of your Markdown content, making it more than just plain text, but an interactive and informative display.

Summary

Of Security CMSrenderThe filter provides content creators with a solution to efficiently and securely convert Markdown content to HTML.Whether it is through direct filtering of variables or specifying in tag parameters, it greatly simplifies the front-end display of Markdown content. CombiningsafeIntegration of filters and some frontend libraries, you can completely