So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to choose and apply the adaptive, code adaptation, PC+mobile terminal template mode supported by AnQiCMS?

Calendar 👁️ 68

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,

Related articles

What are the specific conventions for naming template files and directory structures when creating templates in AnQiCMS?

AnQiCMS is a content management system renowned for its efficiency and flexibility, also has a clear set of conventions in template design, aiming to help developers and operators build websites with clear structures and easy maintenance.Understanding these conventions is a key step to efficiently using AnQiCMS for website customization and content display. ### Core conventions of template files The template files of AnQiCMS use the `.html` extension as the suffix.This convention makes the file type clear at a glance and also helps the editor with syntax highlighting and intelligent hints

2025-11-07

How does the modular design of AnQiCMS support personalized customization and secondary development requirements?

The choice of a content management system (CMS) focuses on flexibility and scalability, which is a core concern for many businesses and individual users.AnQiCMS (AnQiCMS) stands out with its unique modular design, demonstrating significant advantages in supporting personalized customization and secondary development, allowing users to create powerful and distinctive websites according to their own needs. ### The Foundation of Modular Design: The Elasticity of Core Architecture Anqi CMS is developed in Go language, which choice itself brings high performance and high concurrency advantages to the system. It is more important

2025-11-07

How to ensure the stability and smoothness of the AnQiCMS website under high concurrent access volume?

When your AnQiCMS website starts to grow rapidly in traffic, even facing the challenge of high concurrency, how to ensure that it can still run stably and respond smoothly is a concern for every operator.As AnQiCMS was well thought out from the start, combined with its underlying technical advantages and some clever operational strategies, we can build a website as solid as a rock.One of the core strengths of AnQiCMS is that it is developed using the Go language.Go language is renowned for its excellent concurrent processing capabilities

2025-11-07

How does AnQiCMS's scheduled publishing feature help the operations team achieve automated content publishing?

In today's fast-paced digital world, the content marketing campaign never stops.Whether it is a corporate website, a self-media platform, or a multi-site matrix, keeping the content timely updated and continuously published is the key to attracting users and enhancing brand influence.However, manual operations often come with inefficiency, prone to errors, and difficult to catch the pain points of **publishing timing.Against this backdrop, the time-release publishing function of AnQiCMS emerged, bringing new possibilities for automated content publishing to the operation team, greatly enhancing the flexibility and efficiency of content operation.Imagine that you no longer need to stare at the clock

2025-11-07

How to dynamically display data using Django-style tags and variables in AnQiCMS templates?

AnQiCMS provides a flexible and powerful template system, which adopts a syntax style similar to the Django template engine, making experienced developers able to get started quickly, and it is also very intuitive, even users who are not familiar with template language can dynamically present website content through simple learning.This system, with its concise labels and variable usage, makes data interaction with the front-end page efficient and easy to manage.To fully utilize the AnQiCMS template for dynamic data display, we need to understand its core syntax structure: variables, tags, and filters

2025-11-07

How to precisely filter and display a document list with specific categories, models, or recommended attributes using the `archiveList` tag?

In AnQi CMS, the `archiveList` tag is the core tool for building dynamic content lists, allowing you to flexibly extract and display the content you want from the website's document library.Whether it is to display the latest articles under a specific category, or popular products under a certain content model, or special document topics with specific recommendation attributes, `archiveList` can help you accurately meet these needs through its rich parameter configuration.### Accurately locate content: Classification, Model and Recommendation Attributes First

2025-11-07

How to retrieve the title, content, image, and custom fields of a specific document using the `archiveDetail` tag?

How to use the `archiveDetail` tag in AnQiCMS to finely control the display of document content?AnQiCMS as an efficient and flexible content management system, one of its core advantages lies in its powerful content display capabilities.For each independent article, product detail, or any other 'document' type of content on the website, we hope to fine-tune their display methods on the front page.This is the place where the `archiveDetail` tag really shines.

2025-11-07

How to implement hierarchical display and nested calling of the `categoryList` tag?

Building a clear and organized website navigation in AnQiCMS is crucial for improving user experience and website accessibility, especially when dealing with multi-level categories.The `categoryList` tag was created for this purpose, providing powerful features to help us flexibly display the hierarchical structure of categories and make fine-grained nested calls.

2025-11-07