In the era where mobile internet occupies a dominant position, 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 fully understands the needs of users for multi-platform experiences, and therefore integrated flexible and diverse template display modes from the very beginning of system design, helping users easily cope with the challenges of various terminals such as PC and mobile phones.
AnQiCMS provides three core template display modes, which are: adaptive mode, code adaptation mode, and PC+mobile independent template mode.These three modes have different focuses and can meet the specific needs of different website operators.
Deep Understanding of AnQiCMS Three Template Display Modes
Adaptive Mode (Responsive Template Type)Adaptive mode is a very popular design concept at the moment.In this mode, the front-end code of the website (mainly HTML, CSS, and JavaScript) is unified, and it will automatically adjust the layout, image size, and text formatting based on the screen size and resolution of the device being accessed by the user, to provide an**optimal visual and interactive experience.In AnQiCMS, adaptive mode is a basic and default supported mode.Choose this mode, you only need to design a set of general templates, and use CSS media queries (Media Queries) and other technologies to adjust the style.AnQiCMS system itself does not require additional complex configuration, as it processes the same set of template files.The advantage of this pattern is that the development and maintenance costs are relatively low, and the URL remains consistent, which is beneficial for SEO.
Code Adaptive Template Type (Code Adaptive Template Type)
template/default) contains a name ofmobileWhen the system directory is accessed, the system will enable code adaptation logic. All items placed inmobileThe template files under the directory will be loaded first when accessed on the mobile end. For example, if your PC home page template istemplate/default/index/index.html, then the mobile home page template should betemplate/default/mobile/index/index.htmlThis pattern has the advantage of unified content management, consistent URLs, but the interface can be deeply optimized to avoid compatibility or performance issues that may arise from adaptability.PC+手机端独立模板模式 (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 (for example
www.example.comFor PC,m.example.comUsed for mobile) and completely independent templates.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 PC and mobile, but also need to make clear configurations in the system backend.It is usually suitable for those websites that have very high requirements for mobile experience, or 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, the following key steps and configuration points are mainly involved:
Preparation of template files:No matter which mode you choose, you need to place the template file in the directory of AnQiCMS,
/templateand create a separate folder for your theme, for example,mythemeIf you choose to adapt the code or use the PC+mobile independent template mode, you need to create another one in thetemplate/mythemedirectory.mobileSubdirectory for storing template files dedicated to mobile devices. For example, the home page of the PC istemplate/mytheme/index/index.html. The corresponding home page of the mobile phone is placed intemplate/mytheme/mobile/index/index.html. The system will automatically match the filenames.archive/detail.htmlCorrespondingmobile/archive/detail.html.config.jsonThe function of:Each template theme folder must contain oneconfig.jsonfile, used 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 adaptive mode."template_type": 1represents code adaptation mode."template_type": 2Represents an independent template mode for PC+mobile. Make sure to configure correctly according to the template type you design.config.jsonoftemplate_typevalue.
Background system settings:For PC and mobile independent template mode, further global configuration is required in the AnQiCMS backend.Enter the "Global Function Settings
https://m.example.com）。The system will recognize the mobile site based on this address and load the corresponding template.mobiletemplate under the directory. Of course, the premise is that you need to make sure that the domain name has been correctly resolved to your server.Template design and development:AnQiCMS's template is based on Django template engine syntax, which is similar to the syntax structure of common template engines like Blade, making it easy to get started. You can make use of
{{变量}}Output data, using{% if 条件 %}/{% for 循环 %}tags for logical control. When creating mobile templates, you can fully utilize the various tags provided by AnQiCMS, such assystemLabel gets system information (includingMobileUrlfield).archiveListLabel gets content list,categoryDetailLabel acquisition of category details, etc., ensure that the mobile template can also flexibly display content. It is worth mentioning that static resources (CSS, JS, images, etc.) should be stored uniformly in/public/static/Directory under, and through the template by relative path or provided by AnQiCMSTemplateUrlReference variables to ensure correct loading in different modes. The template file itself uses UTF-8 encoding to avoid garbled text issues.
Tips for template design
- Naming convention: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 convention under the directory. - Public code reuse:Use wisely
includeTags extract the common parts such as header, footer, sidebar, etc. into independent files, improving the maintainability of the template. - Debug:During the development process, using the browser developer tools can conveniently simulate different devices and check the adaptation of layout and style.
AnQiCMS Through flexible template display mode, provides a powerful and easy-to-use solution for website cross-device compatibility.Whether you are pursuing concise and efficient adaptive design, or need code adaptation or a standalone site for in-depth customization for different terminals, AnQiCMS can lend you a helping hand to ensure that your content can be presented in a** pose to every visitor.
Common Questions (FAQ)
Q1: How can I determine which display mode my AnQiCMS website is currently using?
A1:You can check the folder of the current template theme you are using.config.jsonFile to confirm. Look for it in the file."template_type"the value of the field:0represents the adaptive mode,1represents the 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 "global feature settings" on the back-end has been filled in.
Q2: After switching to display mode (such as from adaptive to code adaptation), do I need to re-edit or migrate my website content?
A2:No need to worry, AnQiCMS's content is independent of the template. When you switch display modes, 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: If I want to provide a separate mobile template for only a few specific pages (such as 'Contact Us' or 'Product Details'), while other pages still use the PC template (either adaptive or code-adapted PC part), is it possible to achieve this? A3:Yes, it can be done. AnQiCMS's template loading mechanism has a hierarchical nature. When you are in the `mobile