In the AnQi CMS, tags (Tag) are an important part of content management, not just simple keyword indexing. Many operators may want to provide a detailed introduction or special content for each tag, which involves how to elegantly display the tag detail page ofContentField, especially when this content is written in Markdown format.Auto CMS provides flexible template tags and configuration options, allowing us to precisely control the rendering behavior of Markdown.

Understanding the label detail pageContentField

In AnQi CMS, when we talk about labels,ContentField, usually refers to the detailed description or exclusive content field of the label.Although the main information seen during the label editing in the background management interface may be "Label Name" and "Label Description" and other basic information, the system supports reserving for labels or extending through custom fields to store more rich, Markdown-formatted text content.Contentthe field, is similar to theContentarticle detail page, and is the core that carries the depth information of the label.

Enable Markdown editor's global settings

To makeContentThe Markdown syntax in the field is correctly parsed and rendered as HTML on the front-end page, which requires that the security CMS Markdown editor feature is enabled first.This setting is usually located under the "Global SettingsHere, you can choose to enable or disable the Markdown editor.ContentFields are automatically converted.

Invoke the tag in the template.ContentField

In the template of the tag detail page (usually)tag/detail.htmlortag/list.html，specifically depending on your template design)，we can usetagDetailtags to get the details of the current tag, including itsContentfield.

InvokeContentthe basic way to access fields is:

{# 假设我们已经通过tagDetail标签获取了当前标签的内容，并将其赋值给tagContent变量 #}
{% tagDetail tagContent with name="Content" %}
{# 这里需要使用 |safe 过滤器来避免HTML代码被转义，确保浏览器能正确解析渲染 #}
{{tagContent|safe}}

It is important to note here:|safeFilter, its function is to inform the template engine,tagContentthe content in variables is safe HTML code and does not need to be automatically escaped. If missing|safeEven if Markdown has been successfully converted to HTML, the original HTML tags will be displayed as plain text, rather than the rendered effect.

精细控制Markdown渲染：EnglishrenderParameters

安企CMS的强大之处在于，它不仅依赖全局设置，还允许我们在模板层面进行更细致的控制。对于EnglishContentField's Markdown rendering,tagDetailTags provide arenderParameter, allowing us to manually specify whether to perform Markdown to HTML conversion, without being affected by the global settings.

ThisrenderParameter acceptancetrueorfalseTwo boolean values:

  1. Forced rendering Markdown(render=true)When you are going torenderparameter settingstruewhen, even if the Markdown editor is turned off in the background global content settings,tagDetailLabel will still force toContentField Markdown syntax parsing and conversion to HTML.This is very useful in certain specific scenarios, for example, you want the content of a specific tag to always be rendered in Markdown, while other content remains in its original text.

    {# 强制将tagContent中的Markdown内容渲染为HTML #}
{% tagDetail tagContent with name="Content" render=true %}
{{tagContent|safe}}

  2. Prevent rendering Markdown (render=false)On the contrary, if you userenderparameter settingsfalse, even if the Markdown editor is globally enabled in the background,tagDetailLabels will also prevent Markdown syntax from being converted and output directlyContentThe original Markdown text of the field.This applies to cases where you only want to display Markdown source code, or plan to customize rendering through a frontend JavaScript library.

    {# 阻止tagContent中的Markdown内容渲染，直接输出原始Markdown文本 #}
{% tagDetail tagContent with name="Content" render=false %}
{{tagContent|safe}}

    Please note that even if you prevent the rendering of original Markdown text, it is usually recommended to use|safeIn case the text contains special HTML entities that need to be output exactly as they are.

Additional steps to enhance reading experience: integration of Markdown style and advanced features

Render Markdown content to HTML may not be enough. To provide a better user experience, you may also need to apply appropriate styles to the rendered Markdown content.The company CMS also takes this into account, allowing us to enhance the display effect of Markdown by introducing third-party CSS libraries.

For example, you can add Markdown styles to the template.<head>area (such as)base.html) to introduce GitHub-style Markdown:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

If you are in the tag'sContentThe configuration is usually also supported by using mathematical formulas (LaTeX) or flowcharts (Mermaid), and Safe CMS also supports displaying them normally by introducing the corresponding JavaScript libraries.base.htmlthe file<head>or<body>Before label is closed:

”`html {# Mathematical formula support, MathJax is introduced #}