How to display the mobile URL of the website in AnQiCMS template?

When using AnQiCMS to build and manage a website, many friends may encounter the following need: How can you conveniently obtain and display the URL of the independent mobile version of the website in the template?This makes it convenient for users to switch between different devices and also has a positive impact on search engine optimization (SEO).Don't worry, AnQiCMS provides a very intuitive way to achieve this.

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

First, let's briefly discuss why there is such a need.Among the various website modes supported by AnQiCMS, there is one called "PC+Mobile independent site mode".This means your website may have two independent URLs, one for desktop (PC) and another specifically designed for mobile devices.This separation is usually to provide a more optimized 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 the desktop website, in some navigation menu, or even by intelligently judging 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. The correct mobile URL information is crucial in this case.

Step 1: Set the mobile end address in the AnQiCMS backend

Before starting template development, we need to make sure that the mobile website URL is correctly configured in the AnQiCMS backend.

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

2. Enter global settings:In the left menu, find "Backend Settings", click to expand and select "Global Function Settings".

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

   Please note that this address must be accessible and your domain must be correctly resolved to the server.This is the key 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.

Step 2: Call the mobile URL in the AnQiCMS template

The AnQiCMS template system is very flexible, it retrieves and displays various types of information configured on the back-end through tags. For information in the global settings of the system, we usually usesystemtags to obtain.

systemThe tag is used to get system-level configuration information from the background, and the mobile end URL we need is exactly one of them.

The following is the method to display the mobile end URL in the template.

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

For example, if you want to place a link in the footer of the 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 the template, you can do it like this:

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

This, when the user clicks on this link, will be directed to the mobile end website you specify.

Tips for practical application scenarios

• Header/Footer links:The most common application is to add a link to a "mobile version" or "mobile site" at the top or bottom of a website, making it convenient for users to manually switch.
• Hreflang tag:If your site has internationalization or regionalization needs, and the mobile also corresponds to these languages or regions, you can use thisMobileUrlwithhreflangUsing tags together, notify the search engine 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, JavaScript can redirect the user to access throughsystem with name="MobileUrl"The mobile end URL obtained. 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, flexibly using these built-in tags will bring great convenience to your website operation.

Frequently Asked Questions (FAQ)

Q1: How do I set up a mobile URL but it does not display on the front-end template or displays incorrectly?A1: First, please check that the 'Mobile Endpoint Address' in the 'Global Function Settings' backend is correctly filled in without any extra spaces. Next, confirm that you are usingsystemThe label is spelled correctly, especiallyname="MobileUrl"ofMobileUrlDo the case match. AnQiCMS template tags strictly distinguish between uppercase and lowercase. Finally, please clear the AnQiCMS system cache to ensure that the latest configuration has taken effect.

Q2: I set up the mobile URL, but why doesn't it automatically redirect to the mobile website when accessed on a phone?A2: The 'Mobile End Address' setting in AnQiCMS backend merely stores this URL, it will not automatically perform a jump.If you want the mobile user to automatically redirect to the PC end when accessing, or vice versa, you need to add additional JavaScript code in the template to implement device judgment and redirection logic.You can also consider using an adaptive theme, so there is no need for a separate mobile end URL and jump mechanism.

Q3: Do I need to set a mobile URL if my website is responsive design?A3: If your website uses responsive design, this means that both 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 suitable for both PC and mobile devices.This 'Mobile Address' feature is mainly used for websites in the 'PC+Mobile Independent Site Mode'.