In the era when mobile internet occupies a dominant position, ensuring that website content is perfectly displayed on different devices is a core issue that every website operator is very concerned about.AnQiCMS provides an extremely flexible and powerful solution in this aspect, allowing us to easily provide optimized display and interaction experience for users on both PC and mobile platforms.

The key to AnQiCMS's PC and mobile content adaptation lies in its carefully designed template directory structure and flexible website mode selection.This is not just a simple responsive layout, but also a refined control at the level of content presentation logic.

AnQiCMS's adaptation mode overview

AnQiCMS provides three main website adaptation modes to meet the needs of different operation scenarios:

FirstlyAdaptive Template Type.This is the most common responsive design, which automatically adjusts the layout of the website by detecting the user's screen size through a set of HTML code and CSS styles.This pattern has a low maintenance cost and is suitable for websites with relatively unified content structure and low requirements for design differentiation.

ThenCode Compatible Template Type.In this mode, the website's URL remains unchanged, but AnQiCMS will dynamically select different template files to render page content based on the type of device being accessed (PC or mobile).This means that the PC and mobile ends can have completely different layouts, styles, and even some content blocks, without the need to switch URLs.

Finally isPC+手机独立站点模式. As the name implies, this mode allows us to set independent domain names and independent template systems for the PC and mobile ends. For example, the PC end can bewww.example.com, and the mobile end can bem.example.com.AnQiCMS can manage the content of these two websites统一的内容管理，but in the front-end display, they are two independently running entities独立运行的实体。This pattern provides the highest degree of flexibility, allowing us to offer a fully customized experience to PC and mobile users.

核心机制：模板目录结构

AnQiCMS的所有模板文件都集中存放在项目根目录下的English/templateThe folder contains. Each set of templates, such as the default template or a custom template, will have one/templateindependent subfolder under the directory, and contain oneconfig.jsonconfiguration file.

Thisconfig.jsonThe file is a key to AnQiCMS's recognition and application of template patterns. One important field istemplate_typewhich determines the adaptation method of the template:

  • Whentemplate_typeset0means that the template isAdaptivetype.
  • Whentemplate_typeset1means that the template iscode adaptationtype.
  • Whentemplate_typeset2means that the template isPC+手机独立站点type.

通过简单修改这个配置项，我们就可以在不同的适配策略间灵活切换，而无需改动核心代码。

The key to separating content between PC and mobile end:mobileDirectory

AnQiCMS in 'code adaptation' and 'PC+mobile independent site' modes truly realizes the refined distinction of PC and mobile content. Its core mechanism is to create a directory namedmobile.

ThismobileThe catalog, which is equivalent to a "mirror" template folder specifically prepared for mobile devices. Its internal structure is consistent with the template catalog structure of the PC end. For example:

  • If the homepage template for the PC isdefault/index/index.html, then the corresponding mobile homepage template can bedefault/mobile/index/index.html.
  • If the article detail page template for the PC isdefault/article/detail.html, then the corresponding mobile page isdefault/mobile/article/detail.html.
  • Even for custom templates for specific content (such as articles with ID 10)default/article/10.html, mobile end can bedefault/mobile/article/10.html.

When AnQiCMS is in "code adaptation" or "PC + independent mobile site" mode, once the system detects that the access request comes from a mobile device, it will prioritize using the template set currently in use.mobileSearch for the corresponding template file in the directory. If found, it will use the mobile template for rendering; if not found, it will usually try to fallback to the PC template file.

For the "PC+Mobile Independent Site" mode, we can also configure a[en] Global function settingsfor the mobile end[en]Mobile end address(MobileUrl) like thism.example.com. So, when users visitwww.example.comWhen accessing via the PC end address, you see the PC templatem.example.comWhen accessing via the mobile end address, you see the mobile end template. Both are completely independent, but the content source is still managed centrally.

Content Operations Practice and Advantages

This flexible template catalog structure brings significant advantages to content operations:

  1. Unified content management, diverse frontend presentation:All articles, products, single pages, and other content only need to be published and managed once on the AnQiCMS backend, regardless of PC or mobile devices.This means that content creators do not need to repeat labor, greatly improving operational efficiency.The front-end designer can freely design completely different layouts and user experiences based on the characteristics of the device.

  2. Refined adaptation, improving user experience:We can design a lighter, more focused, and easier-to-tap interface for mobile users based on their reading habits, operation methods, and network environment.For example, mobile devices can hide some features that are only displayed on PC, or adopt waterfall, card layout, and other display methods more suitable for small screens.

  3. SEO-friendly and convenient promotion:For the "Code Adaptation" mode, a unified URL structure is beneficial for SEO; for the "PC+Mobile Independent Site" mode, the independent mobile domain can be optimized for SEO through Hreflang tags and other methods, ensuring that search engines can correctly identify and index different versions of pages.AnQiCMS built-in SEO tools can help us better manage these settings.

  4. Highly customizable, meeting personalized needs:In addition to the system default category lists, article details, and other templates, we can also create customized PC and mobile templates for specific categories, articles, or single pages.This flexibility ensures that AnQiCMS can adapt to various complex business scenarios and brand image requirements.

In short, AnQiCMS makes it simple and efficient to adapt content for PC and mobile devices with a set of intuitive template directory structures and flexible configuration options.It gives website operators the ability to manage content uniformly while providing **access experience** for users on different devices.

Common Questions (FAQ)

1. Which adaptation mode should I choose?The choice of mode depends on your website needs and resource investment.

  • If your website content structure is simple, the design differences between PC and mobile are not high, and the budget is limited,Adaptive Mode(template_type: 0）is**a choice, because it has the lowest maintenance cost.
  • If you want a significantly different design and layout for PC and mobile, but also want to keep the URL consistent and have some development resources,Code Adaptation Mode(template_type: 1can provide a good balance.
  • If pursuing the ultimate differentiated experience, it is necessary to set up an independent brand for mobile devices or have special SEO strategies, and be equipped with sufficient development and operation resources,PC+手机独立站点模式(template_type: 2）Will provide the greatest degree of freedom.

2. In the "code adaptation" or "PC+mobile independent site" mode, ifmobileWhat if a template file for a missing page is missing in the directory?In most cases, if AnQi