在内容创作日益丰富的今天，纯文本已难以满足表达复杂概念的需求。无论是学术文章中复杂的数学公式，还是项目管理中清晰的流程图，若能直观地呈现在网页上，无疑能极大地提升内容的专业性和用户体验。安企CMS（AnQiCMS）深知这一需求，通过内置的Markdown编辑器和灵活的前端配置，让您能够轻松实现这些高级内容展示。

本文将详细介绍如何在AnQiCMS中启用Markdown编辑器，并确保数学公式和流程图能够正确显示。

启用Markdown编辑器

首先，要让您的内容编辑区支持Markdown语法，需要进行简单的后台设置。

在AnQiCMS的后台管理界面，找到并进入“全局设置”下的“内容设置”页面。在这个页面中，您会看到一个选项是“是否启用Markdown编辑器”。勾选此选项以启用Markdown编辑器，并保存您的更改。

启用后，在您创建或编辑文档时，编辑器将以Markdown模式呈现，您可以直接使用Markdown语法进行内容创作。

在内容中插入数学公式和流程图

Markdown编辑器启用后，您就可以在文档内容中编写数学公式和流程图了。AnQiCMS支持广泛使用的LaTeX语法来表达数学公式，以及Mermaid语法来绘制流程图。

  • 数学公式： 您可以使用单美元符号$...$包裹行内公式，例如 $\sum_{i=1}^n i = \frac{n(n+1)}{2}$。对于独立显示的块级公式，则使用双美元符号$$...$$包裹，例如：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
  • 流程图： 流程图的绘制则依赖于Mermaid语法。您只需使用特定的mermaid代码块即可：
graph TD
    A[开始] --> B{决策};
    B -- 是 --> C[执行操作1];
    C --> D[结束];
    B -- 否 --> E[执行操作2];
    E --> D;

在保存文档后，这些Markdown内容虽然已经存在于数据库中，但若想让它们在网站前端页面上正确渲染成可视化的公式和图表，还需要对前端模板进行一些配置。

配置前端模板以正确显示

正确显示数学公式和流程图，主要依赖于在前端页面引入相应的第三方JavaScript库和CSS样式。这些库会解析Markdown内容中的特定语法，并将其渲染为漂亮的图形或公式。在AnQiCMS中，这通常意味着修改您的模板文件，特别是base.html或类似负责页面基础结构的模板。

AnQiCMS提供了一套便捷的方式来引入这些资源：

  1. 为Markdown内容应用样式（可选） 为了让Markdown渲染后的内容在前端有更好的可读性，例如类似GitHub的风格，您可以引入一个CSS样式表。将以下代码添加到您的base.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" />

    这个CSS文件将为Markdown渲染出的元素（如标题、列表、代码块等）提供统一且美观的样式。

  2. 正确显示数学公式 数学公式的渲染通常通过MathJax库实现。将以下代码添加到您的base.html文件的<head>标签内：

    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

    这行代码会异步加载MathJax脚本，它将自动扫描页面中的LaTeX数学公式并将其渲染为高质量的排版。

  3. 正确显示流程图 流程图的渲染需要Mermaid库。将以下代码添加到您的base.html文件的<head>标签内：

    <script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

    这段脚本会加载Mermaid库并初始化它，startOnLoad: true参数确保页面加载完成后，Mermaid会自动查找并渲染所有的流程图代码块。

  4. 在内容输出时渲染Markdown 这是最关键的一步。当您在模板中调用文章、分类或单页的内容字段（通常是Content字段）时，AnQiCMS默认输出的是原始的Markdown文本。为了让前端引入的库能够识别并渲染这些Markdown内容，您需要明确告诉AnQiCMS在输出时将其转换为HTML。

    在使用archiveDetail、categoryDetail或pageDetail等标签获取Content字段时，请添加render=true参数，并配合|safe过滤器，例如：

    {% archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
    • render=true：此参数指示AnQiCMS在后端将Markdown内容预先转换为HTML。
    • |safe：这个过滤器是防止模板引擎对HTML代码进行二次转义，确保转换后的HTML能够被浏览器正确解析。

    通过以上步骤，您在AnQiCMS中创建的包含数学公式和流程图的Markdown内容，就能够在网站前端页面上得到完美的展示了。

总结

AnQiCMS通过提供Markdown编辑器的支持，结合前端灵活的模板配置能力，使得在网站上展示丰富多样的内容变得非常简单。从启用编辑器到引入必要的第三方库，再到在模板中正确渲染内容，每一步都旨在帮助您高效地构建专业且富有表现力的网站。

常见问题 (FAQ)

1. 为什么我启用了Markdown编辑器，也在内容中写了数学公式和流程图，但前端页面上还是显示原始的Markdown代码？ 这通常是因为您在前端模板中没有正确地告诉AnQiCMS渲染Markdown内容。请检查您的模板文件（如detail.html），确保在调用Content字段时添加了render=true参数和|safe过滤器，例如：{{archiveContent|render|safe}}。

2. 我能否将MathJax和Mermaid的CDN链接替换成自建服务，以提高加载速度或应对CDN不稳定情况？ 完全可以。文档中提供的CDN链接只是方便快速部署的示例。您可以下载MathJax和Mermaid的发行包到您的服务器上，然后将base.html中的<script>和<link>标签的src或href属性指向您本地文件路径即可。

3. 除了文章内容，分类页面和单页面能否也使用Markdown编辑器和这些高级功能？ 是的。AnQiCMS的分类详情（categoryDetail）和单页面详情（pageDetail）标签同样支持Content字段，并且该字段也可以通过添加render=true参数来渲染Markdown内容。这意味着您可以在分类描述、单页面介绍等地方使用Markdown语法，包括数学公式和流程图。