So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How should static resources (CSS/JS/images) be stored and referenced in the AnQiCMS template?

Calendar 👁️ 71

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 examplestyle.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'sTemplateUrlThe 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

Related articles

What file extension should AnQiCMS template files use?

As an experienced AnQi CMS website operation personnel, I know that template files play a core role in building a flexible and efficient website.They not only carry the visual presentation of the website, but also serve as a bridge for content and user interaction.For Anqi CMS, understanding the composition and usage specifications of its template files is the foundation for efficient content management and website optimization.According to the official document of Anqi CMS, template files uniformly use the file extension `.html`.

2025-11-06

How to use built-in filters (such as `truncatechars`, `upper`) to process and convert the data format of template variables?

As an experienced AnQiCMS website operation person, I am fully aware of the importance of content in attracting and retaining users.High-quality content not only requires careful creation, but also needs to be presented in an appropriate format and optimized to enhance user experience and readability.AnQi CMS, with its flexible Django template engine syntax, provides us with powerful built-in filter functions, allowing us to easily process and convert the data format of template variables.Next, I will give a detailed introduction on how to use the built-in filter of Anqi CMS

2025-11-06

What are the different roles of the three auxiliary tags `include`, `extends`, and `macro` in template structure organization?

As an experienced CMS website operation personnel of AnQi, I am well aware of the importance of a clear and efficient template structure for content management and website maintenance.In AnQi CMS, the template engine provides various auxiliary tags to help us better organize and reuse template code, among which `include`, `extends`, and `macro` are the three great tools for building a flexible template architecture.They each have different responsibilities, but together they serve to enhance the maintainability and development efficiency of the template.### Modular content reuse

2025-11-06

How to define a temporary variable and perform assignment operations in a template?

Hello! As an experienced AnQi CMS website operator, I am very happy to be able to explain in detail how to define and assign temporary variables in AnQi CMS templates.This is crucial for achieving the flexibility, readability, and maintainability of templates, enabling us to organize and display website content more efficiently.In the Anqi CMS template system, we often encounter scenarios where we need to store data, calculate results, or prepare content for specific components locally.To meet these requirements, Anqi CMS provides a concise and powerful variable definition mechanism, mainly realized through two tags

2025-11-06

How to properly define and use variables in the AnQiCMS template?

As an experienced security CMS website operation person, I know that high-quality and clear content is the key to attracting and retaining users.In AnQiCMS template development, correctly defining and using variables is the foundation for dynamic content display and improving user experience.Below, I will elaborate on how to define and use variables in AnQiCMS templates, to help you better master content display.

2025-11-06

How to write conditional judgment (if/else) and loop (for) logic tags in AnQiCMS templates?

As a professional who deeply understands the operation of AnQiCMS, I know that template design plays a core role in the presentation of website content.By flexibly using conditional judgment and loop logic, we can transform static template files into dynamic and intelligent content display platforms, thus better meeting user needs and enhancing the interactivity and user experience of the website.This article will discuss in detail how to write conditional judgment (`if/else`) and loop (`for`) logic tags in AnQiCMS templates, helping you create a more expressive website.

2025-11-06

What character encoding format should the AnQiCMS template file follow when editing?

As an experienced website operator who deeply understands the operation of AnQiCMS, I know that the details of content presentation are crucial to user experience.The character encoding of the template file is one of the essential basic links that should not be ignored.Clear and accurately displaying content is the first step to attracting and retaining users. ### AnQiCMS Template File Character Encoding Specification AnQiCMS template files must strictly follow the UTF-8 character encoding format when edited and saved.

2025-11-06

How to create a responsive, code adaptation, or PC+mobile separation template for the AnQiCMS website?

As a website content expert who deeply understands the operation of AnQiCMS, I know that a high-quality template is crucial for the attractiveness and user retention of the website.AnQiCMS provides great flexibility in template design, supporting various modes to meet different business needs and user access habits.Next, I will elaborate on how to create adaptive, code adaptation, or PC + mobile terminal separation templates for the AnQiCMS website.

2025-11-06