Markdown以其简洁、高效的特性,成为内容创作者青睐的文本格式。在安企CMS中,利用Markdown不仅能快速编写内容,还能通过简单的配置,让这些内容在前端页面上完美呈现,包括丰富的样式、数学公式乃至流程图。本文将详细介绍如何在安企CMS模板中,让您的Markdown内容正确渲染并拥有美观的样式。

启用Markdown编辑器

首先,确保您的安企CMS系统已启用Markdown编辑器。这通常在后台的“全局设置”中找到“内容设置”选项,然后勾选或启用Markdown编辑器。启用后,您在发布或编辑文档时,就可以选择使用Markdown格式来编写内容了。

模板中正确渲染Markdown内容

在模板中显示Markdown内容,主要是调用内容字段,例如文章详情页中的 Content 字段。安企CMS的模板引擎(类似Django语法)允许您通过特定的标签来获取这些内容。

通常,您会使用 archiveDetailpageDetail 等标签来获取文档内容。例如,获取文章内容的示例如下:

{% archiveDetail articleContent with name="Content" %}

关键在于如何确保Markdown语法被解析成HTML。安企CMS在处理 Content 字段时,如果后台启用了Markdown编辑器,内容会自动转换为HTML。但为了更明确地控制转换过程,您可以使用 render 参数。

render=true 会强制对内容进行Markdown到HTML的转换,而 render=false 则会跳过这一转换,直接输出原始Markdown文本。为了确保内容的正确显示,尤其是在启用或禁用Markdown编辑器后,建议显式地加上 render=true 并使用 safe 过滤器来避免HTML实体转义:

{% archiveDetail articleContent with name="Content" render=true %}
{{articleContent|safe}}

这样做能保证Markdown语法如标题、列表、链接等都被正确解析为浏览器可识别的HTML结构。

为Markdown内容添加样式

仅仅将Markdown转换为HTML是不够的,我们还需要为它添加美观的样式。安企CMS支持通过引入外部库,让您的Markdown内容获得通用样式,并能正确显示数学公式和流程图。

1. 通用Markdown样式

为了让Markdown内容拥有专业的排版,您可以引入现成的CSS库。一个非常受欢迎的选择是GitHub风格的Markdown样式。您可以在您的模板文件(通常是 base.htmlbash.html,即您网站公共头部文件)的 <head> 标签内添加以下代码:

<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" />

添加此样式表后,您的Markdown内容就会呈现出类似GitHub网站的简洁、专业的排版风格。同时,为了确保样式正确应用,建议给包含Markdown内容的父级HTML元素添加 markdown-body 类名。

**2. 数学公式显示