How to ensure that your content is presented in an optimal state across 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 a smooth and friendly experience on the mobile side.AnQiCMS (AnQiCMS) is well-versed in this field, providing us with flexible solutions, especially since it supports three main website modes: responsive, code adaptation, and PC+mobile independent site mode, allowing us to use different templates for PC and mobile platforms according to 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 multi-end experiences:

  1. Responsive ModeThis is the most common type of pattern.The website uses a set of HTML code and a set of CSS styles, adjusts the layout and styles automatically according to the screen size of the device through technologies such as media queries.The advantages are relatively low development and maintenance costs, and unified content management.The drawback is that for complex interactive or significantly different content display requirements, adaptive templates may not be sufficient, and they may also affect the performance of mobile devices due to loading a large amount of non-mobile-end necessary resources.config.jsonof"template_type": 0.

  2. Code Adaptation Mode (Adaptive Code)In this mode, the server will recognize 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 front-end display structure can have significant differences.The 'Code Adaptation' concept of AnQiCMS is more focused on providing independent mobile template directories to achieve this, that is, PC and mobile have their own template files.config.jsonof"template_type": 1.

  3. PC+Mobile Independent Site Mode (PC+Mobile Separate Sites)This is the most thorough way to achieve complete differentiation in displaying templates on PC and mobile devices. It means that your website will have two independent templates, and even two independent domain names can be bound (for examplewww.yourdomain.comFor PC,m.yourdomain.comUsed for movement).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 for both PC and mobile end.config.jsonof"template_type": 2.

Implement the core steps for differentiated template display between PC and mobile endpoints

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

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

Each AnQiCMS template contains one 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, and change the one in thetemplate_typeField settings set 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_typeset2After that, AnQiCMS will know that when the user accesses through a mobile device, it should try to load the exclusive template for mobile devices.

Step 2: Prepare the exclusive template directory for mobile devices.

This is the core of achieving differentiated display. Inside your template folder, you need to create a file namedmobileThis is a subdirectory. ThismobileThe directory 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 catalog usually maintains consistency with the PC template's directory structure. This means that if there is a PC-side template,index.htmlthen there should also be one on the mobile sidemobile/index.htmlSimilarly, pages like article list, detail page, and single page can be created in the directory.mobileCreate the corresponding files 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 priority when detecting access from a mobile devicemobilethe corresponding template file under the directory. IfmobileThe 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 mobile (for examplem.yourdomain.com) you need to configure it in the AnQiCMS backend.

Enter the AnQiCMS backend, navigate to "Backend Settings" -> "Global Function Settings".Here you can find the "MobileUrl" field.https://m.yourdomain.com.

Please 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. Only when users access through this mobile domain, AnQiCMS will base its configurationtemplate_type: 2automobiledirectory.

auto

automobileCreated and maintained your exclusive mobile template files under the directory. You can use various template tags provided by AnQiCMS (such asarchiveList/categoryDetail/systemUsing (etc.) to get and display data, and to design layout and style according to the characteristics of mobile devices.

This separated development method provides you with great freedom:

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

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 in 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 HTML headers in 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:Despite the differentiated display of templates, AnQiCMS's flexible content model allows for easy sharing of the same content data between PC and mobile devices, avoiding the hassle of duplicate content publishing.You only need to manage the content once, and you can call it as needed in different templates.

Through the above steps and considerations, AnQiCMS allows website operators to easily provide customized website experiences for users of different terminals,