How to display the path of static files (CSS/JS/images) in AnQiCMS template?

When building a website on AnQiCMS, the correct reference to static files (such as CSS stylesheets, JavaScript scripts, and images) is the foundation for ensuring the smooth operation and beautiful presentation of the website.AnQiCMS provides a clear and flexible mechanism for managing and displaying these file paths, whether it's the static resources built into the template or the media files uploaded through the admin panel, all have convenient reference methods.

Physical location of static files stored

Firstly, understanding the storage location of static files is crucial. AnQiCMS has a special directory under the project root directory for storing public static resources, namely/public/static/.All template common style files, JavaScript files, and auxiliary images needed by designers when creating templates, etc., are usually recommended to be placed in this directory, and the levels are further subdivided according to the file type, for example/public/static/css///public/static/js/and/public/static/images/.

Where the template files of the website itself are stored in/template/The directory, each independent template package has its own directory, for example/template/default/This separation structure helps us better organize project files, distinguishing content and presentation layers.

Reference custom static files (CSS/JS) in the template.

When we need to reference stored in the template file/public/static/When dealing with CSS or JavaScript files in the directory, AnQiCMS provides a very convenient global variable to dynamically obtain the base path of template static resources, which isTemplateUrl.

We can make use of{% system with name="TemplateUrl" %}This system tag to get the base URL of the current template static files. For example, if our template directory isdefaultand the website is deployed inhttps://www.yourdomain.comthenTemplateUrlit will usually be resolved tohttps://www.yourdomain.com/template/default/static.

With this base URL, we can easily construct the complete static file path. For example, to reference the style file in the template, we can write the code like this:public/static/css/style.cssThe style file, we can write the code like this:

<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">

or reference a JavaScript file:

<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>

This dynamic reference method has very good flexibility.It means we do not need to hardcode the full domain name or path in the template.TemplateUrlThe value, ensuring that the static file path is always correct, greatly reduces the workload of later maintenance.

Refer to the media file uploaded via the background

For media files uploaded through the AnQiCMS backend content management system (such as articles, products, and page editing when uploading images), we usually do not need to manually concatenate paths. AnQiCMS will intelligently store these uploaded images in the appropriate location (such as/uploads/Under the directory), and directly return the complete, accessible URL in the corresponding field of the template provided.

For example, when getting the details of an article, the cover image of the articleLogo、ThumbnailThumbor a group photoImagesFields whose values are directly usable<img>The full URL of the tag:

{# 获取文章的Logo图片路径 #}
<img src="{% archiveDetail with name="Logo" %}" alt="文章标题"/>

{# 获取文章的缩略图路径 #}
<img src="{{archive.Thumb}}" alt="{{archive.Title}}"/>

{# 循环获取文章组图中的每一张图片路径 #}
{% archiveDetail archiveImages with name="Images" %}
{% for item in archiveImages %}
    <img src="{{item}}" alt="文章组图"/>
{% endfor %}

Similarly, the banner images, thumbnails, and so on set in the category page or single page are also the same.These fields directly provide the complete image address, allowing template developers to not worry about the actual storage location and path concatenation logic, just need to refer directly.

Summary

AnQiCMS handles static file path management byTemplateUrlThe tag implements flexible referencing of custom static resources in templates, and also provides direct complete URL output for media files uploaded to the backend, which greatly simplifies template development and post-maintenance complexity.This design philosophy allows developers to focus more on the logic of content display without being troubled by complicated path issues.

Frequently Asked Questions (FAQ)

1. Question: If my template directory ismy_custom_themethen{% system with name="TemplateUrl" %}What path will be displayed?Answer: It will be dynamically generated based on the domain name of your website and the actual template directory structure. For example, if your website domain ishttps://www.example.comthenTemplateUrlit will be displayedhttps://www.example.com/template/my_custom_theme/static.

2. Ask: Why not use absolute paths directly in the template?/public/static/css/style.cssSuch paths are feasible in some cases, butAnswer: Use directly/public/static/...However, such paths are feasible in some cases, butTemplateUrlProvided better flexibility and maintainability. If your website is deployed in a subdirectory, or if you need to manage multiple sites in the future (AnQiCMS supports this feature),TemplateUrlIt will automatically adjust to match the correct base path, avoiding manual modification of all static resource references. In addition, it can also adapt well to domain name changes.

3. Ask: How can I get the path of the image uploaded through the background image resource management function? Do I need to concatenate it in the template?Answer: No manual concatenation is needed.The image uploaded through the background image resource management or content editor, AnQiCMS will directly provide the complete accessible URL in the corresponding template tag or data field.{% archiveDetail with name="Logo" %}When obtaining the article logo, the returned value is the complete URL of the image, which can be used directly<img>label'ssrcProperty.