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

How to accurately reach: How to generate URLs based on conditions in AnQi CMS?BaseUrlorMobileUrlHow to generate URLs based on conditions?

In today's multi-screen interconnected era, providing users with a smooth and device-adaptive content experience is the key to the success of website operation.Whether on PC or mobile, we hope users can access the page most suitable for their devices.Anqi CMS, this is an enterprise-level content management system developed based on the Go language, which provides powerful tools for content operators to meet this challenge with its efficient and flexible features.Today, as an experienced website operations expert, I will take you to delve into the template tag system of Anqi CMS, especially how to use it cleverlysystemin the labelBaseUrlandMobileUrlSet, to conditionally generate URLs that adapt to different scenarios.

AnQi CMS multi-device support strategy

Let's briefly review the design philosophy of Anqi CMS in terms of multi-device support.The 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 device type, the URL usually remains consistent.
  • PC+mobile independent site modeThis 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.comused for PC,m.yourdomain.comUsed for movement).In this mode, precise control of the link generation method in the template is particularly important.

The strength of AnQi CMS lies in its ability to expose these operational configurations to frontend developers through concise template tags, allowing website operators to easily implement complex logic control at the template level.

Understanding core tools:systemtags,BaseUrlandMobileUrl

In the template system of Anqi CMS,systemTags are the universal key to obtaining the global system configuration information. Through it, we can easily obtain the basic information such as the website name, Logo, filing number, and so on.And for today's topic - conditional URL generation,systemin the labelBaseUrlandMobileUrlThe attribute plays a core role.

  • BaseUrlThis property corresponds to the "Global Function Settings" configured in the Anqi CMS backend, which is usually the main domain name of your PC website.When your website does not have a separate 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 'Mobile End Address' in the 'Global Function Settings'. Only when your website adopts the 'PC+mobile independent site' model, 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 Practice

In actual template development, the most common requirement we encounter is: if an independent mobile end address is configured, then in some scenarios (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 useMobileUrlOtherwise, useBaseUrlor keep the relative path

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

Now, let's demonstrate how to use this mechanism through a specific scenario:

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

Assuming you are developing a PC template and want to provide a link to the mobile version in the header or footer. This link will only be available if an independentMobileUrlIt will only be displayed and correctly point to the mobile site.

{# 首先，获取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 throughTemplateUrlTag to get the basic path, but in some special cases, you may also want the image link to adjust according toBaseUrlorMobileUrlDynamically, for example, CDN configuration is different 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 example mentioned abovecurrentDevice == 'mobile'is a hypothetical variable, native to AnqicmssystemThe label does not provide information about the current accessing device. Usually, device determination is completed at the HTTP request level by the server or Nginx, and then the corresponding PC or mobile template is loaded by AnQiCMS.This is to demonstrate more complex conditional logic. AtPC+mobile独立站点In the mobile template mode, you usually already use it in the mobile templateMobileUrland in the PC templateBaseUrlNo additional judgment is needed for the current device.

A more common scenario is, regardless of whether it is a PC or