How to dynamically obtain the base URL address (`BaseUrl`) in the template?

As an experienced website operations expert, I have accumulated rich experience in the practice and application of content management systems (CMS). I have a deep understanding of the powerful functions and flexible features of AnQiCMS (AnQiCMS). Today, we will delve into a crucial issue in template development: how to dynamically obtain the basic URL address of a website in the template.BaseUrl），and apply it to actual scenarios.

Dynamically obtainBaseUrl: The foundation of website flexibility.

In website operation, the basic URL address of the website (BaseUrl) plays a core role.It not only defines the root directory of the website, but also the starting point for all internal links, static resource references, and API requests.

• High maintenance costs:When the website domain name changes, the deployment environment is migrated (such as from the development environment to the production environment), or multiple subdomains need to be supported, all hardcoded URLs must be manually modified. This is not only time-consuming and labor-intensive, but also prone to errors.
• SEO performance受损：Search engines prefer websites with clear internal link structure and accurate paths.Hardcoding can lead to broken or inconsistent links, affecting the efficiency of search engine crawlers and the accumulation of website weight.
• Multi-site management restricted：AnQiCMS is renowned for its powerful multi-site management capabilities.It will be extremely difficult, if not impossible, to manage multiple domain names with completely different websites under the same template if each site uses hard-coded URLs.

Therefore, dynamically retrieveBaseUrlIt is the key to achieve high flexibility of the website, reduce maintenance costs, optimize SEO performance, and give full play to the multi-site management advantages of AnQiCMS.

In AnQiCMS,BaseUrlThe Path to Obtainment:systemThe magic use of tags

AnQiCMS's template engine is designed to be very intuitive and powerful, drawing inspiration from Django's template engine syntax, making it easy for both technical staff and content operators to get started. To dynamically obtainBaseUrlWe mainly rely on the built-in AnQiCMS.systemLabel.

systemTags are a powerful tool in AnQiCMS for obtaining system-level configuration information. The website'sBaseUrlThis is an important system configuration. Its usage is simple and clear, usually throughnamespecifying the specific configuration item to be obtained.

to obtain the website'sBaseUrlYou only need to use the following code snippet in the template:

{% system with name="BaseUrl" %}

This label will directly output the base URL address of the current website configuration. You can also assign this value to a variable, for example,siteBaseUrl:

{% system siteBaseUrl with name="BaseUrl" %}
<!-- 现在您可以在模板的任何地方使用 {{siteBaseUrl}} 来引用基础URL了 -->

Through this method, no matter where your website is deployed under the domain name, or in the 'Global Settings' of the AnQiCMS backend,网站地址how it changes, the template can automatically obtain the correct oneBaseUrl.

BaseUrlApplication in real-world scenarios

Mastered dynamic acquisitionBaseUrlAfter mastering the method, let's take a look at how it shines in daily template development and content operation:

1. Constructing internal links of the websiteWhether it is the navigation menu, detail links in the article list, or recommended content in the sidebar, dynamic usage should be adoptedBaseUrlto construct. This ensures the correctness and stability of the links.

   <a href="{% system with name="BaseUrl" %}/about-us.html">关于我们</a>
   <!-- 或者结合变量使用 -->
   {% system baseUrl with name="BaseUrl" %}
   <a href="{{baseUrl}}/contact-us.html">联系我们</a>
   

2. Load website static resourcesThe CSS style files, JavaScript scripts, images, and other static resources of a website usually also need to be loaded throughBaseUrl[en]Ensure that it is correctly referenced so that it can be loaded normally in different pages and environments.

   <!-- 加载CSS文件 -->
   <link rel="stylesheet" href="{% system with name="BaseUrl" %}/static/css/main.css">
   
   
   <!-- 加载JavaScript文件 -->
   <script src="{% system with name="BaseUrl" %}/static/js/script.js"></script>
   
   
   <!-- 加载图片 -->
   <img src="{% system with name="BaseUrl" %}/static/images/logo.png" alt="网站Logo">
   

   [en]This needs to be mentioned specifically.TemplateUrl[en]AnQiCMS also provides.TemplateUrl[en]This system variable (just like throughsystemLabel retrieval:){% system with name="TemplateUrl" %}), it points to the static file path under the current template directory. For CSS, JS, and images specific to the template itself, useTemplateUrlIt will be more standardized and convenient, as it directly points to the resource directory of the current template, making it easier to package and switch template files.

   <!-- 加载当前模板特有的CSS文件 -->
   <link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
   

   BaseUrlIt is usually used to point to global static resources or absolute paths on the website.TemplateUrlIt is specifically used for static resources within the currently active template.

