As a senior security CMS website operations personnel, I know that it is crucial to flexibly control the presentation of content in content management.特别是对于Markdown、数学公式和流程图这类需要特定渲染能力的内容,我们往往希望能在特定页面或内容模型中启用它们,而不是全局强制或禁用。AnQi CMS provides a powerful template engine and content management mechanism, enabling us to accurately achieve this goal.
核心策略:内容标记与模板控制
The AnQi CMS achieves precise control over Markdown, formulas, and flowcharts, with its core lying in two levels: first, ensuring the content is inputted in the required format on the backend; second, and most importantly, conditionally rendering and loading external libraries on the front-end template level according to the content or page characteristics.Although the enablement of the Markdown editor in AnQi CMS is a global setting, we can still achieve the purpose of selective enablement through fine-grained control of the front-end template.
第一步:确保后端内容创作能力
Firstly, we need to ensure that the Safe CMS content editor supports Markdown format input. This is usually done through the global settings on the backend.
Navigate to 'Global Settings' in the AnQi CMS backend and then select 'Content Settings'.Here, you will find an option to enable or disable the Markdown editor.Please make sure to set this option to 'Enable Markdown Editor'.The purpose of this setting is to allow content creators to use Markdown syntax when editing the "Content" field of articles, products, single pages, and other content, including embedding mathematical formulas (LaTeX syntax) and flowcharts (Mermaid syntax).
第二步:精准识别内容需求
为了在特定页面或内容模型中实现精确控制,我们需要一套机制来识别哪些内容需要特殊渲染。
For a single page or a specific category, you can also create a dedicated template for them, or add a 'document template' field in the content model (such ashelp-content-archive.mdAs described), and specify a template file requiring advanced rendering to identify its needs. For example, create aarticle/tech_detail.htmltemplate specifically for the technical article detail page.
Third step: Utilize the template for refined control
Once the content is entered in Markdown format and we have a mechanism to identify which content requires advanced rendering, the next critical step is to perform conditional rendering and external library loading in the frontend template.
Content rendering condition control
Auto CMS template tags, such asarchiveDetail/categoryDetail/pageDetailin the call of contentContentwhen a field is providedrenderparameter (refer totag-/anqiapi-archive/142.html)。This parameter allows us to explicitly control whether Markdown formatted content is converted to HTML.
- When
render=trueWhen, the system will parse and render Markdown content to HTML. - When
render=falseWhen, the system will not convert the Markdown content, but will output the original content instead (which is usually not what we want to display directly on the front end).
Therefore, in your detail page template (such asarticle/detail.html/product/detail.htmlorpage/detail.html), you can combine the recognition mechanism from the second step to deciderenderthe value of the parameter.
{# 示例:根据内容模型ID或自定义字段决定是否渲染Markdown #}
{%- if archive.ModuleId == 1 %} {# 假设模型ID为1的文章模型需要Markdown渲染 #}
{%- archiveDetail articleContent with name="Content" render=true %}
{%- else %} {# 其他模型则不进行Markdown渲染,直接输出 #}
{%- archiveDetail articleContent with name="Content" render=false %}
{%- endif %}
{{- articleContent|safe }} {# 确保HTML内容安全输出 #}
If you have added a content model namedEnableAdvancedMarkdownThe custom field to mark whether advanced rendering is needed, the template code can be implemented as follows:
{%- archiveDetail currentArchive with name="Id" %} {# 获取当前文档的ID,以便调用其自定义字段 #}
{%- archiveParams params with id=currentArchive %} {# 获取当前文档的所有自定义参数 #}
{%- set enableMarkdown = false %}
{%- for item in params %}
{%- if item.FieldName == 'EnableAdvancedMarkdown' and item.Value == 'true' %} {# 检查自定义字段值 #}
{%- set enableMarkdown = true %}
{%- endif %}
{%- endfor %}
{%- if enableMarkdown %}
{%- archiveDetail contentHtml with name="Content" render=true %}
{%- else %}
{%- archiveDetail contentHtml with name="Content" render=false %}
{%- endif %}
{{- contentHtml|safe }}
Lazy loading of external libraries (formulas and flowcharts)
The rendering of mathematical formulas and flowcharts usually depends onMathJaxandMermaidJavaScript libraries such ashelp-markdown.mdas described in the following). The CDN introduction code of these libraries is usually placed inbase.htmlThis will cause them to be loaded on all pages, even if the pages do not need them. In order to implement lazy loading