How to load different layouts in AnQiCMS templates based on the current template type (such as `template_type`)?

Calendar 👁️ 61

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

Related articles

How does the `filter-yesno` filter help AnQiCMS templates handle the tri-state logic of 'yes/no/unknown'?

As an experienced website operations expert, I know that how to present data status efficiently and clearly in a content management system is one of the keys to successful operations.AnQiCMS (AnQiCMS) provides an excellent solution in this aspect with its flexible template engine and rich built-in filters.Today, let's delve into a seemingly simple yet powerful filter——`filter-yesno`, and how it helps AnQiCMS templates handle complex ternary logic such as 'yes/no/unknown'.

2025-11-06

What is the difference in handling variable null values between `filter-default` and `filter-default_if_none` in `if` condition judgments?

AnQiCMS (AnQiCMS) is a powerful assistant for our daily content operation, with its flexible template engine syntax making content display diverse and efficient.However, in practice, we often encounter situations where variable values are empty, such as when the article title is not filled in, or when a custom field has no data.How elegantly to handle these 'null' values to ensure that the website front-end display is always professional and friendly has become a topic that content operators must face.

2025-11-06

How to use the `filter-length_is` filter in AnQiCMS templates for `if` judgment of the exact length of a collection?

## Precise Control and Intelligent Presentation: Efficient Application of the `filter-length_is` Filter in AnQiCMS Templates In the template development practice of AnQiCMS, we often need to finely control the displayed data to ensure the accurate transmission of content and the elegant presentation of the user interface.AnQi CMS provides powerful tools for content operators and developers with its efficient architecture based on the Go language and the flexible syntax of the Django template engine, among which

2025-11-06

How to use the `filter-divisibleby` filter to determine the divisibility of a number in an `if` statement?

In AnQiCMS template development, achieving dynamic content display and fine-grained control is a daily challenge for website operation experts.AnQiCMS is highly praised for its concise and efficient template engine, which inherits the elegant style of Django templates, making content display and logical control intuitive.In website operation, we often need to present different content or styles based on the characteristics of numbers, such as displaying an advertisement every few products or setting different background colors for odd and even rows of the list.At this time, the `divisibleby` filter can be perfectly combined with the `if` statement

2025-11-06

The AnQi CMS template development tool: gracefully handle missing files using the `if_exists` parameter of the `include` tag

As an experienced website operations expert, I know how important efficiency and stability are in building and managing corporate websites.AnQiCMS (AnQiCMS) boasts its high-performance architecture based on the Go language and a flexible template system, providing us with powerful content management capabilities.In daily template development, the `include` tag is undoubtedly our powerful assistant for achieving modularization and improving code reusability.However, convenience also hides a small trap: if the template file referenced by `include` is unfortunately missing, the website page will immediately throw an error, affecting user experience

2025-11-06

How to use the `block` tag under the `if` condition to decide whether to override the parent template content when inheriting (`extends`) a template?

## Advanced Anqi CMS Template: Skillfully Using `extends` and `block` to Achieve Conditional Content Coverage We are well aware of the importance of website content maintainability and flexibility in the daily operation of website management for efficient operation.AnQi CMS provides a solid foundation for content management with its efficient architecture based on the Go language and a Django-like template engine syntax.Among them, template inheritance (`extends`) and content blocks (`block`) are the core of building reusable, easily expandable website layouts.But just inheriting and overriding is not enough, many times

2025-11-06

How to determine whether a user is logged in or has specific permissions to display private content in AnQiCMS templates?

As an experienced website operation expert, I fully understand the importance of realizing fine-grained content display in a content management system.Especially for systems like AnQiCMS that focus on enterprise-level applications and user experience, dynamically presenting content based on the user's login status or their permission group is a core strategy to enhance website personalization, achieve content monetization, and even build a membership system.Today, let's delve into how to skillfully utilize the powerful functions of the AnQiCMS template to achieve this goal

2025-11-06

How to determine whether the current page is the homepage, category page, detail page, or single page, and load the corresponding SEO information?

As an experienced website operations expert, I am well aware of the importance of Search Engine Optimization (SEO) in the increasingly fierce online environment.To do SEO well, the primary task is to ensure that every page of the website provides clear and accurate metadata to search engines.How can one determine the current page type (home page, category page, detail page, single page, etc.) and load the corresponding SEO information, which is a core issue often encountered by many operators and developers.Today, let's delve into the intelligent design and practical strategies of AnQiCMS (AnQiCMS) in this aspect

2025-11-06