How to effectively organize and reference website static resources (CSS/JS/images)?
Building and managing websites in AnQiCMS (AnQiCMS), efficient organization and referencing of static resources (CSS styles, JavaScript scripts, images, etc.) is the key to improving website performance, ease of maintenance, and user experience.AnQi CMS provides clear guidelines and practical features to help us easily handle these challenges.
A clear and orderly directory structure: the way to organize static resources
Good file organization is the foundation of efficient management of static resources.In AnQi CMS, the system has planned a unified and logically clear storage location for static resources, which greatly simplifies our management work.
All static resources such as styles, scripts, and images related to templates should be stored uniformly in the root directory of the website/public/static/In the catalog. This centralized management method is not only convenient for searching and maintenance, but also in line with the practice of web development.
Under this core directory, we can create more detailed subdirectories as needed to further classify:
- CSS files:It is recommended to create
css/Subdirectory, storing all style sheet files of the website, for examplestyle.css/responsive.cssetc. - JavaScript files:It is recommended to create
js/Subdirectory, used to store all JavaScript script files, such asmain.js/jquery.min.jsetc. - Image file:It is recommended to create
images/Subdirectory for storing various images required by the website, such as Logo, banner image, content illustrations, etc.
When our website needs to support mobile adaptation and has adopted a separate template mode for PC and mobile, Anqi CMS also provides additional convenience. For mobile-specific static resources, we can store them in/public/static/mobile/In the catalog. This separation helps us to finely control the resource loading on mobile devices, ensuring lightweight and fast response. For example, the style sheet for mobile devices can be placed inpublic/static/mobile/css/, the script is placed inpublic/static/mobile/js/, the picture is placed inpublic/static/mobile/images/.
It is worth mentioning that the template files of Anqi CMS are stored in/templateIn each independent template directory under the root. Even if these template files (such as headers, footers, and other common code snippets) are stored inpartial/directory, or page skeletonbash.html)Need to refer to static resources, which should still follow the above rules and be placed in/public/static/or its subdirectory. The template file is only responsible for referencing and does not store the static resources themselves.
Flexible and secure referencing method: Make resources accessible
After the storage location of static resources is clarified, how to correctly and efficiently refer to them in templates is particularly important.AnQi CMS provides flexible tag syntax to ensure that we can dynamically and safely reference these resources.
1. Dynamically retrieve the base path:When referencing static resources in templates, we should not directly hardcode absolute paths or relative paths, as the domain name or subdirectory of the website may change. Anqi CMS provides a very practical system tag to dynamically obtain the root path of static resources: {% system with name="TemplateUrl" %}This tag will return the address of the static files corresponding to the current website template, for examplehttp://yourdomain.com/public/static/orhttp://yourdomain.com/template/your_template_name/(Depends on the specific configuration of AnQiCMS, but it will usually point to/public/static/)
Using this tag, we can<head>In the tag, include the CSS file, in<body>Include the JavaScript file before the end, for example:
<!-- 引入 CSS 样式表 -->
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<!-- 引入 JavaScript 脚本 -->
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
This reference method ensures that even if the website address or template directory structure is adjusted, static resources can still be loaded correctly.
2. Reference of image resources:Images are an important part of a website's content, and there are many ways to reference them:
Images uploaded directly:If the images are manually uploaded to
/public/static/images/The directory can be directly referenced using the dynamic path tag above:<img src="{% system with name="TemplateUrl" %}/images/logo.png" alt="网站Logo">Image uploaded through the content editor:When we upload images through the backend rich text editor in articles, product details, or single pages, Anqicms will automatically handle the storage and paths of these images. They are usually stored in
/uploads/Under the directory, and the system will automatically generate the correct access path. We just need to insert the image, no need to manually adjust the path.Images referenced by specific fields (such as Logo, Thumb, Images):The Anqi CMS provides special image fields for documents, categories, single pages, and models such as
Logo(Cover first image/large image),Thumb(Cover thumbnail) andImages(Group photo). These fields store the image paths that can be directly accessed in the template through corresponding tags. For example, on the document detail page:<img src="{{ archive.Logo }}" alt="{{ archive.Title }}">Or use:archiveDetailTags:<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}">
3. Image optimization and lazy loading:To further improve loading speed, we can take advantage of the image optimization features and lazy loading mechanism provided by Anqi CMS:
- Thumbnail filter:For images referenced by fields, if you need to dynamically generate thumbnails, you can use
thumbFilter:<img src="{{ item.Logo|thumb }}" alt="{{ item.Title }}">This will automatically generate and reference the corresponding thumbnail version under the thumbnail rules set in the background. - Lazy loading:For images with a large number or size on a page, lazy loading can effectively reduce the pressure of the first load. Anqi CMS's
archiveDetailtags during outputContentsupportinglazy="data-src"Parameter, this will load the imagesrcattribute is replaced withdata-srcWith the help of a front-end lazy loading library to implement on-demand loading:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}
3. Content Optimization Strategy:全面提升website performance
In addition to the organization and referencing of static resources, the Anqi CMS backend also provides powerful content settings functionality to help us optimize static resources from the source, and comprehensively improve website loading speed and user experience.
- Image auto processing:
- Convert to WebP format:In the 'Content Settings', we can choose whether to enable the Webp image format.After turning on, uploaded JPG and PNG images will be automatically converted to a smaller WebP format, significantly reducing image loading time.
- Automatically compress large images:Similarly, in the "Content Settings", we can turn on the "Whether to automatically compress large images" and set the "Auto-compress to a specified width".This is very helpful in avoiding the upload of large images, saving storage space, and improving loading speed.
- Unified thumbnails:We can set up the website