How to determine the current template directory name so that it can be dynamically referenced in the template to access static resource paths?

Good, as an experienced website operation expert, I am happy to deeply analyze the strategy and practice of dynamically referencing static resource paths in AnQi CMS.

The beauty of dynamic, the way of operation and maintenance: How to flexibly refer to static resource paths in AnQi CMS

In website operation, one of the core values of the content management system is to provide high flexibility and maintainability.How to efficiently and dynamically manage the path of static resources (such as CSS, JavaScript, images, etc.) during template design and theme switching is an important indicator of the usability of a CMS.Hardcoded paths often become 'landmines' in future operations, and AnQiCMS (AnQiCMS) knows this well, providing a set of elegant solutions.

Today, let's talk about how to accurately obtain the directory name of the current template in Anqi CMS and build a highly adaptable static resource reference path based on it.

Say goodbye to hard coding: The pain points of traditional paths

Imagine you are designing a beautiful template for your security CMS website named 'elegant-theme'. You reference your style files in the template like this:

<link rel="stylesheet" href="/public/static/elegant-theme/css/style.css">

This looks fine. However, when you decide to switch to a new template, such as 'modern-design', you will find that all static resource paths must be manually modified, otherwise the website will be disheveled in style and its functions will fail.This is time-consuming and labor-intensive, and it also brings huge maintenance risks, especially in scenarios with multiple sites or frequent updates.

The fundamental problem with hard-coded paths is that they lack flexibility. They tightly couple the actual storage location of resources with template logic, and if one changes, the other must also adjust.The design philosophy of Anqi CMS is precisely to break this rigid coupling.

The wisdom of AnQi CMS:systemwith the tag andTemplateUrl

AnQi CMS, as an experienced 'butler', naturally understands this. It is equipped with built-insystemLabel, it provides a universal key for accessing the global configuration information of the system. Among this key, there are several key 'switches' that can help us solve the problem of static resource paths.

The first, and the most direct and recommended way, is to useTemplateUrlthis field. According to the document description of AnQi CMS,TemplateUrlIt will directly point to the root directory of the static resources of the current active template. This means, it has already been handled for you/public/static/当前模板名称/This part of the path allows you to concatenate the template directory name manually.

In your template file, you can obtain and use it in the following wayTemplateUrl:

{# 引用样式文件 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">

{# 引用 JavaScript 文件 #}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>

{# 引用图片资源 #}
<img src="{% system with name="TemplateUrl" %}/images/logo.png" alt="网站Logo">

This method is extremely concise and efficient{% system with name="TemplateUrl" %}It will be parsed by Anqie CMS as the currently enabled template in/public/static/The actual path under the directory, for example/public/static/defaultor/public/static/my-custom-themeJust append the relative path of your resource in the template directory after that.

Further: When is it neededTemplateName?

You may notice thatsystemA label also has another field calledTemplateNameSo,TemplateNameWhat is the use of this field?

TemplateNameDirectly returned is the currently enabled template'spure nameFor example, "default", "my-custom-theme", and so on, without any prefix or slash. Although in most static resource reference scenarios,TemplateUrlBut it is enoughTemplateNameVery useful in certain specific cases.

For example, your JavaScript code may need to load specific plugins or execute different logic based on the current template name, or you may need to display the current template name in HTML for debugging. In this case, you can do it like this:

{# 在JavaScript中获取模板名称，并进行处理 #}
<script>
    var currentTemplate = "{% system with name='TemplateName' %}";
    if (currentTemplate === "my-custom-theme") {
        // 加载 my-custom-theme 特有的 JavaScript 逻辑
        console.log("当前模板是：" + currentTemplate);
    }
</script>

{# 在HTML中显示模板名称 #}
<p>您当前使用的是：{% system with name="TemplateName" %} 模板。</p>

Therefore,TemplateUrlemphasizesbuilds a complete static resource reference pathwhileTemplateNamethen emphasizesgets the identifier of the template itselfBoth have their own emphasis, complementing each other.

Practice: Building Flexible Static Resource Paths

Let's feel the power of this dynamic reference method through some more specific examples:

1. Introducing Global CSS File:

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

2. Load the JavaScript file at the bottom of the page:

   <body>
       <!-- 页面内容 -->
       <script src="{% system with name="TemplateUrl" %}/js/jquery.min.js"></script>
       <script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
   </body>
   

3. Image reference in the template:

   <header>
       <a href="/">
           <img src="{% system with name="TemplateUrl" %}/images/header_logo.png" alt="公司品牌Logo">
       </a>
   </header>
   
   <div class="banner" style="background-image: url('{% system with name="TemplateUrl" %}/images/banner_bg.jpg');">
       <!-- Banner 内容 -->
   </div>
   

   Whether it is a CSS background image or in the HTML<img>Tags can be easily referenced in this way, ensuring that the resource path can automatically adapt even if the template is changed.

Summary: Embrace flexibility and maintainability.

Provided by Anqi CMSsystemtags and theirTemplateUrlandTemplateNameWe can completely say goodbye to the nightmare of hardcoding static resource paths.This dynamic referencing method is the**practice**of achieving highly customizable, easy to maintain, and scalable website themes.It not only improves the efficiency of website development, but also brings unprecedented flexibility and stability to your website in the long-term operation.Learn to use these