The AnQi Content Management System (AnQiCMS) provides powerful flexibility in content presentation, especially for the display effect on different devices.It supports three template modes of "adaptiveUnderstanding the working principle of these patterns is crucial for ensuring user experience and optimizing website performance.

First, let's understandAdaptive Mode.In adaptive mode, the website uses a set of templates and styles, utilizing CSS media queries (Media Queries) and other technologies to automatically adjust the layout of the web page according to the screen size of the user's device.This means that no matter whether the user is using a wide-screen monitor, laptop, or phone, they are accessing the same URL and seeing the same set of content structure.AnQiCMS supports template development in this way, making it possible for us to use a single codebase to respond to all devices.The advantages of this pattern are evident: the maintenance cost is low because only one piece of code needs to be managed; it is friendly to search engines because it has only one URL, avoiding potential duplicate content issues.However, the challenge lies in the fact that some complex elements or large images on the desktop may still be loaded on mobile devices, even though they will eventually be hidden or resized, which may affect the loading speed and performance of the mobile end.Design needs to pay special attention to resource optimization to ensure a smooth experience on any device.

ThenCode Adaptation Mode.The code adaptation mode is more intelligent.In this mode, AnQiCMS will recognize the type of the user's device (such as through User-Agent), and then provide different template files based on the device type.This means that, although the user is accessing the same URL, the server will decide and send a specially designed template for mobile users and a template designed for PC users to PC users.mobile/To implement subdirectory. When the system detects a mobile device, it will load it firstmobile/The template files under the directory are used to render the page.The advantage of this pattern is that it can provide a highly optimized user experience for different devices.Mobile users will not load irrelevant JS and CSS for the desktop version, and the content layout can also be completely reorganized to suit the characteristics of mobile devices, thereby bringing faster loading speed and better visual effects.But relatively, the maintenance cost will increase because we need to prepare two (or more) different template structures for the same content.config.jsonIn, you can set"template_type": 1to enable code adaptation mode.

Finally isPC+Mobile Site Mode Independent Mode。 This is the most thorough separation scheme, which provides a completely independent website for PC and mobile devices, usually distinguished by different domain names or subdomains (for examplewww.example.comandm.example.comcanonicalTags andhreflangLabels, as well as setting up 301 redirects to avoid search engines treating it as duplicate content. In the system settings of AnQiCMS, we can configure the 'mobile end address' in conjunction with the template configuration fileconfig.jsonof"template_type": 2Enable this mode.

In summary, the core of these three modes lies in how to affect the display of content on different devices: Adaptive mode achieves flexible scaling of content layout through style adjustments; Code adaptation mode provides different templates under the same URL according to the device, realizing deeper optimization; While the PC + mobile terminal independent site mode directly separates the PC and mobile sites, providing ultimate customization control.AnQiCMS provides the ability to choose the most suitable multi-device content display solution for your website through its flexible template engine and backend configuration.

Common Questions (FAQ)

  1. Question: I have selected the adaptive mode, but the images on the mobile phone still load slowly. What should I do? Answer:In adaptive mode, although the layout adapts to the screen, the original image may still be optimized for desktop sizes, resulting in slow loading on mobile devices. You can try the following optimizations:

    • Image Compression:In AnQiCMS backend content settings, enable 'Whether to automatically compress large images' and 'Whether to start Webp image format', which can effectively reduce the size of image files.
    • Responsive image:Used in the templatesrcsetproperties or<picture>Tags, load different sized images according to the device screen size.
    • Lazy Load:Only load when the image enters the user's viewport, which can be done in the AnQiCMS templatelazy="data-src"等方式实现，详情可参考“文档详情标签”的Content字段说明。

  2. 问：代码适配模式下，我需要为手机版重新写所有内容吗？ Answer:In most cases, you do not need to rewrite content for the mobile version. The code adaptation mode of AnQiCMS is mainly through switchingTemplateThis means that the core content data of articles, products, etc. is shared, and you only need tomobile/Create a set of mobile-specific templates under the directory that is different from the desktop template structure but calls the same content.This ensures consistency of content while also providing an optimized display for mobile devices.If you want to simplify or differentiate the content on the mobile phone, you can also display or hide certain content blocks through logical judgment at the template level.

  3. Ask: What are the main differences between the independent mode and the code adaptation mode on the PC and mobile phone端? Answer:The main differences between the two lie in the implementation method and resource independence:

    • Domain name and site:PC+手机端独立模式使用完全独立的域名（如www.example.comandm.example.com)，in AnQiCMS it usually needs to be set as two separate sites.The code adaptation mode is to switch to different template files under the same domain through AnQiCMS device detection.
    • 资源与内容：
    • 复杂性与控制：Independent mode offers the highest level of customization and control, but it also comes with higher maintenance costs and SEO configuration (such ascanonicalandhreflangThe complexity is also the highest. Code adaptation patterns simplify maintenance and SEO work while maintaining a certain degree of control.