As a website administrator who is well-versed in the operation of AnQiCMS, I know that proper management of website static resources is crucial for improving user experience and website performance.In AnQiCMS template development and maintenance, it is the foundation of building an efficient and stable website to store and reference CSS, JavaScript, and image static files reasonably.Below, I will elaborate on this key stage in detail.
The storage location of static resources in the Anqi CMS template
According to AnQiCMS design specifications, all static resources directly related to templates, including CSS files, JS files, and images used in template design, should be uniformly stored in the root directory of the website./public/static/In the catalog.This agreement aims to effectively separate the front-end resources from the AnQiCMS core system files and dynamic content files, thereby achieving a clear project structure, easy maintenance, and management.
In/public/static/The directory should be further subdivided, creating subdirectories such ascss//js//images/to maintain an orderly classification of resource types. For example:
- CSS file: Place in
/public/static/css/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/The directory is used to store essential images for template design, such as website logo, background image, icon, 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.
In AnQiCMS template, reference static resources
AnQiCMS provides an intelligent and flexible mechanism to reference these static resources, ensuring 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" %}Label to dynamically obtain the root path of static resources of the current template.
TemplateUrlLabels processed internally in AnQiCMS will output a complete URL pointing to the static resource directory of your current template.You only need to concatenate it as a prefix with the relative path of your static resources.
The following is a specific example of reference, showing how to correctly reference various static resources in template files:
Reference CSS file:If your main style filestyle.cssis located/public/static/css/in the path under 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/Under the path, it is usually recommended to<body>Before closing the 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">
Through this dynamic referencing method, you can avoid hardcoding the absolute path, 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 image refers to the images uploaded through the background editor and associated with specific articles, products, pages, and other content, such as article thumbnails, product detail images, and images uploaded by users.{{archive.Thumb}}/{{item.Logo}}/{{page.Images}}They are usually stored directly in the front-end. They are usually stored in/public/uploads/or other directories specified by the system.
The static resources emphasized in this article, specifically refer to the images necessary for the design of the template itself, such as background images, UI component icons, and purely decorative images, etc. They are a 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 will help you manage different types of image resources more efficiently.
Suggestions for static resource management and optimization
As a website operator, I recommend that you consider the following practices when managing AnQiCMS static resources to further improve website performance and user experience:
- Version control and caching strategy:Add version number or hash value to the file name of static resources (for example
style.css?v=20231027This helps to force the browser to refresh the cache after file update, ensuring that users always access the latest version of the resources.At the same time, by configuring appropriate HTTP cache headers on the server (such as Nginx, Apache), it can effectively utilize browser caching, reduce redundant downloads, and speed up the speed of second visits. - Resource merging and compression:For the production environment, consider combining multiple CSS files into one, multiple JS files into one, and compressing (minifying) them.This can significantly reduce the number of HTTP requests and the size of file transfers.
/public/static/directory. - CDN acceleration:When the website user distribution is extensive, integrating a Content Delivery Network (CDN) can significantly improve the loading speed of static resources.CDN by distributing resources to the nearest node to the user, reduces network latency.
TemplateUrlThe mechanism will automatically adapt. - Image Optimization:Ensure that the image file size is moderate and the format is correct (for example, using WebP format for the web can achieve better compression ratio), and perform lazy loading on the image