How to implement code adaptation or independent site mode display for the mobile and PC templates of AnQiCMS?

When using AnQiCMS to build a website, we often encounter a core issue: how to ensure that the website provides an excellent browsing experience on various devices, whether it is a wide PC screen or a small mobile screen?AnQiCMS provides flexible and diverse solutions, mainly focusing on adaptive, code adaptation, and independent websites for PC and mobile phones to help us achieve this goal.

First, let's understand these patterns and their implementation in AnQiCMS one by one.

1. Adaptive Mode (Responsive Design)

This is currently the most popular and relatively low-maintenance design method.In this mode, the website uses a set of code and a set of templates, through CSS3 media queries (Media Queries) and other technologies, to detect the screen size and resolution of the device being accessed by the user, and then dynamically adjusts the web page layout, image size, and font elements, etc., to adapt to different display environments.

Implementation in AnQiCMS:When choosing the adaptive mode, the template directory under ourconfig.jsonin the filetemplate_typeshould be set to0This means that the system will load the same set of template files by default, and the subsequent adaptation work is mainly done by front-end CSS and JavaScript.The advantage of this method lies in the fact that content management and template maintenance are centralized in one place, and when updating website content, there is no need to worry about the display differences on different device ends, which greatly simplifies the operation work.For small and medium-sized enterprises and self-media operators, if the budget and personnel are limited, and the requirement for the user experience on mobile devices is not extreme customization, adaptive mode is undoubtedly a very practical choice.It can also effectively avoid SEO problems caused by content duplication, search engines prefer the content of a single URL.

2. Code Adaptation (Code Adaptation / Dynamic Serving)

If we want to provide a more accurate user experience for different devices under the same domain name, but do not want to rely entirely on the limitations of front-end adaptive, the code adaptation mode is a very good choice.In this mode, the server will send different HTML/CSS/JS code to PC users and mobile users based on the device type accessed by the user (for example, by detecting the User-Agent header information), but they share the same URL.

Implementation in AnQiCMS:We need to enable the code adaptation mode in the template'sconfig.jsonthe middle oftemplate_typefield to1. Moreover, a key step is to create a directory named under the currently active template directorymobileThe subdirectory. For example, if our PC template file is/template/default/index.htmlthen the corresponding file for the mobile end should be/template/default/mobile/index.html. The system will intelligently choose to load the PC template file based on the device type or notmobileFiles under the directory. This model allows us to design a set of independent and highly optimized interfaces and interactions for mobile devices, loading only the necessary resources for mobile devices, thereby providing better performance and experience than pure adaptation.At the same time, since the URL remains unchanged, it still maintains the advantage of adaptive mode in SEO and does not generate additional URL management burden.

3. PC+Mobile Site Separate Mode

In certain cases where we strive for an ultimate user experience or have special operational needs, we may choose to build completely independent sites for PC and mobile platforms. This means that the PC website and mobile website will have different domain names or subdomains (such aswww.yourdomain.comandm.yourdomain.com），and has two completely independent templates and content display logic.When a user accesses a PC domain through a mobile device, the server will automatically redirect them to the corresponding mobile domain.

Implementation in AnQiCMS:Enable the independent site mode requires us to in the templateconfig.jsonthe middle oftemplate_typefield to2. Similar to the code adaptation mode, we also need to create in the template directorymobileThe subdirectory is used to store mobile templates. What's more, we need to find the option 'Mobile Endpoint Address' in the 'Global Function Settings' of AnQiCMS backend, and enter the independent domain name or subdomain prepared for the mobile端 here.When the system detects that the user is accessing the PC domain with a mobile device, it will redirect the user to the 'mobile end address' according to this configuration.This model gives us the greatest freedom in designing PC and mobile web sites, features, content display, and server resource allocation.We can customize in-depth for the needs of PCs and mobile devices, theoretically providing the ultimate user experience and loading speed.However, its maintenance cost is also the highest, requiring management of two independent domains, and attention must be paid to SEO inhreflangSet the standard settings to ensure that the search engine correctly understands the relationship between these two sites and avoids the penalty for duplicate content.

How to choose a suitable model for yourself?

There is no absolute 'best' model, only the one that is most suitable for your website needs and operational strategy.

• Adaptive modeSuited for small websites with limited budgets, aiming for quick launch and simplified maintenance, or with relatively simple content and low requirements for layout flexibility.
• Code Adaptation ModeWebsites that are suitable for those who want to maintain a single URL structure while providing a more refined and differentiated experience for mobile users.It maintains a good balance between complexity and user experience.
• PC + mobile phone independent site modeIt is more suitable for large enterprises, e-commerce platforms, or news portals that have very high requirements for mobile experience and have sufficient resources to invest in independent operation and optimization of the project.

No matter which mode you choose, the Django template engine syntax provided by AnQiCMS is very easy to learn, which provides a unified and efficient tool for template development in different modes.We can flexibly configure the template file and backend settings according to actual needs, so that our website can shine on any device.

Frequently Asked Questions (FAQ)

1. Can I directly copy the PC template file tomobilethe directory?It is not recommended to copy directly. Although it is technically possible to do so to prevent the website from reporting errors, this loses the meaning of code adaptation or independent site mode. Usually,mobileThe template under the directory needs to be redesigned and optimized for the characteristics of mobile devices, such as a simpler layout, larger click areas, smaller image resources, etc., to provide a truly mobile-friendly experience.

2. After enabling the independent mobile site mode, is the content on the PC and mobile ends independent or shared?In AnQiCMS, even in the PC + mobile end independent site mode, the content data itself is still shared.This means that when we publish or modify an article or product in the background, it will automatically update to the PC and mobile端.The independent site mode mainly refers to the independence of the front-end template and the access domain. The system will load different templates according to the access device to display these shared contents.

3. What is the impact of different template patterns on website SEO optimization?

• Adaptive modeIt is most friendly to SEO because it uses a single URL, and the search engine crawling and indexing are very clear, without any duplicate content issues.
• Code Adaptation ModeIt also performs well in SEO as it uses a single URL. Search engines can recognize the ability of the server to provide different content based on the device.
• PC + mobile phone independent site modeThe SEO treatment is the most complex. If not handled properly, it may be considered duplicate content by search engines. It is recommended to set up for PC and mobile sites separately.rel="canonical"andrel="alternate"Tags, explicitly inform the search engine of the relationship between these two URLs to avoid potential SEO issues. The multi-language support feature mentioned in AnQiCMS.hreflangLabel, it can be used as a reference for handling multi-version pages.