How to conditionally generate a URL based on the `BaseUrl` or `MobileUrl` settings in the `tag-system` tag?

精准触达：安企CMS中如何根据EnglishBaseUrlorMobileUrl条件生成URL？

In the era of multi-screen interconnection, providing users with smooth and device-adaptive content experience is the key to the success of website operation.Whether it is on the PC or mobile end, we hope that users can access the page most suitable for their devices.AnQi CMS, this is an enterprise-level content management system developed based on Go language. It provides powerful tools for content operators to meet this challenge with its efficient and flexible features.systemthe tag inBaseUrlandMobileUrl设置，来条件性地生成适配不同场景的URL。

安企CMS的多设备支持策略

First, let us briefly review the design philosophy of the Safe CMS in terms of multi-device support.System provides various website modes, including "Adaptive", "Code Adaptation", and "PC+mobile Independent Site" modes.

  • Adaptive Mode：One code fits all screens, the URL remains consistent.
  • Code Adaptation Mode：Loads different styles or JS logic based on the device type, the URL usually remains consistent.
  • PC+mobile独立站点模式This is the core scenario of this discussion, meaning that your PC site and mobile site may have completely independent domain names or subdomains (for example,www.yourdomain.comFor PC,m.yourdomain.comUsed for movement). In this mode, precise control over the generation method of links in the template is particularly important.

The strength of Anqi CMS lies in its ability to expose these operational configuration aspects to front-end developers through concise template tags, enabling website operators to easily implement complex logic control at the template level.

Understand Core Tools:systemtags,BaseUrlandMobileUrl

In the template system of Anqi CMS,systemThe label is the universal key to obtain global system configuration information.Through it, we can easily obtain the website name, Logo, filing number, and other basic information.systemthe tag inBaseUrlandMobileUrlThe attribute plays a core role.

  • BaseUrlThis property corresponds to the 'Website Home Page URL' configured in the 'Global Function Settings' of your Anqi CMS backend, which is usually the main domain name of your PC website.When your website does not have an independent mobile domain, it is also usually used as the base URL for all links.

    • Example of acquisition method:{% system with name="BaseUrl" %}

  • MobileUrlThis property corresponds to the 'Global Function Settings' under 'Mobile End Address'. Only when your website uses the 'PC+mobile independent site' mode, and you have configured an independent domain for the mobile end,MobileUrlThere will be a non-empty value. It represents the base URL of your mobile site.

    • Example of acquisition method:{% system with name="MobileUrl" %}

Understanding the values of these two variables is the first step in implementing conditional URL generation.

Condition-based URL Generation: Principles and Practices

In the actual template development, the most common requirements we encounter are: if a separate mobile end address is configured, then in a certain scenario (such as providing a "Visit Mobile Version" link in the navigation bar of the PC site, or in some specific templates where we want to link to the mobile version page), we should useMobileUrl；otherwise, useBaseUrlor keep the relative path

The template engine of Anqi CMS supports similar to Django'sifLogic judgment label, this is exactly the tool we use to implement conditional URL generation. Its basic syntax is{% if 条件 %} ... {% else %} ... {% endif %}.

Now, let us demonstrate how to use this mechanism through specific scenarios:

Scene one: Generate switchable site links (from PC version to mobile version and vice versa)

If you are developing a PC template and want to provide a link to the 'Visit Mobile Version' in the header or footer. This link will only be available if an independentMobileUrlIt shows only when the time comes and correctly points to the mobile station.

{# 首先，获取MobileUrl和BaseUrl的值，并赋给临时变量以便后续判断和使用 #}
{%- system mobileUrl with name="MobileUrl" %}
{%- system baseUrl with name="BaseUrl" %}

{# 判断是否存在独立的移动端地址 #}
{% if mobileUrl %}
    <div class="site-switcher">
        <a href="{{ mobileUrl }}" rel="nofollow">访问手机版</a>
    </div>
{% else %}
    {# 如果没有独立的移动端地址，可能采用自适应设计，或者不提供切换链接 #}
    <div class="site-switcher">
        <span>当前为{{ baseUrl }}，已支持自适应浏览</span>
    </div>
{% endif %}

Similarly, if you are designing a mobile template and want to provide a link back to the PC, you can also use a similar logic:

{%- system mobileUrl with name="MobileUrl" %}
{%- system baseUrl with name="BaseUrl" %}

{% if baseUrl %}
    <div class="site-switcher">
        {# 假设当前在移动端模板，需要链接到PC版 #}
        <a href="{{ baseUrl }}" rel="nofollow">访问电脑版</a>
    </div>
{% endif %}

This code structure clearly expresses the logic of 'If there is a mobile domain, display and link to it', greatly enhancing the robustness and flexibility of the template.

Scene two: Dynamically adjust the URL prefix of images and other resources

Although static resources such as images are usually throughTemplateUrlLabel to obtain the basic path, but in some special cases, you may also want the link of the image to be adjusted according toBaseUrlorMobileUrlAdjust dynamically, for example, different CDN configurations under different domain names.

{# 假设我们有一个图片路径是相对于根目录的，例如 "https://en.anqicms.com/uploads/image.jpg" #}
{%- system mobileUrl with name="MobileUrl" %}
{%- system baseUrl with name="BaseUrl" %}
{% set relativeImagePath = "https://en.anqicms.com/uploads/2023/example.webp" %}

<img src="{% if mobileUrl and currentDevice == 'mobile' %}{{ mobileUrl }}{% else %}{{ baseUrl }}{% endif %}{{ relativeImagePath }}" alt="动态图片" />

Please note the examples above,currentDevice == 'mobile'is a hypothetical variable, native in Anqi CMSsystemThe label does not provide information about the current access device.通常，设备判断是在HTTP请求层面由服务器或Nginx完成，然后由AnQiCMS加载对应的PC或移动模板。This is for demonstration of more complex conditional logic.PC+mobile独立站点mode, you usually already use in the mobile templateMobileUrlin the PC templateBaseUrlno additional judgment of the current device is required.

The more common scenario is, whether it is a PC or