In the current internet environment, users have become accustomed to browsing websites on various devices. How to ensure that your website presents an effective appearance on different devices is one of the key factors for the success of website operation.AnQiCMS (AnQiCMS) is well-versed in this field, providing flexible and diverse display mode configurations, allowing you to easily switch between adaptive websites, 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 AnQi CMS, the core of controlling the display mode of the website lies in your template folderconfig.jsonfile. This file is like the "brain" of the front end of your website, containing thetemplate_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.jsona file, for example/template/您的模板名称/config.jsonOpen it, and you will see a field similar to this one:

{
	"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, corresponding to the three display modes supported by Anqi CMS:

  • 0: Adaptive mode
  • 1: Code adaptation mode
  • 2: PC+Mobile independent site mode

Understanding this, we can discuss one by one how to configure and make use of these modes.

1. Adaptive mode (template_type: 0)

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

How to configure:Only in your templateconfig.jsonIn the file, willtemplate_typeThe value is set to0Just do it.

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.In the CSS file of the template, you will use@mediaRules to define styles for different screen widths to achieve scaling, repositioning, or hiding of elements. Anqi CMS will directly use this template to render all visits.

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

2. Code Adaptation Mode (template_type: 1)

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

How to configure:In your templateconfig.jsonIn the file, willtemplate_typeThe value is set to1.

Template creation:This is the key to code adaptation mode. Whentemplate_typeis set to1then, you need to create a namedmobile.

  • main template directory (/template/您的模板名称/) to store the default template files for the PC end.
  • mobilesubdirectory (/template/您的模板名称/mobile/) Special adaptation is required when accessed by mobile devicesTemplate segmentorComplete mobile page template.

For example, if you want the mobile home page to be different from the PC home page, you canmobileCreate in the directoryindex/index.html. The system detects mobile device access and will use it preferentially to render the homepage, while the PC end continues to use the main directory undermobile/index/index.htmlto render the homepage, while the PC end continues to use the main directory underindex/index.html. For those who have not beenmobileFind the page corresponding to the template in the directory, the system 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.

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

3. PC+Mobile independent site mode (template_type: 2)

The PC+Mobile independent site mode refers to building two separate websites for PC and mobile endpoints, which usually have different domain names (such aswww.example.comandm.example.com)，and use a completely independent template and content structure.

How to configure:

  1. Templateconfig.json:Please submit your templateconfig.jsonin the file,template_typeThe value is set to2.
  2. Back-end settings:In addition to the template configuration, you also need to make additional settings in the Anqicms background.
    • Log in to the backend and navigate to“Background Settings” -> “Global Feature Settings”.
    • Find“Mobile end address”Field, enter the full domain name of your mobile site here, for examplehttps://m.example.com.
    • Make sure that the domain name of your mobile site is correctly resolved and bound to the AnqiCMS server.

Template creation:Similar to code adaptation mode, you need to create a namedmobile.

  • main template directory (/template/您的模板名称/which will be the complete template for your PC website.
  • mobilesubdirectory (/template/您的模板名称/mobile/Then it needs to includeA complete mobile website template structureincludingindex/index.html/archive/detail.html/category/list.htmlAll template files required for all mobile pages. The system will redirect the user to the corresponding site based on the visiting device and the configured "mobile address".

Application scenarios:When you have extremely strict and differentiated requirements for the user experience on PC and mobile platforms, and even may provide completely different feature modules, the standalone site mode will be your preferred 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 be sure to perform the following operations:

  1. Clear the cache:Log in to the AnQi CMS backend, click on the left menu's 'Update Cache' to ensure that the new configuration takes effect immediately.
  2. Multi-device testing:Use real PC, mobile, and tablet devices, or simulate different devices using the browser's developer tools to thoroughly test the website's display effects and functionality under various conditions.

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

Frequently Asked 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 the content layout is not very different on various devices, it is recommended to chooseAdaptive modeThe maintenance cost is the lowest. If you need to provide completely different interactions or content for mobile devices, but also want to keep the URL unified to optimize SEO, thenCode Adaptation ModeIs a better choice. And if PC and mobile are two completely independent businesses or user groups, they require the greatest degree of customization and performance optimization, and are not concerned about higher maintenance costs and SEO complexity, they can choosePC + Mobile independent site mode.

Q2: After configuring the display mode, why is the front-end style not changing, or why are some pages displaying abnormally? A2:In this situation, first make sure you have clicked "Update Cache" in the Anqi CMS backend.Browser cache may also cause problems, please try clearing the browser cache or accessing in incognito mode.Next, checkconfig.jsonin the filetemplate_typeIs the value correct, and confirm for code adaptation or independent site modemobileDoes the naming and structure of the template files in the directory meet expectations, especially whether the path corresponds to the PC template?If it is a PC+Mobile independent site mode, you also need to check whether the mobile end address is filled in correctly and the domain has been resolved in the background "Global Function Settings".

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