In the era of multi-device coexistence, websites that can adapt well to various screen sizes, whether on PC, tablet, or mobile phone, have become a basic requirement.autoCMS (AutoCMS) is fully aware of this and provides a variety of flexible configuration options to help you easily implement responsive design or independent mobile content display, ensuring that your content delivers a high-quality browsing experience to users on any device.

Auto CMS provides three main website modes to support multi-terminal display: adaptive, code adaptation, and PC + mobile independent sites.Each pattern has its unique application scenarios and configuration methods, and we will delve into each one in detail next.

1. Use adaptive mode, a set of design goes smoothly

Adaptive design (Responsive Design) is the most common and most convenient solution for multi-terminal display.It refers to a website using a set of HTML structure and CSS styles, adjusting the layout, image size, and text formatting automatically according to the screen size and resolution of the user's device, with technologies such as media queries, to adapt to different display environments.

How to configure:

Enabling adaptive mode in AnQi CMS is very straightforward. You usually just need to find in the template folder you are currently using (for example/template/default) withinconfig.jsonthe file.template_typeField, and set its value to0It means that the system will default your template to be prepared for adaptive design, and all devices will load the same set of template files.

The advantage of this model lies in the low maintenance cost, as content only needs to be published once, and the system will automatically adjust the display according to CSS. It is an efficient and practical choice for most small and medium-sized enterprises and self-media.

2. Utilize code adaptation patterns to finely control the mobile experience

If your website has higher customization requirements for mobile devices, or there are significant differences in content display logic and interaction between PC and mobile devices, responsive design may not fully meet the needs.This is where the Code Adaptive mode of AnQi CMS becomes very useful.

The core of the code adaptation mode lies in the intelligent judgment of the CMS for the user's access device type, and then providing for PC and mobile endpointsDifferent HTML template filesBut they share the same backend data. For example, the PC end may display a richer information stream, while the mobile end focuses on core functions and simple navigation.

How to configure:

To enable code adaptation mode, first you need to create a subdirectory namedmobilein your template directory. For example, if your main template is/template/default, then the mobile template should be placed in/template/default/mobile.

Then, you need toconfig.jsonin the file, andtemplate_typeset1.

when the user visits your website:

  • If the system detects it is a PC device, it will load the main template folder (for example/template/default)
  • If the system detects a mobile device, it will automatically switch to/template/default/mobileThe corresponding template file under the directory. For example, the homepage for PC is/template/default/index/index.html, the mobile end will automatically look for/template/default/mobile/index/index.html.

This means you can design a layout and UI specifically for mobile devices, and even decide in the template which content to display and which not to display on mobile, thus providing optimized performance and user experience for mobile devices.

3. Build PC+ mobile independent site mode, realize a completely isolated display

For websites that consider PC and mobile as almost completely independent but shared content sources, Anqi CMS provides a PC+mobile independent site mode. In this mode, your website will have two different access domains (for examplewww.yourdomain.comFor PC,m.yourdomain.comUsed for mobile), and each loads an independent template.

How to configure:

  1. Template preparation:Similar to the code adaptation mode, you need to create a directory for your main template undermobileSubdirectory, and design independent template files for mobile devices.
  2. System Settings:Log in to the AnQi CMS backend, go to "Global Function Settingshttps://m.yourdomain.com. The system will automatically determine which template to load based on the access domain.
  3. Configuration file:In your main templateconfig.jsonin the file, willtemplate_typeset2.
  4. Domain name resolution and server configuration:This usually requires you to point the mobile domain to your server's IP address at your domain registrar. If your server uses Nginx or Apache and other reverse proxy, you also need to configure the corresponding proxy rules to ensurem.yourdomain.comCan correctly point to the service port of AnQi CMS, and AnQi CMS can identify this domain.

In this mode, although the content on the PC and mobile ends originates from the same content library of Anqi CMS, they can be completely independent in terms of URL, template, and even frontend resources (CSS/JS), providing the greatest flexibility and control.

Content Management Consistency: The Core Advantage of Secure CMS

No matter which display mode you eventually choose, one of the core advantages of Anqi CMS lies in its consistent content management.You only need to publish content once in the background, such as an article or a product, and the Anqi CMS will use the same underlying data model and content data. Whether rendered through PC template, mobile template, or adaptive style, they all point to the same content source.

This means you do not need to maintain multiple sets of content for different terminals, which greatly reduces operational costs and the complexity of content synchronization. You can utilizearchiveDetail/archiveListAny template will automatically handle the required content field, and you just need to focus on the front-end presentation.

Summary

Auto CMS allows you to display powerful content on multiple terminals through these three flexible configuration modes.Whether it is pursuing the simple adaptive design for maintenance, or the need for code adaptation to provide a more unique experience for mobile users, or the requirement for completely independent PC and mobile sites, Anqi CMS can provide perfect support.According to the scale of your website, the characteristics of its content, and the refined requirements for user experience, choosing the most suitable model will help you better reach different user groups on various devices and enhance the overall competitiveness of your website.

Common Questions (FAQ)

Q1: What are the main differences between code adaptation mode and PC+mobile independent site mode?A1: Code adaptation mode (template_type: 1) and PC+mobile independent site mode (template_type: 2）All of them allow you to provide different template files for PC and mobile devices, the key difference lies inDomain. Code adaptation mode is usually inthe same domainThe server determines the device type to switch templates; while the PC+mobile independent site mode usestwo different domains(such aswww.domain.comandm.domain.com)，Even if the content source is the same, the PC or mobile template to be loaded will depend on the visited domain during user access.

Q2: Can I set different configurations (fields) for the content model on PC and mobile端?

Q3: How do I manage CSS, JavaScript, and other static resources on mobile devices if I choose code adaptation or standalone site mode?A3: In these two modes, since you have already createdmobilea subdirectory to store the mobile template files, you can alsomobilecreate a corresponding one inside the directorycss/jsorimagesFolder, place the dedicated static resources for mobile here. Then, in the mobile template,{% system with name="TemplateUrl" %}/mobile/css/style.cssSimilar ways to reference these resources, ensure that the resources on PC and mobile are not interfered with, and achieve better loading performance and management.