How to implement different templates for displaying websites on PC and mobile endpoints?

How to ensure that your content is presented in a **status** on different devices is a crucial issue in website operation.With the popularity of mobile devices, the change in user habits requires that websites not only perform well on the PC side, but also provide smooth and friendly experiences on mobile devices.AnQiCMS (AnQiCMS) deeply understands this, providing us with flexible solutions, especially as it supports three main website modes: adaptive, code adaptation, and PC + mobile independent site mode, allowing us to choose different templates for PC and mobile end based on specific needs.

Understanding the website display mode of Anqi CMS

Before delving into how to implement differentiated templates, we first need to understand the three website modes provided by AnQiCMS, which are the foundation for building a multi-end experience:

1. Adaptive Mode (Responsive)This is the most common pattern. Websites use a set of HTML code and a set of CSS styles, adjusting the layout and style automatically according to the screen size of the device using technologies such as media queries (Media Queries).The advantages are that the development and maintenance costs are relatively low, and content management is unified.But the disadvantage is that for complex interaction or content display with significant differences, adaptive templates may seem inadequate, and sometimes it may affect the performance of the mobile end due to the loading of a large number of non-mobile end necessary resources.In AnQiCMS, this mode corresponds to the template configuration fileconfig.jsonof"template_type": 0.

2. Code Adaptation Mode (Adaptive Code)In this mode, the server will identify the user's device type (such as through User-Agent), and then render different HTML code or load different resources based on the device type.Although the core logic may be consistent, the structure of the front-end display can be significantly different.The AnQiCMS 'code adaptation' concept focuses more on implementing it through providing an independent mobile end template directory, that is, PC and mobile end have their own template files.This pattern corresponds toconfig.jsonof"template_type": 1.

3. PC+Mobile Independent Sites Mode (PC+Mobile Separate Sites)This is the most thorough way to achieve complete differentiation in the display of PC and mobile templates. It means that your website will have two independent templates, and even two independent domain names can be bound (such aswww.yourdomain.comused for PC,m.yourdomain.comUsed for mobile). In this mode, you can carefully design the most suitable user experience for each platform, achieving the maximum freedom in design, content presentation, and interaction logic on both PC and mobile terminals.In AnQiCMS, this mode corresponds toconfig.jsonof"template_type": 2.

The core steps to implement differentiated template display between PC and mobile terminals

To implement different templates for PC and mobile end in AnQiCMS, especially for the PC + mobile independent site mode, you can follow the following steps:

Step 1: Select the appropriate mode in the template configuration file

Each AnQiCMS template contains a certain file in its root directoryconfig.jsonfile, this file defines the basic information and operation mode of the template. To enable differentiated template display for PC and mobile end, you need to edit the template you are using.config.jsonFile, containing thetemplate_typefield to2.

For example, yourconfig.jsonmight look like this:

{
	"name": "我的定制模板",
	"package": "my_custom_template",
	"version": "1.0",
	"description": "为PC和移动端提供独立模板的站点",
	"author": "AnQiCMS User",
	"homepage": "https://www.yourdomain.com",
	"created": "2023-01-01 00:00:00",
	"template_type": 2,  // 关键设置：选择PC+手机独立模板模式
	"status": 1
}

totemplate_typeis set to2After, AnQiCMS will know that when the user accesses through a mobile device, it should try to load the exclusive mobile template.

Step 2: Prepare the exclusive template directory for mobile

This is the core of achieving differentiated display. Inside your template folder, you need to create a namedmobilein your template folder. Thismobiledirectory will store all template files for mobile device display.

For example, if your PC template file is located/template/my_custom_template/then your mobile template file should be placed/template/my_custom_template/mobile/.

It is worth noting that,mobileThe file structure under the directory usually remains consistent with the PC template directory structure. This means that if there is one on the PCindex.htmlused for the homepage, then the mobile end should also have onemobile/index.htmlSimilarly, pages like article list, detail page, single page, etc., can be created inmobilethe corresponding file under the directory.

For example:

• PC Home Page:/template/my_custom_template/index.html
• Mobile Home Page:/template/my_custom_template/mobile/index.html
• PC Article List Page:/template/my_custom_template/archive/list.html
• Mobile article list page:/template/my_custom_template/mobile/archive/list.html

In this way, AnQiCMS will automatically load the corresponding template file under the directory when detecting access from a mobile devicemobileIfmobileThe template for the specific page was not found in the directory, it will fallback to loading the corresponding PC template.

Step 3: Bind the mobile domain in the system settings (optional, but recommended)

If you choose the PC + mobile independent site mode and want to use a separate domain for the mobile end (for examplem.yourdomain.com), you need to configure it in the AnQiCMS backend.

Enter the AnQiCMS backend, navigate to 'Backend Settings' -> 'Global Function Settings'.Find the field 'MobileUrl' (Mobile address) here.Enter the domain name you have prepared for mobile, for examplehttps://m.yourdomain.com.

Make sure that this mobile domain has been correctly resolved to your server, and the Web server (such as Nginx, Apache) has also been configured with the corresponding domain binding. AnQiCMS will only work according to your configuration when users access through this mobile domain.template_type: 2LoadmobileThe template under the directory.

Step 4: Maintain and update the template file

Once set up, you can develop the PC template likemobileCreated and maintained your exclusive mobile template files under the directory. You can use various template tags provided by AnQiCMS (such asarchiveList/categoryDetail/systemWait to get and display data, and design the layout and style according to the characteristics of mobile devices.

This separated development approach provides you with a great degree of freedom:

• Design freedom:The mobile template can completely free itself from the constraints of the PC端, adopting a layout, navigation, and interaction mode more suitable for small screens.
• Performance optimization:Mobile templates can only load the necessary resources, avoiding redundant code and images on the PC side from affecting the performance of the mobile side.
• Content optimization:Even content can be prioritized or simplified in mobile templates based on the habits of mobile users.

Optimization and注意事项

• Testing is crucial:No matter which mode you choose, be sure to thoroughly test on a variety of real mobile devices and browsers to ensure compatibility and smoothness of display and interaction.
• SEO friendly:If you use separate PC and mobile domain names, it is recommended to use SEO tools or tags (such as those in the HTML header of the<link rel="canonical">and<link rel="alternate">)Make it clear to the search engine the relationship between these two pages, helping the search engine better understand and index your content.
• Unified content management:Although the template shows differentiation, the flexible content model of AnQiCMS allows PC and mobile devices to easily share the same content data, avoiding the trouble of duplicate content publication.You only need to manage the content once, and you can call it as needed in different templates.

By following these steps and considerations, AnQiCMS allows website operators to easily provide customized website experiences for different terminal users,