Next, we will delve into the characteristics, application scenarios, and how to configure and use them in AnQiCMS, hoping to help you find the most suitable display method for your website.

1. Adaptive Mode (Responsive Design)

特点与优势：

  • Unified management, low maintenance cost:Only one template needs to be developed and maintained, greatly reducing the workload of content updates and system maintenance.
  • SEO-friendly:The website content usually has a single URL address, which conforms to the recommended principles of search engines, avoids the problem of duplicate content, and is conducive to the SEO ranking of the website.
  • User experience consistency:Users experience consistent brand image and functionality across different devices, making the experience smoother.

Applicable scenarios:

  • Most small and medium-sized enterprise websites, blogs, information stations, and so on.
  • The content structure is relatively simple, and there is no need to present very different content on different devices.
  • A project that focuses on cost-effectiveness and development efficiency.

Application in AnQiCMS:Enable adaptive mode in AnQiCMS is very direct. You just need to in the template directory.config.jsonin the file, willtemplate_typeField settings set to0English

{
	"name": "我的自适应模板",
	"package": "my-responsive-template",
	"version": "1.0",
	"template_type": 0, // 0表示自适应模式
	"status": 1
}

2. 代码适配模式（Code-Adaptive Design / Dynamic Serving）

特点与优势：

  • More fine-grained control:In comparison to pure adaptability, code adaptation allows for a more customized experience for different devices, such as simplifying some features or content on mobile devices to enhance loading speed and usability.
  • URL consistency:Maintains the advantage of a single URL, avoiding the overhead of 301 redirects and potential SEO issues.
  • Performance optimization:Can provide lightweight code and resources for mobile devices, effectively improving the loading speed of mobile pages.

Applicable scenarios:

  • Websites that have special optimization requirements for mobile user experience but also want to maintain URL consistency.
  • E-commerce website: The PC version may display a large number of product details, while the mobile version focuses more on quick browsing and purchasing process.
  • The logic of content display should be significantly different on various devices for complex applications.

Application in AnQiCMS:When enabling code adaptation mode, you need to create a folder named in the template directory.mobileThis is a subdirectory. ThismobileThe internal structure of the catalog needs to be consistent with your PC template catalog, used to store optimized template files for mobile devices.

Inconfig.jsonin the file, willtemplate_typeField settings set to1。AnQiCMS 在检测到移动设备访问时，便会自动调用 Englishmobilethe corresponding template in the directory.

{
	"name": "我的代码适配模板",
	"package": "my-code-adaptive-template",
	"version": "1.0",
	"template_type": 1, // 1表示代码适配模式
	"status": 1
}

例如，如果您的PC端首页模板是 Englishindex/index.html，那么手机端的首页模板就应该是 Englishmobile/index/index.html.

3. PC+手机端独立站点模式（Separate Mobile Site）

PC+手机端独立站点模式，顾名思义，是为PC端和手机端分别搭建完全独立的网站。它们通常拥有不同的域名（例如 Englishwww.example.comandm.example.com)，even possibly having significant differences in content and function.

特点与优势：

  • Ultimate customization:This pattern provides the greatest flexibility, allowing you to independently design and operate PC and mobile websites to meet their unique business goals and user needs.
  • Targeted optimization:Can be highly customized content and marketing for specific platforms (such as APP downloads limited to mobile, exclusive events).
  • Independent content strategy:The content can be completely different based on the device type, for example, displaying shorter and more direct information on mobile devices.

Applicable scenarios:

  • Large enterprises or brands with sufficient resources to maintain two independent systems.
  • Mobile users' behavior differs greatly from that on PC, requiring a completely different way of presenting products or services.
  • There is a specific mobile marketing strategy or feature requirement that cannot be achieved through the other two modes.

Application in AnQiCMS:It is relatively complex to configure the independent site mode in AnQiCMS, as it involves multi-site management and domain name configuration.

Firstly, you need to prepare a separate template for the mobile end, and place it in the same template directory undermobilethe subdirectory. Inconfig.jsonintemplate_typeField settings set to2.

{
	"name": "我的独立站点模板",
	"package": "my-separate-site-template",
	"version": "1.0",
	"template_type": 2, // 2表示PC+手机端独立站点模式
	"status": 1
}

It is more important that you need to set in the background of AnQiCMS.System Settings -> Global Function Settingsin, set explicitlyMobile End Address (MobileUrl)Enter the independent domain name you have prepared for the mobile端m.example.com. At the same time, you also need to resolve and bind this mobile domain to the server where AnQiCMS is located.

SEO注意事项：As the PC and mobile versions use different URLs, in order to avoid search engines misjudging them as duplicate content and to help them correctly understand the relationship between different versions, you need to use them correctly.canonicalandhreflangTags:

  • canonicalTags:In the mobile page, throughcanonical标签指向对应的PC端页面（如果PC端是主要版本），或者指向移动端自身（如果是移动端优先）。AnQiCMS 提供 English{% tdk with name="CanonicalUrl" %}Labels to help you dynamically generate specification links.
  • hreflangTags:If your website supports multiple languages or is targeted for different regions,hreflang标签明确声明各语言/区域版本之间的关系。AnQiCMS 提供了{% languages websites %}标签来帮助您在模板中添加这些信息。

如何选择最适合您的模式？

Choose which mode, usually requires considering the following factors:

  • Development and maintenance costs:Adaptive is the lowest, code adaptation is the second, and independent site is the highest.
  • Design freedom and user experience customization:Adaptive lowest, code adaptation in the middle,