在内容管理系统中，Markdown 已经成为许多内容创作者偏爱的写作格式，它简洁、高效，并且易于转换为结构化的 HTML。对于 AnQiCMS 的用户而言，利用 Markdown 来撰写文章，不仅能提升写作效率，还能更好地组织内容结构。幸运的是，AnQiCMS 深度支持 Markdown 格式的文章内容，并提供了完善的机制来确保它们在网站前端被正确渲染成美观的 HTML 页面。

开启 Markdown 编辑器功能

要在 AnQiCMS 中充分利用 Markdown 的优势，首先需要在后台开启相应的编辑器功能。这个步骤非常直观，能够确保系统在保存内容时识别并处理 Markdown 语法：

  1. 登录您的 AnQiCMS 后台。
  2. 前往左侧菜单中的 全局设置，然后点击 内容设置。
  3. 在内容设置页面中，找到并启用 Markdown编辑器 选项。 开启此功能后，您在发布或编辑文章时，就可以选择使用 Markdown 编辑器来撰写内容了。

在模板中显示和渲染 Markdown 内容

当您的文章内容以 Markdown 格式保存到 AnQiCMS 中后，接下来就是在前端模板中展示它们。AnQiCMS 的模板系统基于类似 Django 的语法，非常灵活。

通常，我们会使用 archiveDetail 标签来获取文章的详细内容，其中 Content 字段就包含了您用 Markdown 撰写的文章主体。在大多数情况下，如果您已经在后台启用了 Markdown 编辑器，系统会自动将 Markdown 内容在输出到前端时转换为 HTML。您只需在模板中像这样调用：

<div>{{ archiveContent|safe }}</div>

这里的 archiveContent 是您通过 archiveDetail 标签（例如 {% archiveDetail archiveContent with name="Content" %}）获取到的文章内容变量，而 |safe 过滤器在这里至关重要。它的作用是告诉模板引擎，这段内容是安全的 HTML 代码，不需要进行额外的转义。如果没有 |safe，您的 Markdown 转换后的 HTML 标签（如 <p>, <h1> 等）可能会被原样输出，而不是被浏览器解析为实际的页面结构。

此外，AnQiCMS 还提供了更精细的控制。您可以通过 render 参数手动指定是否对 Content 字段进行 Markdown 到 HTML 的转换：

<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>

当 render 设置为 true 时，系统会执行转换；设置为 false 则不会。这在某些特殊场景下，例如您想自行处理 Markdown 内容或只显示原始 Markdown 文本时非常有用。

进一步美化：数学公式与流程图的展示

除了基本的 Markdown 文本渲染，AnQiCMS 还支持在文章中嵌入数学公式和流程图，这对于技术类或学术类内容尤为实用。不过，这些高级功能的正确显示，需要借助前端的 JavaScript 库来完成。您需要在您的模板文件（通常是 base.html 或其他公共头部文件）中引入相应的资源。

  1. 应用 Markdown 默认样式（可选但推荐）： 为了让渲染后的 Markdown 内容拥有良好的可读性，您可以引入一个预设的 CSS 样式库，例如 GitHub 风格的 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" />

  2. 正确显示数学公式： 对于数学公式，我们可以利用 MathJax 库进行渲染。在您的 base.html 文件中的 <head> 标签内添加以下 script 标签：

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

    这样，您在 Markdown 中撰写的 LaTeX 格式数学公式（如 $$E=mc^2$$ 或 $a^2 + b^2 = c^2$）就能在页面上被正确解析显示了。

  3. 正确显示流程图： 流程图的渲染则可以依靠 Mermaid 库。同样地，在您的 base.html 文件中引入以下 JavaScript 代码，确保它能在页面加载时初始化：

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

    引入 Mermaid 后，您在 Markdown 中使用的 Mermaid 语法（例如：

    graph TD;
    A[开始] --> B{判断};
    B -- 是 --> C[执行操作];
    B -- 否 --> D[结束];

    ）便能被动态渲染成图形。

小贴士

  • 确保后台设置开启： 无论是基础的 Markdown 渲染还是高级的公式/流程图，都请确认您已在 AnQiCMS 后台的 全局设置 -> 内容设置 中启用了 Markdown 编辑器。
  • 勿忘 |safe 过滤器： 在模板中输出 Markdown 转换后的 HTML 内容时，始终记得加上 |safe 过滤器，以避免 HTML 标签被转义，确保内容正确显示。
  • 样式美化： 引入 github-markdown-css 这类样式库能显著提升 Markdown 内容的视觉呈现效果，使其更具专业感和阅读体验。

AnQiCMS 通过内置的 Markdown 编辑器支持和灵活的模板渲染机制，让内容创作者能够以更高效、更直观的方式管理和发布内容。通过简单的后台设置和模板调整，您不仅能轻松展示 Markdown 文章，还能将复杂的数学公式和流程图动态呈现在您的网站上，极大地丰富了内容表现形式和用户体验。

常见问题 (FAQ)

**Q1: 为什么我的