3. Dynamically passed in JavaScript scripts.In some cases, you may need to retrieve in the frontend JavaScript codeBaseUrlto perform dynamic operations, such as initiating an AJAX request to a specific API interface of the website.

   <script>
       var baseUrl = "{% system with name="BaseUrl" %}";
       // 示例：发起一个AJAX请求
       fetch(baseUrl + '/api/data')
           .then(response => response.json())
           .then(data => console.log(data));
   </script>
   

4. Perfect support for multi-site managementFor AnQiCMS multi-site users with multiple domains, dynamic accessBaseUrlIt is a direct embodiment of its powerful features. When you configure multiple websites through the multi-site management feature of AnQiCMS backend, each website, when accessed, has its template{% system with name="BaseUrl" %}Tags will be automatically resolved to the correct domain name of the current visited site.This means you can use a set of universal templates to manage all sites without needing to modify the URL for each site individually, greatly enhancing management efficiency.

Practice & Tips

• Eliminate Hardcoding:Reiterate again, unless there is an extremely special and irreplaceable requirement, please avoid writing the complete URL directly in the template.
• DistinguishBaseUrlWithTemplateUrl: BaseUrlIs the root domain of the website, suitable for constructing all internal absolute path links and general static resource references.TemplateUrlIt is the static resource path under the current template directory, more suitable for referencing CSS, JS, and images unique to the template itself.Reasonably differentiate usage, which can make your template structure clearer and easier to maintain.
• Using variables:toBaseUrlorTemplateUrlAssigning to variables (such as){% system baseUrl with name="BaseUrl" %}It can make the template code more neat, avoid repeating long labels, and improve readability.

Concluding remarks

Dynamically obtainBaseUrlIt is not just a simple technical operation, it is an indispensable practice in AnQiCMS template development. It is an effective means for website operation experts to improve work efficiency, ensure stable operation of the website, optimize user experience, and enhance search engine performance. By masteringsystemTag to gainBaseUrlandTemplateUrl, you will be able to better handle the powerful features of AnQiCMS, and build high-quality websites that are flexible, efficient, and easy to maintain.

---

Common Questions (FAQ)

Why can't I directly use relative paths in templates, such as/static/images/logo.pngWhy do I have to useBaseUrl?

Although relative paths can work in some cases, it is better to useBaseUrlCan provide stronger robustness and compatibility. For example, when your website is deployed in a subdirectory (such aswww.example.com/blog/), or when performing internal forwarding, the relative path may be parsed incorrectly. Moreover, search engines prefer absolute paths when handling links, which helps improve SEO.BaseUrlAlways points to the real root directory of the website, ensuring accurate and error-free links.

2.BaseUrlandTemplateUrlWhat are the essential differences in the AnQiCMS template? How should I choose to use it?

BaseUrlRepresents the root URL of the website (e.g.,)https://www.example.com), it is usually used to construct all internal links, point to public static resources of the website, or URLs that need to be globally identified. AndTemplateUrlIt specifically refers to the root path of static resources for the currently used template theme (for examplehttps://www.example.com/public/static/default/) You can regard it as the "home address" of the website, whileBaseUrl.TemplateUrlIs the address of a family decoration store. In the selection of use:

• BaseUrl:Used for all internal links (<a href="...">) Website Logo (<img src="...">A global and universal JS/CSS library reference, as well as scenarios where you need to get the root path of the website in JavaScript.
• TemplateUrl:Primarily used to reference the images, CSS, and JavaScript files specific to the current template theme, so that these resources can also be switched when changing themes.

3. If I modify the 'Global Settings' in the AnQiCMS background,网站地址will the one in the templateBaseUrlbe automatically updated?

Yes, that is the dynamic retrievalBaseUrlThe strength of it. When you update in the "Global Settings" of the AnQiCMS backend网站地址(for example fromhttp://localhost:8001tohttps://en.anqicms.com)，the{% system with name="BaseUrl" %}tags in the template will automatically read the latest from the system configuration.网站地址The content is rendered. You do not need to manually modify any template files, the website's links and resource paths will automatically adapt to the new configuration, greatly enhancing the maintainability of the website.