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

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

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. Referring to this basic URL in AnQiCMS templates has several undeniable benefits:

  1. Ensure resources are loaded correctly: When referencing CSS, JavaScript files, or images in a template, if you use a relative path, problems may arise in some complex URL structures.Use the base URL to construct an absolute path, which ensures that these resources can be loaded correctly on any page.
  2. Improve SEO performance: A search engine prioritizes identifying clear and consistent URL structures when crawling and indexing websites.By using a unified base URL to construct internal links, it helps to avoid duplicate content issues and provides a more friendly crawling path for search engines.
  3. Convenient for multi-site management：AnQiCMS supports multi-site management, different sites may have different base URLs.In the template, dynamically calling the base URL of the current site can avoid hardcoding and make the template more flexible when reused across different sites.
  4. Dynamically generate navigation and links: Many website navigation menus, breadcrumb navigation, friend links, and others need to point to the internal pages of the website.Dynamically retrieve the base URL, which can facilitate the concatenation of complete internal links, 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-insystemtags and theirBaseUrlto implement the field.

1. KnowledgesystemTag

systemThe tag is a powerful global configuration information call tool provided by AnQiCMS. It can help us obtain various system-level parameters configured in the background "Global Function Settings", including website name, Logo, filing number, copyright information, etc., of course, including the main character of today - the website homepage addressBaseUrl.

2. Get the basic URL tag of the website

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

{% system with name="BaseUrl" %}

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

If you are accustomed to assigning the result of a label to a variable for subsequent use or further processing (for example, combining with other filters), you can also do so:

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

at this point,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 when outputting the variable.|safeThe filter is also a good habit:

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

3. Actual application cases

Understood how to getBaseUrlAfter that, let's take a look at its specific application scenarios in the template:

a. Load static resources

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

<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>

It should be noted that if your static files are located in the current template directory (usually/template/您的模板名/public/static/), then useTemplateUrlthe label will be more accurate and recommended:

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

TemplateUrlThe tag directly outputs the root directory address of the static files of the currently used template, which is more convenient for referencing static resources within the template.

b. Build internal links

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

<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 dedicatedtdktag to obtain the canonical linkCanonicalUrlBut in some custom scenarios, you may need to build it 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 base URL of a site's template,other sites,systemThe tag also provides corresponding support. You just need to go throughsiteIdSpecify the ID of the target site with the parameter:

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

Please note if:siteIdThe parameter is not specified,systemThe tag will get by defaultThe current visited siteThe base URL of.

Practical suggestions

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