In the era when mobile internet dominates, whether a website can provide a consistent and high-quality access experience across different devices is directly related to user retention and brand image.AnQiCMS deeply understands the needs of users for multi-platform experiences, and therefore integrated flexible and diverse template display modes from the beginning of system design, helping users easily cope with challenges from various terminals such as PC, mobile phone, and more.
AnQiCMS provides three core template display modes, namely: adaptive mode, code adaptation mode, and PC+mobile independent template mode.These three modes have their respective focuses, and can meet the specific needs of different website operators.
Understand the three template display modes of AnQiCMS in depth
Responsive Mode (Responsive Template Type)Adaptive mode is a very popular design concept at present.In this mode, the front-end code (mainly HTML, CSS, and JavaScript) is unified, and it automatically adjusts the layout, image size, and text formatting according to the screen size and resolution of the device visited by the user to provide**a visual effect and interactive experience.In AnQiCMS, adaptive mode is a basic and default supported mode.Choose this mode, you only need to design a universal template and use CSS media queries (Media Queries) and other technologies to adjust the style.The AnQiCMS system itself does not require any additional complex configuration, as it handles the same set of template files.The advantage of this model lies in the relatively low development and maintenance costs, and the consistent URL is beneficial for SEO.
Code Adaptive Template Type (Code Adaptive Template Type)The code adaptation mode is between adaptive and fully independent sites.In this mode, although the website still shares the same domain name on both PC and mobile endpoints, the system will automatically load different template files based on the type of user's device (determined by User-Agent information and other factors).This means you can design a complete template for the PC end, while designing another optimized template specifically for mobile end.AnQiCMS when implementing code adaptation, provided a very clear directory structure.When your template theme folder (for example
template/defaultcontains a name ofmobileWhen the system will enable code adaptation logic when in the subdirectory. All placed inmobileThe template files in the directory will be loaded first when accessed on mobile. For example, if your PC homepage template istemplate/default/index/index.html, then the mobile homepage template should betemplate/default/mobile/index/index.htmlThe benefit of this pattern is that content is managed uniformly, URLs are consistent, but the interface can be optimized deeply to avoid compatibility or performance issues caused by adaptation.PC+Mobile Independent Templates Type (PC+Mobile Independent Templates Type)This is the highest level of separation mode, which allows you to set up completely independent sites for PC and mobile, including different domain names (such as
www.example.comused for PC,m.example.comUsed for mobile) and a completely independent template. In this mode, the PC site and mobile site can have independent designs, content presentation, and even functional logic.AnQiCMS provides strong support for this mode.You not only need to prepare two different templates for the PC and mobile end, but also need to make clear configurations in the system background.It is usually suitable for those who have very high requirements for mobile experience or who want to provide completely different content strategies on different devices.
Actual operation: how to configure and create templates
To implement the above display mode in AnQiCMS, it mainly involves the following key steps and configuration points:
Preparation of the template files:No matter which mode you choose, you need to place the template file in the AnQiCMS
/templatedirectory and create a separate folder for your theme, for examplemythemeIf you choose code adaptation or PC + mobile independent template mode, you need to create onetemplate/mythemedirectory to create onemobileThe subdirectory is used to store template files for mobile devices. For example, the homepage for PC istemplate/mytheme/index/index.htmlThen the corresponding mobile homepage is placed intemplate/mytheme/mobile/index/index.html. The system will automatically match according to the filename, for examplearchive/detail.htmlcorrespondingmobile/archive/detail.html.config.jsonfunction:Each template theme folder must contain oneconfig.jsonfile to describe the basic information of the template. One very important field istemplate_typeIt determines the display mode supported by the current template theme:"template_type": 0represents the adaptive mode."template_type": 1Represents code adaptation mode."template_type": 2Represents independent template mode for PC+mobile phone end. Please ensure that it is correctly configured according to the type of template you designconfig.jsonoftemplate_typeValue.
Back-end system settings:For the PC+mobile independent template mode, further global configuration is required in the AnQiCMS backend.Go to the "Global Function Settings" page in the background, and you will see a setting item for the "Mobile End Address".Here, you need to fill in your mobile site domain name (such as
https://m.example.comThe system will identify the mobile site based on this address and load the correspondingmobileThe template under the directory. Of course, you need to make sure that the domain name is correctly resolved to your server.Template design and development:AnQiCMS's templates are based on the Django template engine syntax, which is similar to the syntax structures of common template engines like Blade and is easy to get started with. You can use
{{变量}}Output data, using{% if 条件 %}/{% for 循环 %}Tags for logical control. When making mobile templates, you can fully utilize the various tags provided by AnQiCMS, such assystemTag to get system information (including)MobileUrlfield).archiveListTag to get content list,categoryDetailTag to get category details, ensure that the mobile template can also flexibly display content. It is worth mentioning that static resources (CSS, JS, images, etc.) should be stored in a unified manner./public/static/Under the directory, and through the relative path in the template or provided by AnQiCMSTemplateUrlReference variables to ensure correct loading in different modes. The template file itself uses UTF-8 encoding to avoid garbled text.
Tips for template design
- Naming conventions:AnQiCMS has a set of default template file naming conventions, such as
index/index.htmlUsed for the homepage,{模型table}/detail.htmlused for content detail pages. The mobile template only needs tomobile/follow the same naming conventions in the directory. - Code reuse:Make good use of
includeLabels isolate the header, footer, sidebar, and other common parts into independent files, improving the maintainability of the template. - Debug:During development, using the browser developer tools can conveniently simulate different devices and check the compatibility of layout and style.
AnQiCMS provides a powerful and user-friendly solution for cross-device compatibility through flexible template display modes.No matter if you are pursuing a concise and efficient adaptive design, or need code adaptation or a standalone site for deep customization experience on different terminals, AnQiCMS can help you a lot to ensure that your content can be presented in a**posture to every visitor.
Frequently Asked Questions (FAQ)
Q1: How to determine which display mode my AnQiCMS website is currently using?
A1:You can check the current template theme folder you are using.config.jsonPlease confirm in the file. Look for it in the file."template_type"the value of the field:0represents adaptive mode,1represents code adaptation mode,2Represents the PC+mobile independent template mode. At the same time, if you have configured the PC+mobile independent template mode, you also need to check whether the 'mobile end address' in the background 'global function settings' has been filled in.
Q2: After switching to display mode (such as from adaptive to code adaptation), do I need to edit or migrate my website content?
A2:Do not worry, the content of AnQiCMS is independent of the template. When you switch to display mode, just make sure the new template theme (ormobileThe template under the directory can correctly call and render the original content. All the articles, products, pages and other data you publish will remain unchanged.
Q3: Can I provide a separate mobile template for only a few specific pages (such as "Contact Us" or "Product Details"), while the rest of the pages still use the PC template (whether adaptive or code-adapted PC part)? A3:Yes, absolutely. AnQiCMS's template loading mechanism has a hierarchical nature. When you are in the `mobile