As a website administrator who is deeply familiar with AnQiCMS operation, I know that proper management of website static resources is crucial for improving user experience and website performance.In AnQiCMS template development and maintenance, reasonably storing and referencing CSS, JavaScript, and images, etc., is the foundation for building an efficient and stable website.Below, I will elaborate on this key link.
The location of static resources in AnQi CMS template
According to AnQiCMS design specifications, all static resources directly related to templates, including CSS files, JavaScript files, and images used in template design, should be stored in the root directory of the website./public/static/In the directory. This convention aims to separate front-end resources from the core system files and dynamic content files of AnQiCMS, thereby achieving a clear project structure, easy maintenance and management.
In/public/static/Under the directory, you should further subdivide and create such ascss//js//images/etc. subdirectories to maintain the orderly classification of resource types. For example:
- CSS file: Place in
/public/static/css/Under the directory, used to store the global styles, layout styles, or specific component styles of the website. - JavaScript file: Place in
/public/static/js/Under the directory, used to store interactive logic, animation effects, or third-party JS libraries. - Image resources: Place in
/public/static/images/Under the directory, used specifically to store indispensable images for template design, such as website logos, background images, icons, decorative images, and so on.
This layered storage not only helps you quickly locate and manage files, but also lays a good foundation for future template updates, switching, or performance optimization.
Refer to static resources in the AnQiCMS template
AnQiCMS provides an intelligent and flexible mechanism to reference these static resources to ensure that the resource links remain correct and valid regardless of how the website deployment environment changes (such as domain name changes, deployment to subdirectories, etc.). The core of this mechanism lies in using{% system with name="TemplateUrl" %}The tag is used to dynamically obtain the root path of the static resources of the current template.
TemplateUrlThe tag processed internally in AnQiCMS will output a complete URL pointing to the static resource directory of your current template.You just need to use it as a prefix, and concatenate it with the relative path of your static resources.
The following is a specific example that shows how to correctly reference various static resources in the template file.
Reference CSS file:If your main style filestyle.cssis located/public/static/css/in the path, in your template file (usually<head>within the tag), you should reference it like this:
<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
Reference JavaScript file:If your custom script filemain.jsis located/public/static/js/is located in the path, it is usually recommended to reference it before the<body>closing tag:
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
Reference template image:If your website Logo imagesite-logo.pngis located/public/static/images/is located in the path,<img>you can reference it like this in the tag:
<img src="{% system with name="TemplateUrl" %}/images/site-logo.png" alt="您的网站Logo">
By using this dynamic reference method, you can avoid hardcoding absolute paths, thereby greatly enhancing the universality and portability of the template.
The difference between content images and template images
In AnQiCMS, we need to clearly distinguish between "content images" and "template images".Content images refer to images uploaded through the backend editor and associated with specific articles, products, pages, etc., such as article thumbnails, product detail images, and user-uploaded images.These images are managed by the AnQiCMS system for their storage paths and are accessed through specific template variables such as{{archive.Thumb}}/{{item.Logo}}/{{page.Images}}They are directly referenced on the front end. They are usually stored in/public/uploads/or in directories specified by the system.
This article emphasizes static resources, specifically the images necessary for the design of the template itself, such as background images, UI component icons, and purely decorative images, etc., which are part of the template file structure and should be manually placed in/public/static/images/In the directory and throughTemplateUrlLabel for reference. Understanding this difference helps you manage different types of image resources more efficiently.
Suggestions for static resource management and optimization
As a website operator, I suggest you consider the following **practices when managing AnQiCMS static resources to further enhance website performance and user experience:
- Version control and caching strategy:Add version number or hash value to the filename of static resources (for example
style.css?v=20231027This helps force the browser to refresh the cache after the file is updated, ensuring that users always access the latest version of the resource.At the same time, by configuring appropriate HTTP cache headers on the server (such as Nginx, Apache), it can effectively utilize browser caching, reduce repeated downloads, and speed up the speed of the second visit. - Resource merging and compression:For production environments, it is recommended to merge multiple CSS files into one, multiple JS files into one, and compress them (minify).This can significantly reduce the number of HTTP requests and the file transfer size.Although AnQiCMS may not have built-in this feature, you can use external build tools (such as Webpack, Gulp, etc.) to complete preprocessing, and then deploy the optimized files to
/public/static/Directory. - CDN acceleration:When the website user distribution is extensive, connecting to a content delivery network (CDN) can greatly improve the loading speed of static resources.CDN distributes resources to the nearest node to the user, reducing network latency.When configuring CDN, you just need to point the static resource domain of the website to the CDN service provider, AnQiCMS's
TemplateUrlThe mechanism will adapt automatically. - Image optimization:Make sure the image file size is moderate, the format is correct (for example, using WebP format for the web can achieve better compression), and implement lazy loading for the image