In today's mobile internet age, the display effect of websites on mobile phones is directly related to user experience and the efficiency of content dissemination.For users of AnQiCMS, ensuring that content is presented elegantly on various mobile devices is an indispensable part of content operation.AnQi CMS provides flexible configuration options and template mechanisms to help you easily achieve this goal.

Overview of mobile adaptation strategy of Anqi CMS

The AnQi CMS was designed with the need for multi-terminal access in mind, therefore it provides three main website modes to adapt to mobile display, allowing you to choose the most suitable solution based on your content strategy and technical capabilities:

  1. Adaptive Mode (Responsive Design):In this mode, your website uses a set of unified template files.This template uses CSS media queries and other front-end technologies to automatically adjust the layout, image size, font, and other elements based on the screen size and resolution of the user's device, ensuring a good reading experience on PCs, tablets, and smartphones.This is currently the most mainstream and recommended mobile adaptation method, as it has the lowest maintenance cost and is beneficial for search engine optimization.
  2. Code Adaptive Mode (Code-Adaptive Design):In this mode, the website uses the same set of URL addresses, but the system dynamically loads different template files to present the content based on the type of device the user accesses (PC or mobile).This means you can design a separate template for PC and mobile, but they share the same backend data and URL.
  3. PC + Mobile Independent Sites:In this mode, your PC website and mobile website have completely independent domains and templates. For example, the PC website might bewww.yourdomain.comand the mobile site might bem.yourdomain.com. The system will automatically redirect the user to the corresponding site based on the type of user's device. This mode offers the highest degree of freedom and customization, but the maintenance cost is relatively high.

Understood these three patterns, we can then further explore how to make specific configurations in Anqi CMS.

How to configure the mobile site address

In most cases, if you are using 'adaptive mode', you do not need to set a separate mobile address separately.Because a single template can intelligently adapt to all screens. However, when you choose the 'Code Adaptation Mode' or 'PC + Mobile Independent Site Mode', it is particularly important to configure an independent access address for the mobile website.

The steps to configure the mobile endpoint address are very intuitive:

  1. Log in to the Anqi CMS backend:First, log in to the administrative interface of AnQi CMS using your admin account and password.

  2. Enter the global function settings:In the left menu bar of the background, find and click on 'Background Settings', then select the submenu 'Global Function Settings'.

  3. Set the mobile end address:On the global feature settings page, you will see a configuration item named "Mobile End Address". Here, you need to enter the full access domain name of your mobile website, for examplehttps://m.yourdomain.com.

    • Important reminder:Before filling in this address, please make sure that the mobile domain has been correctly resolved to your server IP address, and that your server (such as Nginx or Apache) has also configured the access and forwarding rules for the domain name.Otherwise, even if the settings are made in the Anqi CMS backend, users may still be unable to access your mobile site normally.
    • When is it necessary to set:As mentioned before, you need to fill in here only when you want the mobile and PC ends to have different display logic and be distinguished by independent domain names or codes.If you tend to use a single template to fit all devices, leave this blank.

Adaptation and management at the template level

Just configuring the mobile end address does not guarantee the adaptation display of content on mobile phones, the real adaptation work is mainly completed at the template level. The template mechanism of Anqi CMS provides strong support for mobile adaptation:

  • Independent mobile app template directory:When you choose the "code adaptation" or "PC + mobile independent site" mode, AnQi CMS allows you to create a named directory under the current template theme directory that ismobile/in your template folder. Thismobile/The template files in the catalog are specifically used for rendering mobile page. For example, if your PC home page template isindex/index.html, then the mobile home page can be designed asmobile/index/index.html.
  • Django template engine syntax:The AnQi CMS adopts a syntax similar to the Django template engine, making it relatively easy to design templates for mobile devices.You can use conditional judgment, loop control, and other tags to optimize layout, navigation, image loading, and interaction methods for mobile devices.For example, in a mobile template, you can load lighter-weight CSS and JavaScript, or optimize image sizes to speed up loading.
  • Uniformity of content models:No matter which mobile adaptation mode you choose, the content model of Anqi CMS (such as articles, products, categories, etc.) is managed uniformly.This means you do not need to publish content separately for mobile devices, you only need to maintain a set of content data, and the system will flexibly present according to the access device and corresponding template.This greatly reduces the complexity of content management.

By configuring the above settings and template strategies, you can flexibly control the display of the website on mobile devices, whether you are pursuing the ultimate user experience or focusing on the concise and efficient operation and maintenance, Anqi CMS can provide the corresponding solutions.

Frequently Asked Questions (FAQ)

1. After selecting the 'Adaptive Mode', do you need to configure the 'Mobile End Address' in the background?Generally not needed. Adaptive mode means that your website uses a set of templates that automatically adapt to different screen sizes through front-end technologies (such as CSS media queries).In this case, PC and mobile share the same URL, the system does not need to redirect or switch templates for mobile end addresses.You need to configure the mobile address only when you adopt the "code adaptation" or "PC + mobile independent site" mode.

What if I only configured the mobile end address, but did not prepare a separate template for the mobile end?If you have configured the mobile address in the "Global Feature Settings" and your website's current mode is "PC+Mobile Independent Site" or "Code Adaptation", but you have not created it in the template directorymobile/If the folder or corresponding mobile template file is not found when accessing the mobile device, the system may not be able to find the corresponding mobile template, which may result in abnormal display of the page, chaotic content, or even errors.Therefore, configuring the mobile end address and preparing the corresponding mobile end template are complementary.

3. How does configuring a separate mobile end address affect search engine optimization (SEO)?If you choose the "PC+Mobile independent site" mode and configure a separate mobile site address, it is recommended to set the site between PC and mobile sitescanonicalTags andalternate.canonicalThe tag is used to specify the main version of the page, whilealternateThe tag is used to indicate the alternative page for the corresponding language or device type. The TDK tag of Anqi CMS supports standard links (CanonicalUrl) settings, you can make good use of this feature to ensure that search engines can correctly understand the relationship between your PC and mobile page, avoid duplicate content issues, and optimize mobile search rankings.