In the current internet environment, users have become accustomed to browsing websites on various devices. How to make your website present a **good effect** on different devices is one of the key factors for the success of website operation.AnQiCMS (AnQiCMS) is well-versed in this, providing flexible and diverse display mode configurations, allowing you to easily switch between adaptive, code adaptation, or PC+Mobile independent sites according to your actual needs.

This article will detail how to configure these display modes in Anqi CMS, ensuring that your content shines on any screen.

Core Configuration:config.jsonoftemplate_type

In the Anqi CMS, the core of controlling the website display mode lies in your template folder.config.jsonThis file is like the 'brain' of your website's frontend, containing the.template_typeThe field is responsible for telling the system how to render your page.

You can find it in the root directory of the template you are using.config.jsonFor example, files,/template/您的模板名称/config.jsonOpen it, and you will see a field similar to this:

{
	"name": "默认模板",
	"package": "default",
	"version": "1.0",
	"description": "系统默认模板",
	"author": "kandaoni.com",
	"homepage": "https://www.kandaoni.com",
	"created": "2022-05-10 22:29:00",
	"template_type": 0, // 这里的数值是关键
	"status": 0
}

template_typeThe field accepts three different values, each corresponding to one of the three display modes supported by the AnQi CMS:

  • 0: Adaptive mode
  • 1: Code adaptation mode
  • 2: PC+Mobile独立站点模式

了解了这一点，我们就可以逐一探讨如何配置和利用这些模式了。

1. 自适应模式（English）template_type: 0)

Adaptive mode is the most common type of website design currently.It adjusts the website content and layout automatically according to the screen size and orientation of the access device through a unified HTML structure and CSS media queries.

How to configure:Only in your templateconfig.jsonin the file, willtemplate_typeto the value of0.

Template creation:In this mode, you only need to design a set of template files.All pages (such as the homepage, article detail page, category list page, etc.) use this template.@mediaDefine styles for different screen widths to achieve scaling, rearrangement, or hiding of elements. Anqi CMS will directly use this template to render all visits.

Applicable scenarios:If you want to maintain all device displays with a single code and have experience with modern web design, adaptive mode is the ideal choice.It has a relatively low maintenance cost and can provide better SEO effects because all devices access the same URL.

2. 代码适配模式（English）template_type: 1)

The code adaptation mode, sometimes also known as the 'server-side component adaptation' of responsive websites, allows the website to dynamically select and provide different HTML fragments or template files on the server based on the type of device accessed by the user, but all devices still go throughThe same URLAccess. This means that the content seen on the PC and mobile end may be different, but the URL remains consistent.

How to configure:In your templateconfig.jsonin the file, willtemplate_typeto the value of1.

Template creation:This is the key to code adaptation mode. Whentemplate_typeset1you need to create a directory namedmobile.

  • Main template directory (/template/您的模板名称/) to store the default template files for the PC end.
  • mobileSubdirectory (/template/您的模板名称/mobile/) Store mobile devices that require special adaptation for accessTemplate fragmentorComplete mobile page template.

For example, if you want the mobile home page to be different from the PC home page, you canmobiledirectory createindex/index.html. The system detects mobile device access and will prioritize usingmobile/index/index.htmlto render the homepage, while the PC end continues to use the main directory underindex/index.html. For those who have not beenmobileThe page corresponding to the template found in the directory will automatically revert to using the template in the main directory.This design allows you to optimize for mobile devices more finely without changing the URL.

Applicable scenarios:When you need to provide a completely different user experience or content structure on different devices, but also want to maintain a unified URL and optimize SEO, code adaptation mode is a good choice.For example, mobile devices may require simpler navigation and operations, while PC terminals can display more complex information.

3. PC+Mobile独立站点模式（English）template_type: 2)

PC+Mobile independent site mode refers to setting up two separate websites for PC and mobile platforms, which usually have different domain names (for example,www.example.comandm.example.com），and use an entirely independent template and content structure.

How to configure:

  1. Templateconfig.json:Enter your templateconfig.jsonin the file,template_typeto the value of2.
  2. Backend settings:In addition to the template configuration, you also need to make additional settings in the Anqi CMS backend.
    • Log in to the backend, navigate to“Background Settings” -> “Global Function Settings”.
    • Findthe option of 'Mobile End Address'Field, enter the full domain name of your mobile site here, for examplehttps://m.example.com.
    • Please make sure that your mobile site domain has been correctly resolved and bound to the server of Anqi CMS.

Template creation:Similar to code matching mode, you need to create a directory named under the main template directory.mobile.

  • Main template directory (/template/您的模板名称/) Will be the complete template for your PC website.
  • mobileSubdirectory (/template/您的模板名称/mobile/) Will need to include.Complete mobile website template structure.includingindex/index.html/archive/detail.html/category/list.htmlAll template files required for all mobile end pages. The system will redirect users to the corresponding site according to the access device and the configured "mobile end address."

Applicable scenarios:When you have extremely strict and differentiated requirements for the user experience on PC and mobile platforms, and even provide completely different feature modules, the standalone site mode would be your first choice.It allows the greatest design freedom and performance optimization space, but relatively speaking, the maintenance cost and SEO optimization complexity will also be higher.

Tips after deployment

No matter which mode you choose, after completing the configuration, please make sure to perform the following operations:

  1. Clear cache:Log in to the CMS backend, click the "Update Cache" option on the left menu to ensure that the new configuration takes effect immediately.
  2. Multi-device testing:Using real PC, mobile, and tablet devices, or leveraging the developer tools in browsers to simulate different devices, comprehensively test the display effect and functionality of the website in various situations.

These flexible display modes of AnQi CMS are designed to help you manage and distribute content more efficiently, ensuring that users on any device can enjoy a high-quality access experience.Choose the mode that best suits your business needs and embark on your content operation journey!

Common Questions (FAQ)

Q1: How should I choose the display mode suitable for my website? A1:This mainly depends on your design and maintenance strategy. If your budget is limited and there are not many differences in content layout on different devices, it is recommended to chooseAdaptive ModeEnglish maintenance cost is the lowest. If you need to provide completely different interactions or content for mobile devices while keeping the URL uniform to optimize SEO, thenCode Adaptation Modeis a better choice. And if PC and mobile end are two completely independent businesses or user groups, it is necessary to maximize customization and performance optimization, and there is no problem with higher maintenance costs and SEO complexity, you can choosePC+Mobile independent site mode.

Q2: What should I do if the front-end style does not change after configuring the display mode, or if some pages display abnormally? A2:Encounter this situation, first make sure you have clicked 'Update Cache' in the AnQi CMS backend.The browser cache may also cause problems, please try clearing the browser cache or accessing in incognito mode.config.jsonin the filetemplate_typeIs the value correct, and for code adaptation or independent site mode, confirmmobileDoes the template file name and structure under the directory meet the expectation, especially whether the path corresponds to the PC-side template.If it is a PC+Mobile independent site mode, you need to check whether the 'Mobile End Address' in the 'Global Function Settings' backend is filled in correctly and the domain has been resolved.

Q3: What are the differences between code adaptation mode and PC+Mobile independent site mode?mobileWhat are the differences between the directory? A3:Two modes