AnQiCMS 模板如何显示当前网站的基础URL地址？

在网站运营和模板开发中，准确获取并显示当前网站的基础URL地址是一项非常基础但重要的需求。无论是为了正确加载网站的静态资源（如CSS、JavaScript和图片），还是为了构建动态的内部链接，亦或是为了遵循SEO规范生成Canonical URL，了解如何在AnQiCMS模板中灵活调用网站的基础URL都至关重要。AnQiCMS作为一款高效、可定制的内容管理系统，充分考虑了这一需求，提供了简单直观的方法来处理。

为什么网站基础URL如此重要？

网站的基础URL，也就是我们常说的根域名或主域名，它代表了网站在互联网上的起点。在AnQiCMS的模板中引用这个基础URL，有几个不可忽视的好处：

  1. 确保资源正确加载：当您在模板中引用CSS、JavaScript文件或图片时，如果使用相对路径，在某些复杂URL结构下可能会出现问题。使用基础URL构建绝对路径，可以确保这些资源在任何页面都能被正确加载。
  2. 提升SEO表现：搜索引擎在抓取和索引网站时，会优先识别清晰、一致的URL结构。通过统一的基础URL来构建内部链接，有助于避免重复内容问题，并为搜索引擎提供更友好的抓取路径。
  3. 方便多站点管理：AnQiCMS支持多站点管理，不同的站点可能拥有不同的基础URL。在模板中动态调用当前站点的基础URL，可以避免硬编码，让模板在不同站点间复用时更加灵活。
  4. 动态生成导航和链接：许多网站的导航菜单、面包屑导航、友情链接等都需要指向网站的内部页面。动态获取基础URL，可以方便地拼接出完整的内部链接，提高模板的维护性和扩展性。

AnQiCMS模板中获取基础URL的方法

在AnQiCMS中，获取当前网站的基础URL地址主要通过内置的 system 标签及其 BaseUrl 字段来实现。

1. 认识 system 标签

system 标签是AnQiCMS提供的一个强大的全局配置信息调用工具。它可以帮助我们获取在后台“全局功能设置”中配置的各种系统级参数，包括网站名称、Logo、备案号、版权信息等，当然也包括我们今天的主角——网站首页地址 BaseUrl。

2. 获取网站基础URL的标签写法

要在模板中获取网站的基础URL，您可以使用以下简洁的标签：

{% system with name="BaseUrl" %}

这个标签会直接输出当前网站在后台“全局功能设置”中配置的“网站地址”内容。

如果您习惯于将标签的结果赋值给一个变量以便后续多次使用或进行进一步处理（例如结合其他过滤器），也可以这样操作：

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

此时，baseUrl 变量将存储网站的基础URL，您可以在模板的任何位置引用它。如果担心URL中可能包含特殊字符导致解析问题（尽管AnQiCMS通常会进行安全处理），在变量输出时加上 |safe 过滤器也是一个良好的习惯：

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

3. 实际应用案例

了解了如何获取 BaseUrl 后，我们来看看它在模板中的具体应用场景：

a. 加载静态资源

在模板的 <head> 部分引入CSS文件，或者在 <body> 中加载JavaScript文件和图片时：

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

这里需要注意的是，如果您的静态文件是放在当前模板目录下（通常是/template/您的模板名/public/static/），那么使用 TemplateUrl 标签会更精确和推荐：

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

TemplateUrl 标签会直接输出当前正在使用的模板的静态文件根目录地址，对于模板内部的静态资源引用更加方便。

b. 构建内部链接

在导航菜单、文章列表或者任何需要跳转到网站内部页面的地方，BaseUrl 都能派上用场：

<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. 生成Canonical URL（SEO优化）

尽管AnQiCMS提供了专门的 tdk 标签来获取规范链接 CanonicalUrl，但在某些自定义场景下，您可能需要手动构建。在这种情况下，BaseUrl 是构建完整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 %}

这里 request.path 用于获取当前页面的相对路径，结合 BaseUrl 构成完整的规范URL。

4. 多站点场景下获取基础URL

AnQiCMS的多站点功能是其一大亮点。如果您管理着多个站点，并且需要在某个站点的模板中引用其他站点的基础URL，system 标签也提供了相应的支持。您只需要通过 siteId 参数指定目标站点的ID即可：

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

请注意，如果 siteId 参数未指定，system 标签默认会获取当前访问站点的基础URL。

实践建议

  • 确保后台设置准确：网站基础URL的值来源于AnQiCMS后台的“全局功能设置