How to ensure that the content is presented elegantly and efficiently on various devices when building and operating a website is a challenge that every operator needs to face.AnQiCMS as a rich-featured enterprise-level content management system, fully considers this point, provides adaptive, code adaptation, and three flexible template modes of independent stations for PC and mobile phones, allowing us to make choices according to actual needs.

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

1. Adaptive Mode (Responsive Design)

The adaptive mode is the most common and recommended way. It refers to a website using a set of codes and templates to adapt to different screen sizes of devices.No matter whether the user accesses the website via computer, tablet, or smartphone, the content and layout of the website will automatically adjust to the size of the device's screen to provide an **reading and interactive experience.

Features and Advantages:

  • 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 duplicate content issues, and is beneficial to the SEO ranking of the website.
  • User experience is consistent:When users switch between different devices, the brand image and functionality of the website remain consistent, providing a smoother experience.

Application scenarios:

  • Most small and medium-sized enterprise websites, blogs, information stations, and so on.
  • The content structure is relatively simple, 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:Enabling adaptive mode in AnQiCMS is very straightforward. You just need to do it in the template directory under theconfig.jsonIn the file, willtemplate_typefield to0It will automatically use the template you provide, and it is expected to adapt to various screens through CSS media queries and other technologies.

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

2. Code-Adaptive Design (Dynamic Serving)

The code adaptation mode is between adaptive and standalone sites. It also uses a single URL address, but on the server side, it sends different HTML, CSS code, or content to different devices based on the detected user device type (such as through the User-Agent).This means that, although the URL remains unchanged, mobile users and PC users may see completely different page structures.

Features and Advantages:

  • Fine control:Compared to pure adaptation, code adaptation allows you to provide a more customized experience for different devices, such as simplifying some features or content on mobile phones to improve 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:Provide lighter code and resources for mobile devices, effectively improving the loading speed of mobile web pages.

Application scenarios:

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

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

Inconfig.jsonIn the file, willtemplate_typefield to1. AnQiCMS will automatically call when detecting mobile device accessmobileThe corresponding template under the directory.

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

For example, if your PC home page template isindex/index.htmlthen the mobile home page template should bemobile/index/index.html.

3. PC+Mobile Site Separate Mode

The PC+mobile independent site mode, as the name implies, is to build completely independent websites for PC and mobile terminals. They usually have different domain names (such aswww.example.comandm.example.com), even possibly in content and function.

Features and Advantages:

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

Application scenarios:

  • Large enterprises or brands have sufficient resources to maintain two independent systems.
  • Mobile users' behavior differs greatly from that of PC users, requiring a completely different way of presenting products or services.
  • There is a specific mobile marketing strategy or functional 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 configuration.

First, you need to prepare a separate template for the mobile end, and place it in the template directory as well.mobilein the subdirectory.config.jsonin, willtemplate_typefield 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 be in the AnQiCMS backendSystem settings -> Global function settingsIn it, set clearlyMobile end address (MobileUrl)Enter the independent domain name you have prepared for the mobile version, for examplem.example.com. You also need to resolve and bind this mobile domain to the server where AnQiCMS is located.

SEO notes:Due to the use of different URLs on PCs and mobile devices, in order to avoid search engines mistakenly identifying duplicate content and to help them correctly understand the relationship between different versions, you need to use it correctlycanonicalandhreflangTags:

  • canonicalTags:In the mobile page, throughcanonicalThe label points to the corresponding PC page (if the PC version is the main version), or to the mobile end itself (if the mobile end is prioritized). AnQiCMS provides{% tdk with name="CanonicalUrl" %}Labels to help you dynamically generate specification links.
  • hreflangTags:If your website supports multiple languages or is targeted at different regions, you can usehreflangTags explicitly declare the relationship between various language/region versions. AnQiCMS provides{% languages websites %}tags to help you add this information in your template

How do you choose the most suitable mode for you?

Choose which mode, usually requiring a balance of several factors:

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