As an experienced CMS website operation person, I know that providing rich and professional display forms is crucial for attracting and retaining users in the increasingly complex network content environment.For websites containing technical content, scientific formulas, or flowcharts, MathJax and Mermaid plugins can greatly enhance the readability and professionalism of the content.AutoCMS is committed to providing efficient and customizable content solutions, therefore, introducing these features in the template is relatively direct.

The following are the specific steps and considerations for introducing MathJax and Mermaid plugins in the Anqi CMS template:

Preparation: Enable Markdown editor

Firstly, make sure that your security CMS system has enabled the Markdown editor.Markdown editor is a new feature added to AnQi CMS, which allows you to use Markdown syntax during content creation, including the original text of mathematical formulas and flowcharts.To enable this feature, please log in to the Anqi CMS backend management interface, navigate to the "Global Settings" under the "Content Settings" option.There, you will find an option to enable Markdown editor.This is the basis to ensure that the formulas and charts you enter in the content can be correctly identified and processed.

定位template file:base.html

In the Anqi CMS, the overall layout and the introduction of functional scripts are usually in the basic template file, such asbase.html, or throughincludeThe public header file introduced by tags (such aspartial/header.htmlIn the process of doing.EnglishThese files are located in your template directory and are the shared skeleton for all pages.<head>Labels inside, to ensure they are correctly loaded and executed when the page loads.

Include the default Markdown style

Although MathJax and Mermaid focus on rendering formulas and charts, if you want Markdown content (such as titles, lists, code blocks, etc.) to have a beautiful and unified default style on the frontend page, consider introducing a Markdown stylesheet.This is usually not mandatory, but it can significantly improve the user experience.github-markdown-cssat yourbase.htmlor in the public header file.<head>tag, add the following<link>Tags:

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

This code will apply a classic GitHub-style Markdown to your Markdown content, making it appear more professional and readable.

Enable math formula: integrated MathJax

In order to display mathematical formulas written in LaTeX syntax correctly on the front-end page, we need to introduce the MathJax library.MathJax can parse LaTeX or MathML markup in the page and render it as high-quality mathematical symbols.This is indispensable for websites that publish scientific papers, technical reports, or any content containing complex mathematical expressions.

Through the CDN service of jsDelivr,base.htmlor in the public header file.<head>Add the following within the tag, immediately after the Markdown style<script>Tags:

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

asyncProperties ensure that the script loads asynchronously, without blocking the rendering of other content on the page, thereby optimizing the user experience.id="MathJax-script"is the identifier recommended by MathJax,src指向的URL包含了MathJax的TeX、MathML和CHTML输出支持，这是最常用的配置。

Render flowcharts and diagrams: Integrated with Mermaid

Mermaid is a JavaScript-based tool that allows you to create various charts such as flowcharts, sequence diagrams, Gantt charts, and more using a simple Markdown-like syntax.This is a very powerful feature for websites that need to explain complex concepts or business processes in a graphical way.

Similarly, through the jsDelivr CDN service, in yourbase.htmlor in the public header file.<head>标签内，紧随MathJax脚本之后，添加以下<script>Code block:

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

这段代码首先以ES模块的形式导入Mermaid库，然后调用mermaid.initialize({ startOnLoad: true })method.startOnLoad: trueThe parameter indicates that Mermaid automatically scans the document after the page is loaded, finds, and renders all charts defined by the Mermaid syntax.This method ensures that Mermaid will try to render even if the page content is dynamically loaded.

完成与测试

After completing the above steps, please make sure to save the modified template file.Then, create a new document in the Anqi CMS backend and use MathJax and Mermaid syntax for testing in the document content.

For example, a simple MathJax formula might be:$$E=mc^2$$. A simple Mermaid flowchart might be:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

After publishing the document, visit the front-end page, check if the mathematical formulas are rendered correctly as clear images or layouts, and if the flowcharts are displayed as interactive graphics.If everything is normal, your security CMS website now has powerful mathematical formula and chart display capabilities.

Through these integrations, your website content will no longer be limited to plain text, but can be presented in a more attractive and professional way to complex information, thus better serving your audience and enhancing the overall value of your website.

Common Questions and Answers (FAQ)

1. Why is my mathematical formula or Mermaid diagram not displayed correctly, but the original code is displayed instead?

Firstly, please confirm that you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the Anqi CMS backend.This is the key to ensure that the system recognizes formulas and charts as special content rather than ordinary text.base.html) of<head>Labels inside, and no syntax errors.Ensure that the CDN link is accessible and the network connection is normal.$$...$$or$....$），Is the Mermaid diagram displayed?mermaid...Code block enclosed form.

2. Can I include MathJax and Mermaid without using a CDN?

Of course, you can.The document recommends using CDN for convenient and quick deployment, as well as to take advantage of the global acceleration benefits that CDN brings.srcorhrefPath, pointing to the local storage location of these files. For example, you can place the downloaded MathJax files in/public/static/js/mathjax/the directory, and then place the MathJax scripts insrcto/static/js/mathjax/es5/tex-mml-chtml.jsPlease ensure that the local file path matches the template reference path.

3. Can Mermaid charts be automatically rendered if my page content is dynamically loaded?

Mermaid'smermaid.initialize({ startOnLoad: true })Configuration will automatically scan and render the chart when the page is first loaded.However, if your page content is dynamically loaded through AJAX or other methods, these newly loaded charts may not render automatically.In this case, you need to manually call Mermaid's rendering method after the dynamic content is loaded.mermaid.contentLoaded()ormermaid.run()Please rescan and render. For specific methods, please refer to Mermaid's official documentation.