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

The key to AnQiCMS achieving 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 offers three main website adaptation modes to meet the needs of different operational scenarios:

FirstlyAdaptive template type. This is the most common responsive design, which automatically adjusts the layout of the website according to the user's screen size using a set of HTML code and CSS styles.This pattern has low maintenance costs and is suitable for websites with relatively uniform content structure and low requirements for design differentiation.

Next isCode adaptation template typeIn this mode, the website URL remains unchanged, but AnQiCMS dynamically selects different template files to render page content according to the type of device accessing (PC or mobile).This means that the PC and mobile ends can have completely different layouts, styles, and even some content blocks, without the user needing to switch URLs.

Finally isPC + mobile independent site modeThis pattern, as the name implies, 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 types of sites uniformly, but on the front-end display, they are two independent running entities.This mode provides the highest degree of flexibility, allowing us to provide a fully customized experience for PC and mobile users.

Core Mechanism: Template Directory Structure

All template files of AnQiCMS are stored in the root directory of the project./templateIn the folder. Each set of templates, such as the default template or a custom template, will be in this/templatedirectory has an independent subfolder, and it contains oneconfig.jsonConfiguration file.

Thisconfig.jsonThe file is the key to AnQiCMS recognizing and applying template modes. One important field istemplate_typewhich determines the adaptation method of the template:

  • Whentemplate_typeis set to0means that the template isAdaptiveType.
  • Whentemplate_typeis set to1means that the template isCode AdaptationType.
  • Whentemplate_typeis set to2means that the template isPC+Mobile Independent SiteType.

By simply modifying this configuration item, we can flexibly switch between different adaptation strategies without changing the core code.

The key to achieving content separation between PC and mobile endpoints:mobileTable of contents

AnQiCMS truly achieves fine-grained distinction of PC and mobile content in the "code adaptation" and "PC+mobile independent site" modes. The core mechanism is to create a directory namedmobile.

ThismobileThe directory is equivalent to a 'mirror' template folder specifically prepared for mobile devices. Its internal structure is consistent with the template directory structure of the PC. For example:

  • If the PC homepage template isdefault/index/index.htmlthen the corresponding mobile homepage template can bedefault/mobile/index/index.html.
  • If the PC article detail page template isdefault/article/detail.htmlthen the corresponding mobile page isdefault/mobile/article/detail.html.
  • Even a custom template for specific content (such as an article with ID 10) may be available on the PCdefault/article/10.htmland on mobile it can bedefault/mobile/article/10.html.

When AnQiCMS is in 'code adaptation' or 'PC + mobile independent site' mode, once the system detects that the access request comes from a mobile device, it will prioritize the template set currently in use under themobileSearch for the corresponding template file in the directory. If found, render it using the mobile template; 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 in the background'sGlobal feature settingsIn it, we can configure a special one for the mobile endMobile end address(MobileUrl), for examplem.example.com. In this way, when users visitwww.example.comWhen accessing via the PC end address, you will see the PC templatem.example.comWhen accessing via the mobile end address, you will see the mobile template. Both are completely independent, but the content source is still managed uniformly.

Content Operations: Practices and Advantages

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

  1. Unified content management, diverse frontend presentation:Whether it is on PC or mobile, all articles, products, single pages and other content only need to be published and managed once on the AnQiCMS background.This means that content creators do not need to repeat their labor, greatly improving operational efficiency.While front-end designers can freely design completely different layouts and user experiences based on device features.

  2. Refined adaptation, enhancing user experience:We can design a lighter, more focused, and easier-to-tap interface for mobile users' reading habits, operation methods, and network environment.For example, the mobile end can hide some feature modules that are only displayed on the PC end, or use waterfall, card layout, and other display methods more suitable for small screens.

  3. SEO-friendly and easy to promote: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 to ensure that search engines can correctly identify and index different versions of the pages.The SEO tool built into AnQiCMS can help us better manage these settings.

  4. Highly customizable, meeting individual needs:In addition to the default category list, article details, and other templates provided by the system, 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 needs.

In summary, AnQiCMS simplifies and makes efficient the content adaptation for PC and mobile terminals with a set of intuitive template directory structures and flexible configuration options.It empowers website operators to manage content uniformly while providing access experience for users on different devices.

Frequently Asked Questions (FAQ)

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

  • If your website content structure is simple, the design differences between PC and mobile end are not high, and the budget is limited,Adaptive mode(template_type: 0) is the choice because it has the lowest maintenance cost.
  • If you want to have significantly different designs and layouts for PCs and mobile devices, but also want to keep the URL consistent and have some development resources,Code Adaptation Mode(template_type: 1) Can provide a good balance.
  • If you pursue the ultimate differentiated experience, you need to set up an independent brand for mobile or have a special SEO strategy, and have sufficient development and operation resources,PC + mobile independent site mode(template_type: 2Will 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