In the practice of AnQiCMS (AnQiCMS), flexible template management is a key link in the efficient operation of the website.As an experienced website operations expert, I am well aware of how to load the appropriate layout according to different scenarios, which not only optimizes the user experience but also improves the website's response speed and maintenance efficiency.template_type, load different layout strategies.

AnQiCMS is known for its powerful customization capabilities and the high-performance architecture brought by the Go language, among which the template system is one of its core highlights.It supports syntax similar to the Django template engine, which provides us with rich conditional judgment and inclusion mechanisms, making dynamic template loading possible.

Understand AnQiCMS template types and file structure

In AnQiCMS, the concept of template type is crucial. It defines the appearance of the website on different devices. According to the template configuration set in theconfig.jsonfile.template_type，AnQiCMS will divide the templates into several modes:

  • 0: Adaptive (Adaptive)This means that your template will use a single codebase to adapt to all devices, usually through front-end technologies such as CSS media queries.In this mode, the system will not actively distinguish between PC and mobile template directories.
  • 1: Code Adaptation: The system will automatically judge whether it is a PC or a mobile device based on the User-Agent of the device being accessed. If it is determined to be a mobile device, it will try to access it first frommobile/Load the corresponding template file in the subdirectory.
  • 2: Computer+Phone (PC+Mobile Independent Sites): Similar to 'code adaptation', the system will also judge according to the device User-Agent and loadmobile/Mobile template under the directory. This mode is usually used for scenarios where PC and mobile end have completely independent design and interaction logic.

Thistemplate_typesettings, located under your template directory.config.jsonIn the file. For example:

{
	"name": "默认模板",
	"package": "default",
	"version": "1.0",
	"description": "系统默认模板",
	"author": "kandaoni.com",
	"homepage": "https://www.kandaoni.com",
	"created": "2022-05-10 22:29:00",
	"template_type": 1, // 这里定义了模板类型为代码适配
	"status": 0
}

After understanding this, we can design strategies to dynamically load different layouts.

Strategy one: utilizingtemplate_typedriven file directory structure (recommended)

The most direct and efficient according to AnQiCMStemplate_typeThe way to load different layouts is to make full use of the built-in file directory structure conventions.When you choose the 'Code Adaptation' or 'PC+Mobile End' template type, AnQiCMS will intelligently switch the template path according to the visiting device.

This means that if you want to provide a completely different layout for mobile devices, you do not need to write complex code in a single template fileifDetermine. You only need to create a subdirectory namedmobile/in the main template directory, and place all the dedicated mobile template files in it.

For example:

  • PC Home Page Template:template/your_theme/index/index.html
  • Mobile Home Page Template:template/your_theme/mobile/index/index.html

When the system detects that the user is accessing using a mobile device, iftemplate_typeallowed, it will automatically load themobile/index/index.htmlhomepage instead ofindex/index.htmlThis mechanism greatly simplifies the development and management of templates, ensuring clear separation of PC and mobile layout.

The advantage of this method lies in:

  1. System automation processing: AnQiCMS has completed device recognition and template path switching at the bottom layer, so we don't need to write extra logic in the front-end template.
  2. Code separation is clear: PC and mobile code do not interfere with each other, making it easy to maintain and update independently.
  3. Performance optimization: Only load the template files required for the current device, reducing unnecessary code transmission and parsing.

Strategy two: Perform conditional judgment within the template (suitable for adaptive or local adjustment)

Although AnQiCMS has implemented most of the layout dynamic loading through directory structure, in some cases, you may need to adjust or load different code snippets within the same template file based on certain conditions (such as device type, current page state, user group, etc.).

Although the document does not explicitly statetemplate_typewhether it is directly exposed as a template variable, but AnQiCMS usually provides context variables to judge the status of the current visiting device, such asis_mobile(This is a common CMS scenario assumption). If the system provides such a variable, you can work with Django template engine's{% if %}tags to implement:

`twig {# Assuming AnQiCMS provides the is_mobile variable in the template context #}

{% if is_mobile %}

{# 移动端特有的内容或引入移动端局部布局 #}
{% include "partial/mobile_header.html" %}
<div class="mobile-content-wrapper">
    <!-- 移动端页面主体内容 -->
</div>
{% include "partial/mobile_footer.html" %}

{% else %}

{# PC端特有的内容或引入PC端局部布局 #}
{% include "partial/pc_header.html" %}
<div class="pc-content-wrapper