What page adaptation modes are supported by AnQiCMS templates, and how to select and implement responsive display?

In the era of multi-screen, it has become normal for users to access websites through various devices.To ensure that the website can provide a smooth and friendly experience on any device, page adaptation has become an indispensable part of website construction.AnQiCMS (AnQi Content Management System) fully considers this requirement, providing a variety of flexible template adaptation modes to help users easily cope with the display challenges of different devices.

Page adaptation modes provided by AnQiCMS

AnQiCMS provides three main page adaptation modes in template design, each with unique application scenarios and implementation methods.They are: adaptive mode, code adaptation mode, and PC + mobile independent site mode.

first, Adaptive modeIt is the most common and flexible one.In this mode, your website uses the same set of template files, and detects the screen size and resolution of the device being accessed through the CSS media query (Media Queries) feature, and automatically adjusts the page layout and style based on this information.This means that whether it is a PC, tablet or smartphone, the website content is the same HTML structure, but the display form is different.

Next isCode Adaptation Mode.This mode is between adaptive and independent sites.The website still uses a single URL, but the server provides different page structures or content based on the type of user's device (for example, whether it is a PC or mobile browser).mobileA special template under the subdirectory, while PC access uses the files under the main template directory.This way can provide highly customized experiences for different devices while avoiding the potential SEO complexity brought by multiple domains.

Finally isPC + mobile independent site modeIn this mode, your PC website and mobile website are two completely independent sites, usually using different domain names (such aswww.yourdomain.comandm.yourdomain.com)，and manage two sets of templates.When a user accesses a PC domain through a mobile phone, the system may automatically redirect to the mobile domain.This mode provides the highest degree of flexibility, allowing for completely different user experiences and features on both PC and mobile endpoints.

How to choose the appropriate adaptation mode?

It is not a general rule to choose a mode, it needs to consider the actual needs of the website, operation objectives, and development and maintenance capabilities.

• Adaptive modeIt is usually the preferred choice for small and medium-sized enterprises and personal websites.The advantage lies in the relatively low development and maintenance costs, as you only need to design and maintain a single template.For most content display websites, if the content structure does not differ much across different devices, adaptive mode can provide a good user experience.At the same time, due to the unified URL, it is also beneficial for search engine optimization (SEO).

• Code Adaptation ModeSuitable for those who want to unify URL management and also need to provide significant differentiated experiences for different devices.For example, some industry websites may require a more streamlined function or layout on mobile devices to highlight key information, while on PC they display more details and complex interactions.This pattern can effectively control the loading of resources on mobile devices, improve access speed, and also has a positive effect on mobile SEO.But it requires considering the design and code writing of two different structures during template design.

• PC + mobile independent site modeIt is suitable for projects with extreme customization requirements for PC and mobile user experience.For example, e-commerce websites may need specialized shopping process optimization for mobile devices, while PC端 focuses on product details and multi-image display.Although this model provides the greatest design freedom, its development and maintenance costs are the highest, requiring the management of two sets of domain names, two sets of template content, and possibly additional handling of mobile端 jump and SEO weight distribution issues.AnQiCMS through the multi-site management feature, can simplify the management of independent sites.

Implement responsive display: AnQiCMS template practice

AnQiCMS's template engine is based on syntax similar to Django, with a gentle learning curve, making template creation very easy to get started with.To implement the above page adaptation mode, you need to make corresponding configurations and designs at the template level.

Firstly, all AnQiCMS templates are stored in/templateIn the directory. Each independent template package will have aconfig.jsonfile containing a keyword fieldtemplate_typeto define the current template's adaptation mode:

• "template_type": 0represents the adaptive mode.
• "template_type": 1Represents code adaptation mode.
• "template_type": 2Represents PC + mobile independent site mode.

Modifying this value can tell AnQiCMS how your template will adapt the page.

ForAdaptive modeJust put all the template files of the website (such asindex.html,detail.html,list.htmland so on) directly in your template directory (such asdefault/Below.All responsive logic will be implemented through CSS media queries.AnQiCMS will load these templates and the browser will adjust the display according to the CSS rules.TemplateUrltag to get the static file path of the current template, for example<link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">.

when choosingCode Adaptation ModeorPC + mobile independent site modeAt that time, the situation will be somewhat different. Both modes require you to create a file namedmobileThe subdirectory. All template files specifically designed for mobile devices should be placed in thismobileThe directory, and the file structure and naming should be consistent with the PC template in the main template directory. For example, if the PC homepage template isindex/index.html, then the mobile homepage template should bemobile/index/index.html.

• InCode Adaptation ModeBelow, AnQiCMS will intelligently detect the visiting device. If it is a mobile device, the system will automatically rendermobileThe corresponding template under the directory; if it is a PC device, it will render the template under the main template directory. However, the URL presented to the outside is always unified, which is very beneficial for SEO.

• InPC + mobile independent site modeBelow, you need to set the 'Global Function Settings' in the background, in addition to setting the PC website address, you also need to set the 'Mobile End Address'. When users access through the PC domain and the device is a mobile end, the system may automatically redirect to the mobile end address you set and loadmobileThe template under the directory. This mode provides two independent entries, allowing PC and mobile end to have completely independent domain names and content strategies.

In summary, AnQiCMS provides a flexible and diverse range of options for website adaptation, whether it is pursuing simple and efficient adaptation, or needing fine-tuned code adaptation, or pursuing the ultimate differentiated independent site mode, all appropriate solutions can be found in AnQiCMS.By reasonably selecting and utilizing its template mechanism, you can provide users with an excellent cross-device access experience.

Frequently Asked Questions (FAQ)

1. Ask: If I select the code adaptation mode, butmobilethere is no corresponding template file in the directory, how will the website display?Answer: In this case, AnQiCMS will try to load firstmobileThe template under the directory.If the corresponding mobile template is not found, the system will fallback to the PC template under the main template directory.This means that even if you do not completely cover all mobile template, the website can still be accessed normally, but some pages may not be optimized for mobile devices.

2. Ask: What is the relationship between the mobile domain and the PC domain in the PC+mobile independent site mode in SEO? Will it分散权重?Answer: The PC+mobile independent site mode indeed uses two different domain names. To avoid dispersing SEO weight, it is usually recommended to use in the HTML header of the PC site.rel="alternate"The label points to a mobile site and is used at the mobile siterel="canonical"The label points to the PC site (or itself, depending on the specific strategy).AnQiCMS supports using TDK tags in templates to configure the canonical URL of the page (CanonicalUrl), helping you better manage SEO relationships.

3. Ask: How can I ensure that my mobile template only loads mobile-specific CSS and JS in code adaptation mode, and does not load PC resources?Answer: In code adaptation mode, due to AnQiCMS loading different template files (PC template ormobileThe template under the directory), you can refer to the required CSS and JS files separately in these two different template files. For example, in the PC templatedefault/css/pc.css, while in the mobile templatemobile/css/mobile.css. AnQiCMS providedTemplateUrlTags can help you easily build these resource paths, thereby achieving on-demand loading and optimizing page performance.