How to ensure that Markdown, formulas, and flowcharts rendered in the Safe CMS are displayed well on mobile devices?

In AnQi CMS, ensuring that Markdown content, mathematical formulas, and flowcharts display well on mobile devices is a key factor in improving user experience and website professionalism.As a content expert deeply familiar with the operation of AnQiCMS, I know that high-quality content not only requires meticulous crafting but also needs to be seamlessly presented on various terminals.AnQiCMS with its flexible template system and high-performance utilization of the Go language provides the foundation for us to achieve this goal.

Optimize the presentation of content in mobile devices of AnQiCMS

Enable Markdown editor and content rendering basics

AnQiCMS provides a Markdown editor, greatly facilitating content creators.To ensure that Markdown, formulas, and flowcharts are displayed well on mobile devices, you need to enable this feature on the back-end first.Enter the "Global Settings" -> "Content Settings" in AnQiCMS backend and enable Markdown editor.Enable this option and the system will process Markdown syntax. However, some additional frontend integration work is required to display these complex elements correctly and beautifully on the front-end page.

AnQiCMS supports various website modes, including adaptive, code adaptation, and PC+mobile independent site mode.No matter which mode is adopted, we can customize it in our flexible template system to meet the display needs of mobile devices./templateIn the directory, there arebase.htmlThis is the global skeleton file, it is the ideal location to import general CSS and JavaScript libraries.

Ensure the adaptive display of Markdown content.

Markdown content, especially when it includes tables or code blocks, may encounter width overflow issues on mobile devices. AnQiCMS integratesgithub-markdown-cssLibrary, which provides a set of beautiful and relatively responsive default styles for Markdown rendering. We can addbase.htmlthis stylesheet at the top of the file:

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

However, for especially wide tables or code blocks, basic styles may be insufficient.At this point, you can enhance its mobile adaptability through custom CSS.div）overflow-x: auto;Property.Thus, when the content width exceeds the screen, users can swipe horizontally to view the full content instead of causing the overall page layout to become disordered.max-width: 100%; height: auto;To prevent image overflow.

Elegant display of mathematical formulas on mobile devices.

For Markdown content containing mathematical formulas, AnQiCMS combines the MathJax library to achieve correct rendering on the web.MathJax is a powerful JavaScript rendering engine that can convert LaTeX, MathML, or AsciiMath notation into high-quality mathematical symbols.base.htmlAdd CDN script of MathJax at the beginning of the file header:

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

MathJax itself has good support for responsive design, it can automatically adjust the layout and scaling of formulas according to the screen size.On mobile devices, MathJax usually optimizes display by default, such as providing horizontal scrolling or collapsing features when space is insufficient.The content creator should also avoid overly long or complex single-line formulas when writing formulas, considering segmented display to enhance readability.

Clear presentation of flowcharts on mobile devices.

Markdown中的流程图通常通过Mermaid语法实现。AnQiCMS uses the Mermaid library to convert text-defined flowcharts into SVG graphics.base.htmlFiles importing the Mermaid module script:

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

Like mathematical formulas, SVG graphics generated by Mermaid have good scalability.However, complex flowcharts may still appear crowded on small screens.overflow-x: auto;CSS rules, allow users to horizontally scroll to view the entire chart when necessary.In addition, when creating content, it is advisable to simplify the flowchart and avoid creating overly complex structures that require excessive scrolling to understand on mobile devices.

Collaboration between template customization and content creation

AnQiCMS's template system allows us to deeply customize. If the default responsive strategy cannot meet specific needs, such as providing a completely different layout or special interaction for mobile devices, we can make use of AnQiCMS's 'PC+Mobile independent site mode' or 'Mobile template directory'}}]mobile/”Function. This allows us to design a separate template and style for mobile devices, thus achieving more precise control.

Finally, the good presentation of content on mobile devices not only depends on technical configuration, but also cannot do without the efforts of content creators.When creating Markdown, formulas, or flowcharts, always keep in mind the reading habits and device limitations of mobile users.Avoid creating overly large, information-dense single elements; appropriately splitting and simplifying them will greatly enhance the reading experience on mobile devices.Through the powerful content management and flexible template mechanism of AnQiCMS, combined with these front-end optimization strategies, we can ensure that your website content is presented in a **state on any device, attracting and retaining valuable readers.

Common Questions and Answers (FAQ)

Q1: Why does the formula or flow chart still not display normally even though I have enabled the Markdown editor in the AnQiCMS background and followed the instructions to include the CDN file?

A1: Please first check the console for error messages in the browser developer tools (F12), as this usually points to the source of the problem.Ensure that the CDN link is correct and accessible.base.htmlIs the file correctly saved and deployed?AnQiCMS's template modification may require clearing the system cache, try clicking the 'Update Cache' feature in the background.$$...$$or$...$English, Mermaid flowchart usagemermaid ....

Q2: When my Markdown table is displayed on mobile phones, it will overflow the screen. Are there any general CSS methods that can solve this?

A2: Yes, a general solution is to add CSS styles to the parent container that includes Markdown content. You can add CSS styles to the area where Markdown is rendered (for example<article>Label or specificdivAdd a container)overflow-x: auto;.So, when the width of the table or code block exceeds the screen, the browser will automatically display a horizontal scrollbar for the container, allowing users to scroll to view the full content without destroying the overall page layout.max-width: 100%; height: auto;.

Q3: If I do not want to use CDN resources, does AnQiCMS support deploying MathJax or Mermaid libraries to the local server?

A3: AnQiCMS itself does not built-in these third-party libraries, but its flexible template system allows you to do so. You can download the release files from the official websites of MathJax and Mermaid, and then upload them to AnQiCMS's/public/static/The path under the catalog. Then, modifybase.htmlofscriptandlinkTagssrcorhrefProperties, point to the path of your local deployment. Please note that manually deploying and maintaining these libraries may require more work, and ensure that they are synchronized in time when updating.