As an experienced CMS website operation personnel, I am well aware of the importance of content presentation to user experience.AutoCMS 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.github-markdown.min.cssThe file is an essential step.
Understand the template structure of the Anqi CMS.
The template system of Anqi CMS is flexible and follows the modular principle. All front-end template files are stored uniformly./templateThe directory contains, each independent website theme (or template package) will have its own subdirectory. For example, you may have one nameddefaultormythemeThe template directory. Inside this theme directory, in addition to the specific page template files (such asindex.html/detail.html), there will also be some code snippets for common parts.
Among them, one of the most important concepts 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 common structure of the website, such as the page header (<head>）、Navigation bar, footer, and other repetitive parts across multiple pages. Other specific page template files are usually throughincludeorextendsLabels can be used to reference or inherit these common templates, thus achieving code reusability and convenience in maintenance.
OKgithub-markdown.min.css placement
github-markdown.min.cssThe file is intended to provide GitHub-style formatting for Markdown-rendered content.Since Markdown content may appear on any article detail page, single page, or even some custom modules, in order to ensure consistency in style, this CSS file should be globally imported.
According to the template design principles of Anqi CMS and the guidance in the official documents, the most ideal location isgithub-markdown.min.cssThe reference code is placed in the public header template file of the website. Typically, this file isbase.htmlorbash.html, as it is inherited or included in most if not all pages of the website.
In these public template files, you should add<head>inside the tag<link>reference.<head>The label is a part of HTML document used to define metadata and introduce external resources (such as CSS files).Place the CSS file here to ensure that the browser loads and applies these styles before rendering the page content, thus avoiding issues such as page flickering or delayed style loading.
Detailed operation steps
To addgithub-markdown.min.cssthe file to the security CMS template and make it effective, you can follow the following steps:
Firstly, log in to the Anqi CMS backend management interface. Make sure that you have alreadyGlobal Settings>Content Settingsenabled Markdown editor, 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 file 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 some here already<meta>Labels and others<link>Label. Below these labels, or at the appropriate position 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 is the use of CDN resources, 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 files 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 a relative or absolute path of the local resource, for example<link rel="stylesheet" href="{{system.TemplateUrl}}/static/css/github-markdown.min.css">.
save what youbase.htmlorbash.htmlThe modification of the file. After saving, it is usually recommended to clear the website cache (in the background),Update the cachein the menu), to ensure that the latest template file is loaded.
Through the above operations,github-markdown.min.cssWill be globally introduced to your security CMS website, and all content created using the Markdown editor will be automatically applied with the unified and beautiful style of GitHub.
Common Questions (FAQ)
1. Why did I add it?github-markdown.min.cssBut the Markdown content style has not changed?First, please make sure that in the Safe CMS backend'sGlobal Settings>Content SettingsEnglish has been enabled. 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 clearing the browser cache and the system cache of the CMS backend.Sometimes, the cache of the browser or server can lead to the style not being updated in a timely manner.
2.github-markdown.min.csswhether the CDN link of the file can be changed to a local file?Yes, you can changegithub-markdown.min.cssFile downloaded to local and uploaded to your CMS theme directory underpublic/static/css/folder (if not exist, you can create it). Then<link>Tagshrefchange the properties to{{system.TemplateUrl}}/static/css/github-markdown.min.css. Using local files can reduce dependence on external CDNs, but you need to maintain the update of the files yourself.
3. How to display mathematical formulas and flowcharts in Markdown content at the same time?Markdown content itself does not directly support rendering mathematical formulas and flow charts, and requires the use of third-party JavaScript libraries. The document of Anqi CMS mentions that one canbase.htmlThe header of the file is addedMathJaxandMermaidThe CDN reference script.These scripts are responsible for parsing specific syntax in Markdown and rendering it as formulas and flowcharts.github-markdown.min.cssThe introduction method is similar, it is also added in the public header template<script>Label.