How to create a responsive, code adaptation, or PC+mobile separation template for the AnQiCMS website?
As an expert in AnQiCMS operation, I know that a high-quality template is crucial for the attractiveness and user retention of a website.AnQiCMS provides great flexibility in template design, supporting multiple modes to meet different business needs and user access habits.I will elaborate in detail on how to create adaptive, code adaptation, or PC+mobile terminal separation templates for the AnQiCMS website.
AnQiCMS template development basics
Before delving into different template patterns, we first understand some common rules for AnQiCMS template creation. AnQiCMS template files are uniformly used.htmlsuffix and stored in/templatein a folder named after each template independently located in the directory. For example, you created a folder namedmythemethat contains all the files of the template named/template/mytheme/. The CSS styles, JavaScript scripts, images, and other static resources required by the template should be stored in/public/static/the directory to ensure efficient loading and management.
AnQiCMS template engine syntax is similar to Django, variables are passed through double curly braces{{变量名}}To refer to, while conditional judgments and loop control logic tags use single curly braces and percent signs{% 标签 %}Define, and end it with the corresponding closing tag. This concise and intuitive syntax makes it easy to create and modify templates.
The core of each template is the directory under its root.config.jsonThe configuration file. This file defines the name, version, author, and other basic information of the template, among which the most critical field istemplate_typewhich determines the responsive mode that the template will adopt:0Represents adaptive,1Represents code adaptation,2Represents PC + mobile separation. Understand and configure correctlytemplate_typeIs the first step in building different types of templates.
AnQiCMS encourages modular template development. You can{% include "partial/header.html" %}use tags to introduce common code snippets, such as headers, footers, or sidebars, to avoid repetition.{% extends 'base.html' %}Tags allow you to create a basic skeleton template, other pages can inherit this skeleton, rewriting only specific content blocks, greatly improving the maintainability and development efficiency of the template.
AnQiCMS three template modes explained
AnQiCMS offers three template modes, designed to meet diverse needs from single responsive design to fully independent dual sites.
1. Adaptive Template
Adaptive mode is the most common responsive design method, which serves all devices through a complete set of template code. In this mode, you areconfig.jsonset"template_type": 0.
The core idea is to use front-end technologies such as CSS media queries (Media Queries), Flexbox, and Grid layout (Grid) to automatically adjust web content and layout according to the screen size, resolution, and orientation of the user's device.For example, on a wide-screen monitor, content may be presented in a multi-column layout, while on a mobile screen it automatically converts to a single-column stack.
Create an adaptive template, be sure to put it on the page.<head>the tag with<meta name="viewport" content="width=device-width, initial-scale=1.0">To ensure that the browser correctly renders the viewport.The advantage of this pattern lies in the low maintenance cost, as you only need to manage a set of code; at the same time, since all devices access the same URL, this is also very beneficial for search engine optimization (SEO), avoiding potential duplicate content issues.For most small and medium-sized enterprises and self-media operators, adaptive templates are usually a balance point between performance and maintenance costs.
2. Code-adaptive Template
The code adaptation mode provides a more refined way to customize the device experience while still maintaining a unified URL structure. In this mode,config.jsonof"template_type"should be set to1.
In the code adaptation mode, AnQiCMS will dynamically select the corresponding template file for PC or mobile end based on the type of device accessed by the user (detected through User-Agent).This means that, although users on the PC and mobile ends access the same URL, the content they see and experience may be completely different because AnQiCMS loads different templates optimized for their devices.
To implement code adaptation, you need to create a folder named in your template folder.mobile/in your template folder. Thismobile/The directory will specifically store the template files for the mobile version, and the internal directory structure and file naming should be consistent with the PC template. For example, if your PC homepage template isindex/index.htmlThen the corresponding mobile homepage template should bemobile/index/index.htmlIfmobile/A template file for a missing page under the directory is missing, the system usually tries to backtrack and use the PC template, but in order to ensure a consistent mobile experience, it is recommended to create a corresponding mobile template for all pages that need customization.