When setting up and managing a website with AnQiCMS, many friends may encounter such a need: If the website has an independent mobile version, how can you conveniently obtain and display the URL of this mobile website in the template?This not only makes it convenient for users to switch between different devices, but also has a positive impact on search engine optimization (SEO).Don't worry, AnQiCMS provides a very intuitive way to do this.

Why do we need to display the mobile URL in the template?

Let's talk briefly about why there is such a need.In the various website modes supported by AnQiCMS, one is the "PC+Mobile independent site mode".This means that your website may have two separate URLs, one for desktop (PC) and another specifically designed for mobile devices.This separation is usually for providing a better mobile user experience, such as faster loading speed, a simpler layout, or optimization for touch operations.

In this mode, you may wish to provide a clear link in the footer of a desktop website, in a navigation menu, or even through intelligent judgment of the user's device, to guide users to the corresponding mobile site.This not only improves the user experience, but also helps search engines better understand and index your website structure, especially when dealing with Hreflang tags or Canonical tags. Correct mobile URL information is crucial in these cases.

Step 1: Set the mobile address in the AnQiCMS backend

Before starting template development, we need to ensure that the mobile website URL has been correctly configured in the AnQiCMS backend.

  1. Log in to the backend:Visit your AnQiCMS backend management interface.

  2. Go to global settings:Find 'Backend Settings' in the left menu, expand it and select 'Global Function Settings'.

  3. Configure the mobile end address:On the "Global Feature Settings" page, you will see an input box named "Mobile End Address". Here, please make sure to fill in the complete URL of your mobile website, for example,https://m.yourdomain.com.

    Please note that this address must be a real and accessible one, and your domain needs to be correctly resolved to the server.This is a crucial step to ensure that your mobile website can be correctly identified and accessed.If your website is responsive design, you do not need a separate mobile URL, then this field can be left blank.

Second step: Call the mobile URL in the AnQiCMS template

The template system of AnQiCMS is very flexible, it retrieves and displays various types of information configured in the background through tags. For information in the system global settings, we usually usesystemyou can get it by tag.

systemTags are used to retrieve system-level information from the background, and the mobile end URL we need is exactly one of them.

The following methods are used to display the mobile end URL in the template:

You can use it directly{% system with name="MobileUrl" %}This tag will directly output the mobile address you set in the background.

For example, if you want to place a link in the footer of a website to guide users to the mobile version, you can write it like this:

<a href="{% system with name="MobileUrl" %}" class="mobile-version-link">访问手机版</a>

If you want to assign the obtained mobile URL to a variable for more flexible use in templates, you can do it like this:

{% set mobileSiteUrl = system with name="MobileUrl" %}
<a href="{{ mobileSiteUrl }}" class="mobile-version-link">访问手机版</a>

So, when the user clicks on this link, they will be directed to the mobile website you specified.

Tips for practical application scenarios

  • Header/Footer links:The most common application is to add a link to a "Mobile Version" or "Mobile Site" in the header or footer of a website, for users to manually switch.
  • Hreflang tags:If your site has internationalization or regionalization requirements, and the mobile version corresponds to these languages or regions, you can do thisMobileUrlWithhreflangTag combination use, notify search engines that your page has a corresponding mobile version. Although AnQiCMS'slanguagesThe tag is more suitable for managing multilingual URLs, but this URL is still useful if you need to specifically point out the corresponding PC site for a mobile site.
  • JavaScript Smart Jump:For more advanced requirements, you can use JavaScript to determine the user's device type when the page loads. If it detects a mobile device and the current access is through a PC end URL, you can use JavaScript to redirect the user to throughsystem with name="MobileUrl"Obtained mobile URL.However, this logic requires additional JavaScript code to be written and carefully tested to avoid unnecessary redirect loops or compatibility issues.

By following these steps, you can easily display and utilize your website's mobile URL in the AnQiCMS template.The design of AnQiCMS aims to make content management simple and efficient, and the flexible use of these built-in tags will bring great convenience to the operation of your website.

Common Questions (FAQ)

Q1: How do I set the mobile URL, but it does not display or displays incorrectly in the front-end template?A1: First, please check if the 'Mobile Address' in the 'Global Function Settings' is correctly filled out and contains no extra spaces. Next, confirm that you are usingsystemLabel spelling is correct, especiallyname="MobileUrl"ofMobileUrlWhether the case matches. AnQiCMS template tags are strictly case-sensitive. Finally, please clear the AnQiCMS system cache to ensure that the latest configuration has taken effect.

Q2: I set the mobile URL, but when I access it from a phone, it doesn't automatically redirect to the mobile website. What's the matter?A2: The 'Mobile End Address' setting in the AnQiCMS backend only stores this URL and will not automatically redirect.If you want the mobile users to be automatically redirected to the mobile version when accessing the PC end, or vice versa, you need to add additional JavaScript code in the template to implement device detection and redirection logic.You can also consider using an adaptive theme, so you won't need a separate mobile URL and redirection mechanism.

Q3: If my website is responsive design, do I still need to set a mobile URL?A3: If your website uses responsive design, this means that the PC and mobile ends use the same URL and a set of code, automatically adapting to different screen sizes through CSS or other technologies, so you usually do not need to set a separate 'mobile end address'.In this case, your website URL is already suitable for both PC and mobile devices.This 'Mobile End Address' feature is mainly used for websites in the 'PC+Mobile Independent Site Mode'.