When building a website with AnQiCMS, introducing styles (CSS), interactive scripts (JS), and images as static resources is the foundation for the website's aesthetics and functionality.Learn how to correctly introduce these files in the template, which can make your website not only look professional but also rich in features and maintain efficient and stable operation.The Anqi CMS is very intuitive for managing and introducing these resources, thanks to its simple and efficient architecture and flexible template engine.
AnQiCMS template system, especially in handling static resources, is designed with great care. It follows a clear set of conventions, allowing you to easily organize and call various files.
Understand the location of static resources
In AnQiCMS, all template files are stored in/templateUnder the directory, and the style sheets, JavaScript scripts, and images related to templates, etc., static resources have a special place:/public/static/Catalog. This is the default and recommended location for storing static resources.
For example, you can write it like this in the /public/static/Create the following subdirectories under the directory to organize your resources:
/public/static/css/Used to store all your CSS files./public/static/js/Used to store all your JavaScript files./public/static/images/Used to store all your image files.
This structure helps maintain the neatness of the file system and is convenient for the system to manage and load.
Introduce local static resources in the template
When your static resource files are stored in the aforementioned/public/static/Under the directory, AnQiCMS provides a named{{system.TemplateUrl}}The special variable, it will automatically resolve to the static resource directory path corresponding to the template used by the current website.Use this variable to construct the URL for static resources, which is crucial to ensure that your website can correctly load resources in any environment (such as changing domain names, switching templates, or multi-site deployment).
1. Introduce CSS stylesheet:CSS files are usually placed in the HTML document's<head>Region, to ensure that the style can be applied as soon as the page loads.
<head>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true %}</title>
<!-- 引入您的自定义CSS样式 -->
<link rel="stylesheet" href="{{system.TemplateUrl}}/css/style.css">
</head>
Here,{{system.TemplateUrl}}will be automatically replaced with something similar.http://您的域名/public/static/您的模板目录名such a path, and then the system will load it.style.cssfile.
2. Introduce JavaScript script:JavaScript files are generally recommended to be placed in<body>the closing tag of the</body>Before that, this can avoid the script blocking the rendering of the page, enhancing user experience.
<body>
<!-- 页面内容 -->
<!-- 引入您的自定义JavaScript脚本 -->
<script src="{{system.TemplateUrl}}/js/main.js"></script>
<script src="{{system.TemplateUrl}}/js/another-script.js"></script>
</body>
Similar to CSS,{{system.TemplateUrl}}Ensured the correct path of the JS file.
3. Introduce image file:Image files can be introduced in the HTML's<img>tag directly, or as a CSS background image.
<body>
<!-- 作为img标签引入 -->
<img src="{{system.TemplateUrl}}/images/logo.png" alt="网站Logo">
<!-- 如果是作为CSS背景图，在CSS文件中可以这样写（假设CSS文件在{{system.TemplateUrl}}/css/中） -->
<!-- .hero-section {
background-image: url('../images/background.jpg');
} -->
</body>
In the CSS file, if the path to the image is fixed relative to the CSS file, you can use a relative path. But for images in HTML, it is recommended to use{{system.TemplateUrl}}To maintain the dynamic adaptability of the path.
Introduce external CDN static resources in the template
In addition to local resources, you can also import external static resources stored in a content delivery network (CDN).CDN can accelerate resource loading, alleviate server pressure, especially suitable for scenarios where the user distribution of the website is extensive.
1. Introduce external CDN CSS styles:For example, you may need to introduce an external Markdown style library to beautify your content.
<head>
<!-- 引入外部CDN的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" />
</head>
2. Introduce external CDN JavaScript scripts:Similarly, it is a common practice to directly include some commonly used JS libraries or specific functions (such as mathematical formula rendering, flowchart libraries, etc.) from CDN.
<body>
<!-- 引入外部CDN的JavaScript脚本 -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
</body>
3. Introducing External CDN Images:When your images are stored on third-party image services or CDNs, you can directly reference their full URLs.
<body>
<img src="https://your-image-cdn.com/path/to/product-image.webp" alt="产品图片">
</body>
Template Integration and **Practice**
To manage the static resources of the website more efficiently, it is recommended that you manage the code that introduces static resources centrally. In the template structure of AnQiCMS, there is usually abase.htmlFile, as the basic skeleton of all pages. You can define the page in it.<head>and<body>Structure, and introduce common CSS and JS files.
- Introduce centrally:Introduce the common CSS code in
base.htmlof<head>, introduce the common JS code inbase.htmlof</body>the tag. - Modular reference:For CSS/JS that is needed for specific pages or modules, consider locally including it in the corresponding template file, or using AnQiCMS's
{% include "partial/header.html" %}English auxiliary tags, split the head or tail fragments out, convenient for maintenance. - Performance optimization:
- CSS first, JS after:Ensure that CSS files are loaded at the top of the HTML and JS files at the bottom to optimize page rendering speed.
- Merge and compress:For multiple small CSS or JS files, merging and compressing before deployment can reduce the number of HTTP requests and the file size.Although AnQiCMS itself does not have built-in features, you can use external tools or build processes to complete them.
- Image Optimization:Ensure that the image is compressed and the dimensions are appropriate.AnQiCMS in the background content settings supports Webp format conversion and automatic compression of large images, which is a good way to optimize images.
Through following these simple rules and practices, you can easily and efficiently introduce various static resources in AnQiCMS templates, creating an excellent user experience and powerful features for your website.
Common Questions (FAQ)
Why do we recommend using{{system.TemplateUrl}}Introduce local static resources instead of writing directly/public/static/template_name/...?Use{{system.TemplateUrl}}It is because it can provide stronger flexibility and compatibility. When the domain name of your website changes, or when different templates are configured for different sites in the multi-site management function of AnQiCMS, even if it is just updating the name of the template directory, {{system.TemplateUrl}}It will automatically adapt to these changes, ensuring that the path of static resources is always correct.If the path is hardcoded, once these configurations change, you will need to manually modify all template files, which is very inconvenient.
2. Besides/public/static/Catalog, where can I put my static resources in AnQiCMS?AnQiCMS will provide externally by default/public/Access to all files under the directory. Therefore, theoretically, you will place static resources in/public/any position under the directory, and it is accessible.http://您的域名/文件名或路径Accessed directly. However, to maintain good organization and maintainability, it is strongly recommended to place all static resources related to the template in/public/static/and make use of{{system.TemplateUrl}}Reference is made, which helps distinguish which are public resources at the AnQiCMS system level and which are resources from your custom template.
3. What built-in optimization features does AnQiCMS have when introducing a large number of images?Yes, AnQiCMS provides practical built-in image optimization features. You can find them in the background's“Background Settings” -> “Content Settings”Find related options. For example, you can choose“Whether to start the Webp image format”Automatically convert uploaded JPG, PNG images to a smaller Webp format,“Whether to automatically compress large images”And specify the compression width, thereby effectively reducing the size of the image file and speeding up page loading. These features can help you automatically optimize images when uploading, without manual processing.