How to implement differentiated display of content for PC and mobile terminals in AnQiCMS templates?

In today's internet environment, providing a high-quality cross-device browsing experience is the key to the success of website operations, whether it is a corporate website, e-commerce platform, or personal blog.AnQiCMS (AnQi CMS) has fully considered this requirement in template design, providing users with flexible and diverse solutions to achieve differentiated display of content on PC and mobile endpoints.This is not just about adapting the interface layout, but also about how to present the most suitable content to the user based on the characteristics of the device.

Next, we will delve into how AnQiCMS templates cleverly achieve this goal.

Understand the three display modes of AnQiCMS templates.

AnQiCMS provides three main website display modes, each with its unique application scenarios and implementation methods, so that you can choose according to your actual needs:

1. Adaptive Mode (Responsive Design)
2. Code Adaptation Mode (Code Adaptation)
3. PC+Mobile independent site mode (Independent PC + Mobile Sites)

Let's understand these modes one by one.

1. Adaptive mode: One piece of content, multi-platform layout

When you choose the adaptive mode, it means that your website will share a set of HTML structure and content. Through technologies such as CSS media queries (Media Queries), the layout, font size, and image size can be automatically adjusted according to the screen size and resolution of the user's device.

Implementation method:In AnQiCMS, to enable adaptive mode, you just need to be in the directory of the current template being used under,config.jsonIn the file, willtemplate_typeis set to0.Subsequently, your main task will be focused on writing responsive CSS and JavaScript code to ensure the website displays elegantly on different screen sizes.

Application scenarios:

• The website content remains consistent on PC and mobile, only the visual layout needs to be adjusted.
• The project budget and development cycle are limited, hoping to maintain with a set of code.
• Focus on search engine optimization, as search engines tend to crawl and index adaptive websites.

Advantages and considerations:The advantages of the adaptive mode lie in the low maintenance cost, unified content management, and SEO-friendliness.However, it may not provide an ultimate customized experience for mobile devices, for example, some large elements displayed on the PC side may only be hidden or shrunk on mobile devices, rather than replaced with lightweight components more suitable for mobile devices.

2. Code adaptation mode: The same URL presents different templates.

The code adaptation mode is between adaptive and standalone sites.In this mode, the PC and mobile ends access the same URL, but the server will dynamically load different template files according to the type of user device (detected through User-Agent).This means you can design a completely different template for mobile devices to provide an optimized user experience without managing two separate content systems.

Implementation method:

1. Configure template type:In the directory of the template currently being used in:config.jsonIn the file, willtemplate_typeis set to1.
2. Create a mobile template directory:In your template folder, create a directory namedmobile/The subdirectory. All template files designed for mobile devices (such asindex.html/archive/detail.htmletc.) should be stored in thismobile/directory, and the internal directory structure should be consistent with the PC template.
3. Develop a mobile template:You canmobile/In the directory, create a mobile version of each corresponding page for the PC template. For example, if the PC hasindex.htmlandarchive/detail.html, you can bemobile/There should also be in the directoryindex.htmlandarchive/detail.html.

Application scenarios:

• We hope to provide highly customized layouts and interactive experiences for mobile devices, but still want the content source to remain unified.
• We do not want to distinguish between PC and mobile endpoints with different domain names to simplify URL structure and SEO management.
• We need to selectively display or hide certain content modules based on the device type.

Advantages and considerations:The code adaptation mode provides more flexible control than adaptive, which can effectively improve the user experience and loading speed of mobile terminals, while still being able to use a unified content management backend.But the development and maintenance workload of the template will increase relatively, because it is necessary to manage two sets (PC and mobile) of template files.

3. PC+Mobile independent site mode: Complete independent dual-site operation

When you have completely different requirements for the user experience on PC and mobile platforms, and even hope that both show completely different content or functions, the PC+mobile independent site mode is**the choice. In this mode, your website will have two independent domain names (such aswww.example.comandm.example.com），and deploy two completely independent templates and content separately.

Implementation method:

1. Configure template type:In the directory of the template currently being used in:config.jsonIn the file, willtemplate_typeis set to2.
2. Create a mobile template directory:Same code adaptation mode, create within the template folder.mobile/Subdirectory, and place the mobile template files inside.
3. Set the mobile end address:In the AnQiCMS backend:Global SettingsFind and fill inMobile end address. This address is usually your mobile site domain (for examplem.example.com). When the system detects that the user is accessing the PC domain through a mobile device, it will automatically redirect to the mobile end address you set.
4. Multi-site management:If the PC site and mobile site are completely independent content systems, you can use the "Multi-site Management" feature of AnQiCMS to create and manage PC site and mobile site separately, each having an independent backend, data, and template.

Application scenarios:

• Mobile end needs to provide highly optimized feature processes or specific content (such as the experience of a mobile shopping app).
• The user groups at both ends differ greatly, and the content strategy is completely different.
• Hope to carry out marketing or promotion through a dedicated mobile domain.

Advantages and considerations:The independent site mode offers the greatest flexibility and performance optimization space, providing the most considerate experience for users of different devices. However, it is also the most costly in terms of maintenance, requiring the management of two sets of content and templates, and may require detailed SEO configuration (such as usingrel="alternate"andrel="canonical"Tag to avoid duplicate content issues.

Summarize the selection strategy

• Pursue simplicity and unity, with minimal content changes?Consider firstAdaptive mode.
• Need refined mobile experience, but still hope to share the same content source?SelectCode Adaptation ModeAnd thenmobile/Catalog customization template.
• There is a huge difference in the needs of PC and mobile users, do you need independent content or features?ConsiderPC + mobile independent site modeand set up the mobile end address in the background, possibly with multi-site management.

AnQiCMS offers these flexible options, ensuring that you can find the most suitable mobile adaptation solution based on the scale, content complexity, and operational strategy of your website, providing users with a seamless and efficient browsing experience.

Frequently Asked Questions (FAQ)

Q1: Can you implement different content modules for mobile and PC in adaptive mode?

A1:The adaptive mode is mainly adjusted by CSS and JS to layout and style, the content modules are usually shared. Although it can be adjusted by CSSdisplay: none;Or JavaScript dynamically loads to 'hide' or 'show' certain modules to achieve content differentiation, but this is not true 'content differentiation'.Because all the content still exists in the same HTML file, it may increase the loading burden on mobile devices.If you need more thorough content differentiation, it is recommended to consider code adaptation or an independent site mode.

Q2: When using code adaptation or PC + mobile independent site mode,mobile/What is the naming rule of the template files in the directory?

A2: mobile/The naming rules of the template files under the directory are completely consistent with the naming rules of the template directory on the PC side (i.e., the main template directory). For example, if the homepage on the PC side isindex.html, the article detail page isarchive/detail.htmlThen the corresponding files on the mobile end should also be named separatelymobile/index.htmlandmobile/archive/detail.htmlThe system will automatically search for and load according to the device typemobile/The corresponding template under the directory.

Q3: How does AnQiCMS judge the user's device and perform redirection in the PC + mobile independent site mode?

A3:Under the PC+mobile independent site mode, when a user accesses the PC domain name, AnQiCMS will check the HTTP request header forUser-AgentField to identify the type of user device. If the system determines that this is a mobile device, it will automatically perform a 302 redirect and redirect the user to the backend you set upGlobal SettingsconfiguredMobile end address. So, mobile users can directly access the content and interface optimized for your mobile site.