As an experienced CMS website operator, I am well aware of the importance of content presentation to user experience.AnQi CMS provides powerful content management features, including support for Markdown syntax, which is crucial for users who want to present technical documents, blog posts, or code in a clear and beautiful format.To ensure that Markdown content has a unified and professional visual style on the front-end page, it is correct to introducegithub-markdown.min.cssFiles are an indispensable step.
Understand the template structure of AnQi CMS
The template system of AnQi CMS is designed flexibly, following the modular principle. All front-end template files are stored in a unified manner./templateUnder the directory, each independent website theme (or template package) will have its own subdirectory. For example, you might have one nameddefaultormythemeThe template directory. Within this theme directory, in addition to specific page template files (such asindex.html/detail.html) there will also be some code snippets for common parts.
Among them, one very important concept is the "public code" template. In the template conventions of Anqi CMS, there will usually be something likebash.htmlorbase.htmlSuch files. These files carry the universal structure of the website, such as the page header (<head>）、Navigation bar, footer, and other parts that repeat on multiple pages. Other specific page template files are usually accessed throughincludeorextendsLabel to reference or inherit these public templates for convenient code reuse and maintenance.
Confirmgithub-markdown.min.cssThe placement position of the **
github-markdown.min.cssThe file aims to provide GitHub-style formatting for Markdown rendering content.Due to Markdown content that may appear on any article detail page, single page, or even some custom modules on the website, in order to ensure consistency in styling, this CSS file should be globally included.
Based on the template design principles of Anqi CMS and the guidance in the official documentation, the most ideal position is to placegithub-markdown.min.cssThe reference code is placed in the public header template file of the website. Usually, this file isbase.htmlorbash.htmlbecause it is inherited or included in most, if not all, of the pages on the website.
In these public template files, you should add<head>inside the tag<link>reference.<head>Tags are used in HTML documents to define metadata and to include external resources (such as CSS files).Place the CSS file here, which ensures that the browser loads and applies these styles before rendering the page content, avoiding flickering or delayed loading of styles.
Detailed operation steps
to begithub-markdown.min.cssAdd the file to the Anqi CMS template and make it effective, you can follow the following steps:
First, log in to the Anqi CMS backend management interface. Make sure that it has already beenGlobal Settings>Content settingsenabled in the middle, which is the prerequisite for Markdown content to be processed.
Next, navigate totemplate design>Template management. Find the website template you are currently using. Click the template to enter its file list.
In the template file list, find the one namedbase.htmlorbash.htmlThe file. These are usually the base layout files for all pages of your website. Click to edit this file.
In the open code editor, locate the HTML of<head>Label inside. Usually, you will see that there is already some content here<meta>Labels and others<link>Label. Below these labels, or at appropriate positions according to your theme style priority, add the following line of code:
<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" />
Here, CDN resources are used, the benefit is that the browser can load files from the server closest to the user, which improves loading speed. If you want to download the file to the local server for management, you need togithub-markdown.min.cssDownload the file and upload it to your theme directory underpublic/static/css(or a similar path), thenhrefChange the path to the relative or absolute path of the local resource, for example<link rel="stylesheet" href="{{system.TemplateUrl}}/static/css/github-markdown.min.css">.
Save your comments onbase.htmlorbash.htmlThe modification of the file. After saving, it is usually recommended to clear the website cache (in the background'sUpdate Cachemenu), to ensure that the latest template file is loaded.
Through the above operations,github-markdown.min.cssIt will be globally introduced to your safe CMS website, and all content created using the Markdown editor will automatically apply the unified and beautiful style of GitHub.
Frequently Asked Questions (FAQ)
1. Why did I add?github-markdown.min.cssBut the Markdown content style did not change?First, please make sure in the Anqi CMS background.Global Settings>Content settingsChinese has enabled Markdown editor. Next, checkgithub-markdown.min.cssof<link>whether the tags are placed correctly inbase.htmlorbash.htmlthe file<head>Part and the path is correct. Finally, try to clear the browser cache and the system cache of the CMS backend.Sometimes, browser or server cache can cause style updates to be不及时.
2.github-markdown.min.csswhether the CDN link of the file can be changed to a local file?Yes, you can changegithub-markdown.min.cssDownload the file locally and upload it to your Anq CMS theme directory.public/static/css/Folder (if it does not exist, you can create it). Then, proceed to the next step.<link>label'shrefattribute to{{system.TemplateUrl}}/static/css/github-markdown.min.css. Using local files can reduce the dependency on external CDNs, but you need to maintain the update of the files yourself.
How to display mathematical formulas and flowcharts simultaneously in Markdown content?Markdown content itself does not directly support the rendering of mathematical formulas and flowcharts, and requires the use of third-party JavaScript libraries. The Anqi CMS documentation mentions that you canbase.htmlAdd at the beginning of the fileMathJaxandMermaidThe CDN reference script. These scripts are responsible for parsing the specific syntax in Markdown and rendering it as formulas and flowcharts.Please refer to the detailed description of Markdown, mathematical formulas, and flowcharts in the AnQi CMS document, which are usually withgithub-markdown.min.cssThe introduction method is similar, it is also added in the public header template.<script>.