How to configure Anqi CMS to support responsive design or independent mobile content display?

In the era of co-existing multiple devices, websites can adapt well to various screen sizes, whether it is PC, tablet, or smartphone, has become a basic requirement.AnQiCMS (AnQiCMS) understands this and provides a variety of flexible configuration options to help you easily implement responsive design or independent mobile content display, ensuring that your content provides a high-quality browsing experience on any device.

The Anqi CMS provides three main website modes to support multi-terminal display: adaptive, code adaptation, and independent PC + mobile sites.Each pattern has its unique application scenarios and configuration methods, next, we will delve into them one by one.

1. Use adaptive mode, one design goes all the way

(Responsive Design) is the most common and easiest multi-terminal display solution currently.It refers to a website using a set of HTML structure and CSS styles, through technologies such as media queries (Media Queries), automatically adjusts layout, image size, and text formatting according to the screen size and resolution of the user's device, to adapt to different display environments.

How to configure:

Enabling adaptive mode in Anqi CMS is very straightforward. You usually just need to find the/template/defaultfolder you are currently using as a template (for exampleconfig.jsonfile, find thetemplate_typefield, and set its value to0This means that the system will default your template to be adaptive, so all devices will load the same template file.

The advantage of this model lies in the low maintenance cost, as content only needs to be published once, and the system will automatically adjust the display according to CSS. For most small and medium-sized enterprises and self-media, it is an efficient and practical choice.

2. Utilize code adaptation mode to finely control the mobile experience

If your website has higher customization needs for mobile, or there are significant differences in content display logic and interaction between PC and mobile, responsive design may not fully meet the needs.At this point, the Code Adaptive mode of AnQi CMS is very useful.

The core of code adaptation mode lies in the ability of Anqi CMS to intelligently judge the type of user's access device and then provide for PC and mobile terminalsdifferent HTML template filesBut they share the same backend data. For example, the PC end may display a richer information stream, while the mobile end focuses on core functions and concise navigation.

How to configure:

To enable code adaptation mode, first you need to create a subdirectory named in your template directory.mobileFor example, if your main template is in./template/defaultThen the mobile template is placed in./template/default/mobile.

Continue, you need toconfig.jsonin the file, settemplate_typeis set to1.

When the user visits your website:

• If the system detects it is a PC device, it will load the main template folder (for example/template/default) the corresponding file.
• If the system detects a mobile device, it will automatically switch to/template/default/mobilethe corresponding template file in the directory. For example, the homepage for the PC is/template/default/index/index.htmland the mobile will automatically search for/template/default/mobile/index/index.html.

This means you can design a layout and UI specifically for mobile devices, and even decide in the template which content is displayed on mobile devices and which is not, thereby providing optimized mobile performance and user experience.

Build a PC + mobile independent site model to achieve a completely isolated display

For those who need to treat PC and mobile as two almost completely independent but shared content sources, Anqi CMS provides a PC+mobile independent site mode. In this mode, your website will have two different access domains (such aswww.yourdomain.comused for PC,m.yourdomain.comFor mobile, and each loads an independent template.

How to configure:

1. Template preparation:Similar to code adaptation mode, you need to create one in your main template directory.mobileSubdirectory, and design independent template files for mobile devices.
2. System Settings:Log in to the AnQi CMS backend, go to 'Global Function Settings', find the 'Mobile End Address' field. Here, you need to fill in your mobile domain name, for examplehttps://m.yourdomain.com. The system will automatically determine which template to load based on the domain name visited.
3. Configuration file:In your main templateconfig.jsonIn the file, willtemplate_typeis set to2.
4. Domain name resolution and server configuration:This usually requires you to point the mobile domain to your server IP address at your domain registrar. If your server uses Nginx or Apache and other reverse proxy, you also need to configure the corresponding proxy rules to ensurem.yourdomain.comCan correctly point to the service port of AnQi CMS and AnQi CMS can recognize this domain.

In this mode, although the content on the PC and mobile ends originates from the same content library of AnQi CMS, they can be completely independent in terms of URL, template, and even front-end resources (CSS/JS), providing the greatest flexibility and control.

Content management consistency: The core advantage of AnQi CMS

No matter which display mode you ultimately choose, one of the core strengths of Anqi CMS lies in its consistent content management.You only need to publish content once in the background, such as an article or a product, Anqi CMS will use the same underlying data model and content data, regardless of rendering through PC template, mobile template, or adaptive style, they all point to the same content source.

This means you don't need to maintain multiple contents for different terminals, which greatly reduces operating costs and the complexity of content synchronization. You can utilizearchiveDetail/archiveListThe tags call the required content fields in any template, the system will automatically handle the data, and you only need to pay attention to the front-end presentation.

Summary

AnQi CMS enables you to have powerful multi-terminal content display capabilities through these three flexible configuration modes.Whether it is pursuing a simple adaptive design, or the need to provide a unique experience for mobile users through code adaptation, or the need for a completely independent PC and mobile site, AnQi CMS can provide perfect support.According to the scale of your website, the characteristics of your content, and your refined requirements for user experience, choosing the most suitable model will help you better reach user groups on different devices and enhance the overall competitiveness of your website.

Frequently Asked Questions (FAQ)

Q1: What are the main differences between code adaptation mode and PC + mobile independent site mode?A1: Code adaptation mode (template_type: 1) and PC + mobile independent site mode (template_type: 2Allow you to provide different template files for PC and mobile devices, the key difference lies inDomain. Code adaptation mode is usuallyon the same domainSwitch the template by judging the device type on the server; while the PC + mobile independent site mode usestwo different domain names(such aswww.domain.comandm.domain.com），even if the content source is the same, but when the user accesses it, it will load the corresponding PC or mobile template according to the visited domain.

Q2: Can I set different configurations for the content model (fields) on the PC and mobile端?A2: The content model of AnQi CMS is unified, which means the data fields you define for articles, products, etc. are shared between the PC and mobile ends.For example, the 'title', 'content', and other fields of an article are only maintained in one copy in the background.Templates on different terminals can selectively display, hide, or show in different styles with these fields, but cannot define a field on the PC side that does not exist on the mobile side.

Q3: How to manage CSS, JavaScript, and other static resources for mobile end when choosing code adaptation or independent site mode?A3: In these modes, since you have already createdmobilea subdirectory to store mobile template files, you can alsomobilecreate the corresponding one inside the directorycss/jsorimagesFolder, place the static resources exclusive to the mobile end here. Then, in the mobile template, pass through.{% system with name="TemplateUrl" %}/mobile/css/style.cssIn a similar way, refer to these resources, ensuring that PC and mobile resources do not interfere with each other, achieving better loading performance and management.