How does AnQiCMS template display the base URL address of the current website?

In website operation and template development, accurately obtaining and displaying the current website's base URL is a very basic but important requirement.It is crucial to understand how to flexibly call the basic URL of the website in AnQiCMS template, whether it is for correctly loading the static resources of the website (such as CSS, JavaScript, and images), for building dynamic internal links, or for following SEO specifications to generate Canonical URL.AnQiCMS as an efficient and customizable content management system, fully considers this requirement and provides a simple and intuitive method to handle it.

Why is the base URL of the website so important?

The basic URL of the website, which is also known as the root domain or main domain, representing the starting point of the website on the Internet. There are several undeniable benefits to referencing this basic URL in AnQiCMS templates:

  1. Ensure resources are loaded correctlyWhen you reference CSS, JavaScript files, or images in a template using a relative path, issues may arise in some complex URL structures.Use the base URL to construct an absolute path, which can ensure that these resources can be loaded correctly on any page.
  2. Improve SEO performanceThe search engine will prioritize identifying clear and consistent URL structures when crawling and indexing websites.Build internal links through a unified base URL helps avoid duplicate content issues and provides more friendly crawling paths for search engines.
  3. Convenient multi-site managementAnQiCMS supports multi-site management, and different sites may have different base URLs.Dynamically call the base URL of the current site in the template to avoid hardcoding, making it more flexible for reuse across different sites.
  4. Dynamic generation of navigation and linksMany website navigation menus, breadcrumb navigation, friend links, etc. need to point to the internal pages of the website.Dynamically retrieve the basic URL, which can conveniently concatenate to form a complete internal link, improving the maintainability and scalability of the template.

Method to obtain the base URL in AnQiCMS templates

In AnQiCMS, the basic URL address of the current website is mainly obtained through built-in.systemTags and theirBaseUrlfields.

1. Understandingsystemtags

systemTags are a powerful global configuration information call tool provided by AnQiCMS. It helps us obtain various system-level parameters configured in the "Global Feature Settings" backend, including website name, Logo, filing number, copyright information, of course, as well as our main character today - the website homepage addressBaseUrl.

2. English version: Retrieve the basic URL of the website using the tag syntax

To obtain the basic URL of the website in the template, you can use the following concise tag: English version:

{% system with name="BaseUrl" %}

This tag will directly output the content of the "Website Address" configured in the "Global Function Settings" of the current website.

If you are accustomed to assigning the result of a label to a variable for subsequent multiple uses or further processing (such as combining with other filters), you can also do it this way:

{% system baseUrl with name="BaseUrl" %}
{{ baseUrl }}

At this time,baseUrlThe variable will store the base URL of the website, which you can reference at any position in the template. If you are concerned that the URL may contain special characters that could cause parsing issues (although AnQiCMS usually handles security), you can add it to the variable output when|safeFilter is also a good habit:

{% system baseUrl with name="BaseUrl" %}
{{ baseUrl|safe }}

3. Actual application case:

Understood how to get:BaseUrlAfter that, let's take a look at its specific application scenarios in templates:

a. Load static resources

In the template:<head>Partially import CSS files, or<body>load JavaScript files and images in:

<head>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="{% system with name="BaseUrl" %}/public/static/css/style.css">
    <!-- 设置网站Favicon -->
    <link rel="icon" href="{% system with name="BaseUrl" %}/favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- 加载图片 -->
    <img src="{% system with name="BaseUrl" %}/uploads/logo.png" alt="网站Logo">
    <!-- 引入JavaScript文件 -->
    <script src="{% system with name="BaseUrl" %}/public/static/js/main.js"></script>
</body>

Here are some things to note, if your static files are located in the current template directory (usually/template/您的模板名/public/static/), then usingTemplateUrltag is more precise and recommended:

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

TemplateUrlThe label will directly output the root directory address of the static files for the currently used template, making it more convenient for referencing static resources within the template.

b. Construct internal links

In the navigation menu, article list, or any place where you need to jump to an internal page of the website,BaseUrlit can be used everywhere:

<nav>
    <a href="{% system with name="BaseUrl" %}">网站首页</a>
    <a href="{% system with name="BaseUrl" %}/about-us.html">关于我们</a>
    <a href="{% system with name="BaseUrl" %}/contact.html">联系我们</a>
</nav>

<!-- 文章详情页中的返回列表链接 -->
<a href="{% system with name="BaseUrl" %}/news-list.html">返回新闻列表</a>

c. Generate Canonical URL (SEO Optimization)

Although AnQiCMS provides a specialtdktag to obtain the canonical linkCanonicalUrlBut in some custom scenarios, you may need to build manually. In this case,BaseUrlis an important part of building a complete URL:

{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- else %}
<link rel="canonical" href="{% system with name="BaseUrl" %}{{ request.path }}" />
{%- endif %}

Hererequest.pathUsed to obtain the relative path of the current page, combinedBaseUrlto form a complete standard URL.

4. Obtain the base URL in a multi-site scenario

AnQiCMS's multi-site feature is one of its highlights. If you manage multiple sites and need to refer to the template of a specific siteother sites's base URL,systemThe tag also provides corresponding support. You just need to specify the ID of the target site bysiteIdspecifying the parameter:

{# 获取站点ID为2的网站基础URL #}
{% system otherSiteBaseUrl with name="BaseUrl" siteId="2" %}
<p>另一个网站的地址是: {{ otherSiteBaseUrl|safe }}</p>

Please note that ifsiteIdthe parameter is not specified,systemthe tag will default to fetchingCurrent access site's basic URL.

Practical Suggestions

  • Ensure the background settings are accurate: The value of the basic URL of the website comes from the 'Global Function Settings' in the AnQiCMS background.