内容创作者经常会选择Markdown作为他们的首选工具，因为它能够以简洁明了的方式组织内容，同时又能轻松实现排版效果。然而，仅仅在后台以Markdown格式输入内容还不足以让网站前端正确地展示它们，我们需要一些额外的步骤来确保这些内容能被正确地渲染为HTML。本篇文章将详细介绍在AnQiCMS中，如何在模板中让Markdown内容华丽转身，以HTML的姿态呈现在用户面前。

一、确保后台已启用Markdown编辑器

首先，要让模板能够正确渲染Markdown内容，前提是这些内容本身就是以Markdown格式输入的。AnQiCMS深知内容编辑的灵活性至关重要，因此提供了Markdown编辑器选项。

您需要导航至AnQiCMS后台的“全局设置”->“内容设置”页面。在这里，您会找到一个选项来启用Markdown编辑器。勾选并保存后，当您在编辑文章、页面或分类内容时，就能直接使用Markdown格式来输入了。这一步是基础，它确保了您输入的原始数据是Markdown格式的，为后续的渲染奠定了基础。

二、在模板中应用Markdown渲染

仅仅在后台使用Markdown格式输入内容还不够，模板引擎并不会自动将所有内容都解析为HTML。AnQiCMS提供了几种灵活的方式来确保Markdown内容在前端得到正确的HTML渲染。

1. 针对核心内容字段的自动渲染

对于文章（archive）、分类（category）和单页面（page）等核心内容模型自带的Content字段，AnQiCMS的模板标签已经内置了Markdown渲染的逻辑。当这些内容的Content字段存储的是Markdown格式时，您需要在模板中使用archiveDetail、categoryDetail或pageDetail标签调用它们时，明确设置render=true参数。

例如，在文章详情页中，您可能这样调用文章内容：

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

这里的render=true参数告诉模板引擎，对Content字段的内容进行Markdown到HTML的转换。同时，|safe过滤器是至关重要的，它指示模板引擎将转换后的HTML代码作为安全内容直接输出，而不是将其中的HTML特殊字符进行转义（例如将<转义为&lt;），从而确保页面能够正确显示粗体、链接、图片等HTML元素。

2. 使用通用的render过滤器处理任意Markdown内容

除了核心内容字段，有时我们可能希望在自定义字段或其他来源获取的内容中也使用Markdown。例如，您可能在内容模型中为文章添加了一个名为“引言”的自定义字段，并希望该引言也支持Markdown格式。

AnQiCMS提供了一个通用的render过滤器，可以对任何包含Markdown格式的变量进行HTML渲染。其使用方式非常直观，只需将过滤器应用于相应的变量即可。

假设您有一个自定义字段introduction，并且它存储的是Markdown内容，您可以通过以下方式在模板中渲染它：

{% archiveDetail introduction with name="introduction" %}
{{ introduction|render|safe }}

或者，如果您通过archiveParams标签获取了自定义字段，例如一个名为params.introduction.Value的变量：

<div>
    {% archiveParams params with sorted=false %}
        {% if params.introduction %}
            <span>{{params.introduction.Name}}:</span>
            <span>{{params.introduction.Value|render|safe}}</span>
        {% endif %}
    {% endarchiveParams %}
</div>

通过|render|safe的组合，无论内容来自哪个字段，只要它是Markdown格式，都能够被正确地转换为HTML并安全地显示在页面上。

三、增强显示效果：支持数学公式与流程图

如果您希望更进一步，在Markdown内容中包含复杂的数学公式或精美的流程图，AnQiCMS也提供了相应的扩展支持。这些高级功能通常需要借助前端的JavaScript库来实现渲染。

您需要在模板文件的<head>部分引入这些库，通常是在您当前主题的base.html文件中。

1. 网页上数学公式的正确显示

为了让Markdown中的数学公式（如LaTeX语法）在网页上正确显示，您可以借助MathJax等库。在base.html文件的<head>标签中添加以下代码：

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

2. 网页上流程图的正确显示

对于Markdown中的流程图（如Mermaid语法），可以引入Mermaid.js库进行渲染。同样地，在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>

完成这些配置后，只要您的Markdown内容遵循相应的语法（例如MathJax的$$...$$或Mermaid的mermaid...块），它们就会在前端页面上被正确解析和渲染。

总结

在AnQiCMS模板中正确渲染Markdown内容，关键在于后台的Markdown编辑器启用，模板标签的render=true参数或render过滤器的灵活应用，以及针对特殊元素（如数学公式和流程图）的外部JavaScript库引入。掌握这些技巧，您的网站内容将能够以更加丰富、生动且结构化的形式呈现在访问者面前，极大提升内容的可读性和视觉吸引力。

常见问题（FAQ）

1. 我的Markdown内容显示为纯文本，没有转换为HTML怎么办？

这通常是因为您在模板中调用内容时，没有正确地指示AnQiCMS进行Markdown渲染。请检查您的模板代码：

  • 对于核心内容字段（如Content），确保您在使用archiveDetail、categoryDetail或pageDetail标签时，添加了render=true参数，例如：{% archiveDetail articleContent with name="Content" render=true %}。
  • 对于自定义字段或其他Markdown内容，请确保您使用了|render|safe过滤器组合，例如：{{ my_markdown_variable|render|safe }}。

2. 为什么数学公式或流程图没有显示出来，而只是显示了Markdown代码？

这种情况多半是因为您没有在模板中正确引入相应的第三方JavaScript库。请检查您的主题目录下base.html文件（或其他作为页面基础布局的模板文件）的<head>部分：

  • 数学公式：确保已引入MathJax的<script>标签。
  • 流程图：确保已引入Mermaid的<script type="module">代码块。
  • 同时，也要确认您在Markdown中使用的公式和流程图语法是正确的，并符合这些库的要求。

3. Markdown内容中的HTML标签（例如<b>）被转义显示了，而不是直接解析为粗体，该如何处理？

这表明模板引擎将渲染后的HTML内容作为纯文本处理了，通常是为了防止潜在的安全风险（如XSS攻击）。要让这些HTML标签被浏览器正确解析，您需要在输出渲染后的内容时，添加|safe过滤器。例如：{{ articleContent|safe }} 或 {{ my_markdown_variable|render|safe }}。|safe过滤器会告诉AnQiCMS，您信任这段HTML内容是安全的，可以直接输出，无需转义。