As an experienced website operations expert, I am more than happy to elaborate in detail on how to skillfully use it when the document tag contains the content field (Content) in AnQi CMS.render=trueParameters to correctly and beautifully display Markdown content. This is not only about technical implementation, but also a key to improving the presentation effect and reader experience.
Display Markdown content elegantly in AnQi CMS:render=trueIn-depth analysis and practice of parameters
In the current field of content creation, Markdown has won the favor of countless creators with its concise and efficient features.It allows us to focus on the content itself without being troubled by complex layout tools.This AnQi CMS is well-versed in this, providing strong Markdown support for users.However, you may sometimes find that even if the content is written in Markdown format, it is still displayed as raw text on the website frontend, lacking the appropriate formatting.render=trueRendering parameters.
This article will serve as your guide, delving into the detailsrender=trueThe mystery of parameters, combined with the actual operation of AnQi CMS, helps you perfectly present the charm of Markdown content.
1. Understand the core mechanism of Markdown content rendering
In the AnQi CMS, when you choose to use Markdown mode for creation in the backend rich text editor, the system will store the content you enter as Markdown plain text.But the browser on the website front end cannot directly understand and render Markdown syntax.It needs standard HTML code.Therefore, the Anqi CMS needs a "translation
render=trueWhere parameters can be used.
Before starting operations at the template level, there is an important prerequisite to confirm: You must globally enable the Markdown editor in the Safe CMS backend.This is as if the system has installed a 'Markdown Translation Engine'.
You can check and set the following path: Login to the Anqi CMS backend →Global Settings→Content SettingsEnsure thatMarkdown editor is enabledThe option is enabled. This is the basic step for the system to recognize Markdown syntax.
2.render=trueThe application of parameters in the document content field
The template tag system of AnQi CMS is flexible and powerful, among whicharchiveDetailtags are the key to obtaining the detailed content of documents. When we need to obtain the details of a certain documentContentfield, and hope it can be rendered in HTML form when Markdown contentarchiveDetailtag is addedrender=trueparameter.
Let's look at a practical example. Suppose you are designing a template for the article detail page, which needs to display the main content of the article. In the template file, you might write it like this:
{# 假设这是您的文章详情页模板,且当前页面就是某个文档的详情页 #}
<div class="article-body">
{%- archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}
</div>
This includes several key points:
{% archiveDetail articleContent with name="Content" ... %}This part is the callarchiveDetailto get the current document'sContentfield content. We will temporarily store the content inarticleContentthis variable for later use.render=trueThis is the key point of this topic. Its role is to clearly inform the CMS that,ContentThe Markdown text stored in the field is rendered, converted to the corresponding HTML structure. Even in some special cases, the settings of the background editor do not trigger rendering automatically.render=trueCan also force the system to perform this conversion.{{ articleContent|safe }}The rendered result of Markdown is an HTML fragment. To ensure that these HTML codes can be correctly parsed and displayed as rich formatting effects by the browser, rather than as plain text (for example, turning<p>Label display as<p>Instead of a paragraph), we must use it in conjunction with|safeFilter.|safeFilter indicates to the template engine that the content of this variable is safe HTML and does not need to be escaped.
With such simple modifications, your Markdown content can be presented to readers in an unprecedentedly elegant manner, including all Markdown syntax elements such as title levels, lists, links, images, and code blocks, which will be converted into beautiful HTML.
3. Flexible Use: Custom field Markdown content rendering
The 'Flexible Content Model' of AnQi CMS is a major highlight, allowing you to customize exclusive fields for different content types (such as articles, products, cases, etc.). If you add a custom multi-line text field in a content model and want this field to support Markdown input and rendering, thenrender=trueThe parameter also applies.
For example, you may have added a model namedintroduction(Product Introduction) is a custom field, and we hope users to write Markdown in this field. The way to get and render it in the template is as follows:
{# 假设您在产品详情页,并且有一个名为 'introduction' 的自定义字段 #}
<div class="product-introduction">
{# 如果自定义字段是通过 archiveDetail 直接获取 #}
{%- archiveDetail productIntro with name="introduction" render=true %}
{{ productIntro|safe }}
{# 或者,如果自定义字段是通过 archiveParams 循环获取 #}
{% archiveParams params with sorted=false %}
{% if params.introduction %}
<h3>产品简介:</h3>
<p>{{ params.introduction.Value|render|safe }}</p>
{% endif %}
{% endarchiveParams %}
</div>
Here, whether you are througharchiveDetailSpecify custom field names directly, or througharchiveParamsAfter loop traversal, get the value of custom fields (.Value) can also be appendedrender=true(or use parameters directly)|renderFilter, similar to|safeFilter.
4. Advanced rendering: Style and special element support
render=trueThe parameter is mainly responsible for converting Markdown syntax to HTML structure. However, if your Markdown content includes mathematical formulas (such as LaTeX) or flowcharts (such as Mermaid), simplyrender=trueIt is not enough to make them display normally. These special elements require additional JavaScript libraries and CSS styles from the front-end.
Anqi CMS'shelp-markdown.mdThe document has a detailed explanation, usually needing to be in your.base.htmlTemplate file's.<head>Partly introduce the corresponding CDN resources, for example:
- Markdown default style: Introduction
github-markdown-cssTo obtain beautiful Markdown rendering styles. - Mathematical formulas: Introduction
MathJaxsuch libraries. - Flowcharts: Introduction
mermaidsuch libraries.
After correctly introducing these resources,render=trueThe HTML code converted can be combined with these libraries to ultimately present the complete visual effect on the page.
**Practical Considerations
- Safety First: Although
|safeFiltering is a necessary step in rendering HTML, but it also means that you need to trust the source of the HTML content. Make sure to only use Markdown content that you trust and has been processed by the system.|safeTo prevent potential XSS attack risks. - Performance considerationsThe rendering process from Markdown to HTML consumes certain server resources.For pages with high traffic or containing very long Markdown content, although the Go language backend of Anqi CMS is excellent in performance, making good use of caching (such as page caching) is still an effective means to improve user experience.
- Principle of consistencyOnce you decide that the content of a certain field will be rendered in Markdown format, it is recommended to always maintain this creation and rendering method.Avoid mixing Markdown and rich text in the same field, which may result in inconsistent rendering effects or unexpected layout issues.
- Debugging techniquesIf Markdown is not rendered as expected, please first check the enable status of the Markdown editor in the background content settings, and then confirm whether the template code uses it correctly.
render=trueand|safe.
Through deep understanding and practicerender=trueParameters, combined with the settings of the Anqi CMS backend and the adjustment of the front-end template, you will be able to fully utilize the advantages of Markdown in content creation, bringing your website readers a clearer, more beautiful, and convenient maintenance reading experience.
Common Questions (FAQ)
Q: Why have I written content in the Markdown editor on the background, and also used it in the template?
render=trueBut the Markdown on the front-end still does not display correctly?- A:Firstly, please confirm again that the 'Global Settings -> Content Settings' option 'Markdown Editor' is enabled in the Safe CMS backend. Secondly, check your template code to ensure that you have used
|safeFilter, for example{{ articleContent|safe }}. If missing|safe, the HTML tags will be displayed as escaped text.
- A:Firstly, please confirm again that the 'Global Settings -> Content Settings' option 'Markdown Editor' is enabled in the Safe CMS backend. Secondly, check your template code to ensure that you have used
Q: Using
render=trueit will affect the website loading speed or server performance?- A:The rendering process of Markdown to HTML indeed requires a certain amount of computing resources.For a single page, this impact is usually negligible.However, if your website experiences a lot of high concurrency access, and each page contains complex and uncached Markdown content, theoretically, it may cause a slight burden on the server performance.