When using AnQiCMS to build a website, we often encounter a core issue: how to ensure a **access experience on different devices, whether it's a wide PC screen or a small mobile screen?AnQiCMS provides flexible and diverse solutions, mainly focusing on adaptive, code adaptation, and independent sites for PC and mobile phones to help us achieve this goal.

Let's take a look at each of these patterns and their implementation in AnQiCMS step by step.

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, detecting the screen size and resolution of the user's visiting device through technologies such as CSS3 media queries (Media Queries), and then dynamically adjusting the layout, image size, and font elements of the web page to adapt to different display environments.

Implementation in AnQiCMS:Selecting the Auto mode, our template directory will beconfig.jsonin the filetemplate_typeset as.0.This means that the system will default to loading the same set of template files, and the follow-up adaptation work will mainly be completed by front-end CSS and JavaScript.The advantages of this method lie in the fact that content management and template maintenance are centralized in one place, so 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 human resources are limited, and the requirement for mobile user experience is not extreme customization, adaptive mode is undoubtedly a very practical choice.It can also effectively avoid SEO problems caused by content repetition, as search engines prefer content from a single URL.

2. 代码适配模式（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 adaptation, code adaptation mode is a good choice.In this mode, the server will send different HTML/CSS/JS code to PC users and mobile users based on the type of device accessed by the user (such as, by detecting the User-Agent header information), but they share the same URL.

Implementation in AnQiCMS:To enable code adaptation mode, we need to enable it in the template.config.jsonIn the middle.template_typeField settings set to1In addition, a key step is that we need to create a directory namedmobileThe subdirectory. For example, if our PC template file is/template/default/index.html, then the corresponding file for the mobile end should be/template/default/mobile/index.htmlEnglish system will intelligently select to load the PC template file ormobileDirectory template files.This pattern allows us to design a standalone and highly optimized interface and interaction for mobile devices, loading only the necessary resources for mobile, thereby providing better performance and experience than pure responsiveness.At the same time, since the URL remains unchanged, it still maintains the advantage of adaptive mode in SEO and does not produce additional URL management burden.

3. PC+手机端独立站点模式（Separate Mobile Site）

In cases where we pursue an ultimate user experience or have special operational needs, we may choose to build completely independent sites for the PC and mobile platforms. This means that the PC website and mobile website will have different domain names or subdomains (for example,www.yourdomain.comandm.yourdomain.com)，and it 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 independent site mode requires that we create in the templateconfig.jsonIn the middle.template_typeField settings set to2. Similar to code adaptation mode, we also need to create in the template directorymobileDirectory to store mobile templates. It is more important that we need to find the option 'Mobile End Address' in the 'Global Function Settings' of AnQiCMS backend, and fill in the independent domain name or subdomain prepared for the mobile end 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 address' according to this configuration.This pattern gives us the greatest freedom in designing websites for PC and mobile devices, as well as in the presentation of features, content, and server resource allocation.We can customize deeply for the needs of PC and mobile devices, theoretically providing the ultimate user experience and loading speed.hreflangThese settings are standard 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 mode for yourself?

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

  • Adaptive ModeSuitable for small websites with limited budgets, pursuing quick launch and simplified maintenance, or for scenarios with relatively simple content and low requirements for layout flexibility.
  • Code Adaptation ModeSuitable for websites that want to provide a more refined and differentiated experience for mobile users while maintaining a single URL structure.It has achieved a good balance between complexity and user experience.
  • PC+Mobile Site Mode Independent ModeThen it is more suitable for large enterprises, e-commerce platforms, or news portals that have high requirements for mobile experience and have sufficient resources to invest in independent operation and optimization.

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

Common Questions (FAQ)

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

2. In the enabled independent mobile site mode, is the content of the PC end and the mobile end independent or shared?

3. What is the impact of different template patterns on the search engine optimization (SEO) of a website?

  • Adaptive ModeIt is most friendly to SEO because it uses a single URL, which makes search engine crawling and indexing very clear and does not produce duplicate content issues.
  • Code Adaptation ModeIt performs well in SEO as well, because it also uses a single URL. Search engines are able to identify the server's ability to provide different content based on the device.
  • PC+Mobile Site Mode Independent ModeThe SEO processing 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 separatelyrel="canonical"andrel="alternate"Tags, explicitly inform the search engine of the relationship between these two URLs to avoid potential SEO issues. The AnQiCMS built-in multilingual support feature mentioned this.hreflangLabel, can be used as a reference for handling multi-version pages.