In AnQiCMS (AnQiCMS), building and managing websites, the efficient organization and reference of static resources (CSS styles, JavaScript scripts, images, etc.) is the key to improving website performance, maintainability, and user experience.Clear guidance principles and practical features provided by AnQi CMS help us easily cope with these challenges.
一、Clear and ordered directory structure: The way to organize static resources
Good file organization is the foundation of efficient management of static resources.In the 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 related to templates, such as styles, scripts, and images, 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 search and maintenance, but also in line with the **practice** of web development.
Under this core directory, we can create more detailed subdirectories as needed for further classification:
- CSS file:It is recommended to create
css/Subdirectory, contains all the style sheet files of the website, such asstyle.css/responsive.cssetc. - JavaScript file: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 for the website, such as logos, banners, and content illustrations.
When our website needs to support mobile adaptation and adopts a separate template mode for PC and mobile, Safe CMS also provides additional conveniences. For mobile-specific static resources, we can store them in/public/static/mobile/The directory. This separation helps us to finely control the resource loading on mobile devices, ensuring lightweight and fast response. For example, the style sheets for mobile devices can be placedpublic/static/mobile/css/, scripts placedpublic/static/mobile/js/Englishpublic/static/mobile/images/.
English/templateEach independent template directory under the root directory. Even if these template files (such as headers, footers, and other common code snippets) are storedpartial/the directory, or the page skeletonbash.html）requires the use of static resources, which should still follow the aforementioned rules and be placed in/public/static/or its subdirectories. Template files are responsible for referencing, but do not store the static resources themselves.
二、Flexible and secure reference methods: Make resources easily accessible
After defining the storage location of static resources, how to correctly and efficiently reference them in templates becomes particularly important.The Auto CMS provides flexible tag syntax, ensuring that we can dynamically and safely reference these resources.
1. Dynamically obtain the base path:When referencing static resources in templates, we should not hardcode the absolute path or relative path, because 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/).
With this tag, we can<head>Label the CSS file included in the tag,<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 static resources can still be loaded correctly even if the website address or template directory structure is adjusted.
2. Reference to image resources:Images are an important part of the website content, and there are many ways to cite them:
Images uploaded directly:If the images are manually uploaded by us:
/public/static/images/The directory can be accessed directly using the above dynamic path tags:<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, the Anqi CMS will automatically handle the storage and path of these images. They are usually stored in
/uploads/The directory is automatically generated by the system and the correct access path is created. We only need to insert the image into the content and do not need to manually adjust the path.Referenced images through specific fields (such as Logo, Thumb, Images):The documents, categories, single-page models, etc. of AnQi CMS all provide special image fields, such as
Logo(cover main image/large image),Thumb(cover thumbnail) andImages(Group image). These fields store the image paths that can be directly accessed in the template using the corresponding tags. For example, on the document detail page:<img src="{{ archive.Logo }}" alt="{{ archive.Title }}">or usingarchiveDetailTags:<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}">
3. Image optimization and lazy loading:To further improve loading speed, we can make use of the image optimization feature and lazy loading mechanism provided by Safe CMS:
- Thumbnail filter:For images referenced by field, 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 volume on the page, lazy loading can effectively reduce the pressure of the first load. The content of the safe CMS includes:
archiveDetailtags are used in the outputContentsupportslazy="data-src"parameters, which will load the imagesrcattribute in the content withdata-src，coinciding with the frontend lazy loading library to implement on-demand loading:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}
III. Content Optimization Strategy: Significantly improve the website's performance
In addition to organizing and referencing static resources, the Anqi CMS backend also provides powerful content setting functions to help us optimize static resources from the source, and comprehensively improve website loading speed and user experience.
- Image automatic processing:
- WebP format conversion:In the 'Content Settings', we can choose whether to enable the Webp image format.After enabled, the uploaded JPG, PNG images will be automatically converted to a smaller WebP format, significantly reducing the image loading time.
- Automatically Compress Large Images:Similarly in "Content SettingsThis is very helpful for avoiding uploading large images, saving storage space, and improving loading speed.
- Uniform thumbnail:We can set the website