在AnQiCMS中,为内容增添Markdown、数学公式以及流程图,能够极大地提升内容的表现力和可读性,尤其对于技术文档、教育资料或数据分析报告等场景。AnQiCMS作为一个高效的内容管理系统,提供了灵活的机制来支持这些现代化的内容展示需求。
要实现Markdown、数学公式和流程图在AnQiCMS页面中的正确显示,主要涉及到后台的设置启用和前端模板的必要引入。以下是详细的步骤和一些实用建议。
一、启用Markdown编辑器
AnQiCMS 提供了一个现代化的内容创作环境,尤其是在支持Markdown编辑器方面,极大地提升了内容发布的效率和质量。Markdown以其简洁的语法,让内容创作者能够专注于内容本身,而不是繁琐的排版。
要充分利用Markdown的优势,首先需要在后台启用它。这通常可以在 安企CMS后台 -> 全局设置 -> 内容设置 中找到相应的选项。启用Markdown编辑器后,无论是发布文章、创建单页面,还是编辑分类或标签的描述,其内容编辑器都会切换到Markdown模式。这意味着你可以直接在内容区域使用Markdown语法进行创作,系统在保存时会自动将其转换为HTML,为前端页面的显示打下基础。
二、让网页理解并美化Markdown
尽管AnQiCMS后台在保存时会将Markdown转换为HTML,但为了让这些HTML内容在前端显示得美观、规范,并且拥有良好的可读性,通常需要引入一个专门的样式表。GitHub Markdown CSS是一个广受欢迎的选择,它能让你的Markdown内容拥有GitHub风格的优雅排版。
将此样式表集成到你的网站非常直接。你需要找到当前使用的模板文件中的base.html(这是一个通用的布局文件,包含了网站的头部、底部等公共部分,通常位于/template/你的模板目录/下)。在base.html的<head>标签内部,添加以下<link>代码,引入GitHub Markdown CSS:
<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转换而来的内容都将拥有统一且美观的样式。
三、轻松集成数学公式
对于科学、技术或教育类内容,数学公式的正确显示是至关重要的一环。单纯的HTML无法很好地呈现复杂的数学表达式。MathJax是一个强大的JavaScript库,它能够将LaTeX、MathML或AsciiMath格式的数学公式渲染成高质量的、可在网页上交互显示的排版。
要将MathJax集成到AnQiCMS页面中,同样需要在base.html文件中进行操作。在前面添加的GitHub Markdown CSS之后,于<head>标签内部(或者页面底部,具体取决于你对页面加载性能的考量和脚本依赖关系),加入MathJax的引用脚本:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
完成集成后,你就可以在Markdown内容中书写数学公式了。MathJax支持多种语法,最常用的是LaTeX语法。例如,行内公式可以使用$E=mc^2$,块级公式(单独占据一行并居中显示)可以使用$$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$。当页面加载时,MathJax会自动识别并渲染这些公式。
四、绘制动态流程图
流程图、序列图以及其他图表能够将复杂的概念和流程以可视化的方式呈现,使内容更加生动和易于理解。Mermaid.js是一个基于Markdown的图表绘制工具,它允许你通过简单的文本描述来创建各种精美的图表。
要在AnQiCMS页面中显示Mermaid图表,你需要引入Mermaid.js库并进行初始化。继续在base.html文件的<head>标签内(或者页面底部),添加以下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[结束];
```
Mermaid.js会解析这些文本块,并将其转换为交互式的SVG图表。
五、将Markdown内容渲染至页面
当你在后台启用了Markdown编辑器并输入了包含Markdown、数学公式或流程图的内容后,AnQiCMS在渲染页面时,会智能地将Markdown文本自动转换为HTML格式。这意味着,你在模板中通过archiveDetail、pageDetail或tagDetail等标签调用的内容,通常会直接以HTML形式展示,并自动应用前面引入的样式和脚本。
例如,如果你想在文章详情页显示Markdown内容,可以这样调用文档内容字段:
{% archiveDetail articleContent with name='Content' %}{{articleContent|safe}}{% endarchiveDetail %}
这里,articleContent是你定义的一个变量,name='Content'指定了要获取文档的Content字段。|safe过滤器至关重要,它指示模板引擎将输出的HTML内容视为“安全”的,从而避免对HTML标签进行不必要的转义,确保Markdown转换后的HTML能够正常显示。
需要注意的是,AnQiCMS也提供了render=true参数,可以在一些特定情况下,例如通过自定义字段存储Markdown内容,或者希望强制进行Markdown到HTML的转换时使用。例如:
”`twig {% archiveDetail archiveContent with name=‘Content’ render=true %}{{archiveContent|