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

Overview of AnQi CMS mobile adaptation strategy

At the design stage of Anqi CMS, the need for multi-terminal access was taken into account. 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. 自适应模式 (Responsive Design):In this mode, your website uses a set of unified template files.This template adjusts the layout, image size, and font elements, etc., automatically according to the screen size and resolution of the user's device through CSS media queries (Media Queries) and other front-end technologies, ensuring a good reading experience on PCs, tablets, and mobile phones.This is currently the most mainstream and recommended mobile adaptation method, as it has the lowest maintenance cost and is conducive to search engine optimization.
  2. 代码适配模式 (Code-Adaptive Design):In this mode, the website also uses a set of URL addresses, but the system will dynamically load different template files to display content according to the type of device accessed by the user (PC or mobile).This means you can design a separate template for the PC and mobile end, but they share the same backend data and URL.
  3. PC+手机端独立站点模式 (PC + Mobile Independent Sites): EnglishIn this mode, your PC website and mobile website have completely independent domains and templates. For example, the PC website may bewww.yourdomain.comand the mobile site might bem.yourdomain.com。The system will automatically redirect users to the corresponding site based on the type of user's device. This mode provides the highest degree of freedom and customization, but the maintenance cost is relatively high as well.

Understood these three patterns, we can further explore how to perform specific configurations in the security CMS.

How to configure the mobile site address

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

Configuring the mobile end address steps are very intuitive:

  1. Logging into the Anqi CMS backend:Firstly, log into the Anqi CMS management interface with your administrator account and password.

  2. Enter Global Function Settings:In the left menu bar on the back end, find and click 'Back-end Settings', then select the sub-menu '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:Please make sure that this mobile domain has been correctly resolved to your server IP before filling in this address, and that the access and forwarding rules for the domain have also been configured on your server (such as Nginx or Apache).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, it is only necessary to fill in here when you want the mobile and PC end to have different display logic, and to distinguish through independent domain names or codes.If you prefer to use a single template for all devices, leave this blank.

Adaptation and management at the template level

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

  • An independent mobile template directory:When you select the "Code Adaptation" or "PC+Mobile Independent Site" mode, the CMS allows you to create a directory namedmobile/This is a subdirectory. 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 uses a syntax similar to the Django template engine, which makes 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 according to the characteristics of mobile devices.For example, in the mobile template, you can load lighter-weight CSS and JavaScript, or optimize image sizes to speed up loading.
  • Consistency 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 visiting device and corresponding template.This greatly reduces the complexity of content management.

Through the above configuration and template strategy, 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.

Common Questions (FAQ)

1. Do I need to configure the "Mobile Endpoint Address" in the background after selecting "Adaptive Mode"?Generally not required.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, the PC and mobile end share the same URL, the system does not need to distinguish the mobile end address for redirection or template switching.Only when you choose the 'Code Adaptation' or 'PC+Independent Mobile Site' mode, do you need to configure the mobile end address.

2. What happens 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 end address in the “Global Function Settings” and your website's current mode is “PC+Mobile Independent Site” or “Code Adaptation”, but you have not created in the template directorymobile/If the folder or corresponding mobile template file is not found, when the mobile device accesses it, the system may not be able to find the corresponding mobile template, resulting in abnormal display of the page, disordered content, or even error messages.Therefore, configuring the mobile end address and preparing the corresponding mobile end template are complementary.

3. What is the impact of configuring independent mobile end addresses on search engine optimization (SEO)?It is recommended to set between the PC and mobile end sites if you choose the "PC+mobile independent site" mode and configure an independent mobile end addresscanonicalTags andalternateLabel.canonicalThe tag is used to specify the main version of the page, andalternatethe 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）的设置，您可以善用此功能，确保搜索引擎能够正确理解您的PC和移动端页面之间的关系，避免重复内容问题，并优化移动搜索排名。