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

As an experienced website operations expert, I have accumulated rich experience in the practice and application of content management systems (CMS), especially with 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 the 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 (BaseUrlIt plays a core role. It not only defines the root directory of the website but is also the starting point for all internal links, static resource references, and API requests.For systems like AnQiCMS that support multi-site management and frequent content updates, if we hard-code (i.e., hard-code) the website URL in the template, it will bring a series of problems:

• High maintenance costs:When the website domain name changes, the deployment environment is migrated (for example, from the development environment to the production environment), or multiple subdomains need to be supported, all hardcoded URLs must be manually modified, which is not only time-consuming and labor-intensive, but also prone to errors.
• SEO performance is受损：Search engines prefer websites with clear, accurate path internal link structures.Hardcoding can lead to link failure or inconsistency, affecting the crawling efficiency of search engine spiders and the accumulation of website weight.
• Multi-site management is restricted：AnQiCMS is known for its powerful multi-site management capabilities.If each site uses a hard-coded URL, it will be extremely difficult, even impossible, to manage multiple websites with completely different domain names under the same template.

Therefore, dynamically obtainBaseUrlIt is the key to achieving high flexibility of the website, reducing maintenance costs, optimizing SEO performance, and fully leveraging the multi-site management advantages of AnQiCMS.

In AnQiCMS,BaseUrlThe Path to Obtain:systemThe clever use of tags

The AnQiCMS template engine is designed to be very intuitive and powerful, drawing on the syntax of the Django template engine, making it easy for technical staff and content operators to get started. To dynamically obtainBaseUrlWe mainly rely on the AnQiCMS built-insystem.

systemTags are a powerful tool in AnQiCMS for retrieving system-level configuration information. The website'sBaseUrlThis is an important system configuration. It is simple and clear in use, usually throughnamespecified by parameters to obtain specific configuration items.

to get the websiteBaseUrlYou only need to use the following code snippet in the template:

{% system with name="BaseUrl" %}

This tag will directly output the base URL address of the current website configuration. In order to use this value more flexibly in the template, you can also assign it to a variable, such assiteBaseUrl:

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

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

BaseUrlApplication in actual scenarios

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

1. Build internal links on the websiteWhether it is the navigation menu, the detail link in the article list, or the recommended content in the sidebar, it should use dynamicBaseUrlto build. 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 the website usually also need to be loaded throughBaseUrlCite correctly, ensure 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">
   

   This needs to be mentioned specifically.TemplateUrl. AnQiCMS also provides.TemplateUrlThis system variable (also throughsystemTag 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, useTemplateUrlIt will be more standardized and convenient because 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 for websites, whileTemplateUrlis specifically used for static resources within the currently activated template.

3. Passing dynamically in JavaScript scriptsIn some cases, you may need to retrieve in front-end JavaScript codeBaseUrlto perform dynamic operations, such as initiating an AJAX request to a specific API interface of a 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, dynamically retrieveBaseUrlIt is the direct embodiment of its powerful functions. When you configure multiple websites through the multi-site management function of the AnQiCMS background, each website accesses its template in{% system with name="BaseUrl" %}The label will automatically resolve to the correct domain name of the current site.This means you can use a universal template to manage all sites without having to modify the URL for each site individually, which greatly improves management efficiency.

**Tips and Techniques

• Eliminate hardcoding:Emphasize again, unless there is an extremely special and irreplaceable need, please avoid writing the complete URL directly in the template.
• DifferentiateBaseUrlwithTemplateUrl: 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 the CSS, JS, and images of the template itself.Using it reasonably can make your template structure clearer and easier to maintain.
• Using variables:toBaseUrlorTemplateUrlAssign to variables (such as{% system baseUrl with name="BaseUrl" %}), can make the template code neater, avoid repeated writing of long labels, and improve readability.

Conclusion

dynamically obtainBaseUrlIt is not just a simple technical operation, it is an indispensable practice in AnQiCMS template development, an effective means for website operation experts to improve work efficiency, ensure stable website operation, optimize user experience and search engine performance. By mastering the use ofsystemtags to retrieveBaseUrlas well asTemplateUrlYou will be able to better handle the powerful features of AnQiCMS, building flexible, efficient, and easy-to-maintain high-quality websites.

Frequently Asked Questions (FAQ)

1. Why can't I use relative paths directly in the template, for example/static/images/logo.pngbut have to useBaseUrl?

Although relative paths can work in some cases, it is better to useBaseUrlIt can provide stronger robustness and compatibility. For example, when your website is deployed in a subdirectory (such aswww.example.com/blog/), or when forwarding internally, relative paths may be resolved 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 that the links are accurate and error-free.

2.BaseUrlandTemplateUrlWhat are the essential differences in AnQiCMS templates? How should I choose which one to use?

BaseUrlRepresents the root URL of a website (for examplehttps://www.example.com), it is usually used to construct all internal links, point to public static resources of the website, or URLs that require global identification. AndTemplateUrlIt refers to the root path of static resources for the currently used template theme (for examplehttps://www.example.com/public/static/default/)。You canBaseUrlconsider it as the 'home address' of the website, andTemplateUrlIs the address of a home decoration store. When choosing to use:

• BaseUrl:Used for all internal links (<a href="...">), Website Logo (<img src="...">), a globally used JS/CSS library reference, and scenarios where you need to get the root path of a website in JavaScript.
• TemplateUrl:Used to refer to the images, CSS and JavaScript files that are unique 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网站地址in the templateBaseUrlwill it update automatically?

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