在安企CMS（AnQiCMS）的实践中，灵活的模板管理是网站高效运营的关键一环。作为一位资深网站运营专家，我深知如何根据不同的场景加载合适的布局，这不仅能优化用户体验，更能提升网站的响应速度和维护效率。今天，我们就来深入探讨在AnQiCMS模板中，如何巧妙地根据当前模板类型，例如template_type，加载不同的布局策略。

AnQiCMS以其强大的定制能力和Go语言带来的高性能架构著称，其中模板系统是其核心亮点之一。它支持类似Django模板引擎的语法，这为我们提供了丰富的条件判断和引入机制，使得模板的动态加载成为可能。

理解AnQiCMS的模板类型与文件结构

在AnQiCMS中，模板类型的概念至关重要。它定义了网站在不同设备上的表现形式。根据您在模板配置config.json文件中设置的template_type，AnQiCMS会将模板分为几种模式：

  • 0: 自适应 (Adaptive)：这意味着您的模板将使用一套代码来适配所有设备，通常通过CSS媒体查询等前端技术实现。在这种模式下，系统不会主动区分PC和移动端模板目录。
  • 1: 代码适配 (Code Adaptation)：系统会根据访问设备的User-Agent自动判断是PC还是移动端。如果判断为移动设备，它会优先尝试从mobile/子目录加载相应的模板文件。
  • 2: 电脑+手机 (PC+Mobile Independent Sites)：与“代码适配”类似，系统同样会根据设备User-Agent进行判断，并加载mobile/目录下的移动端模板。这种模式通常用于PC和移动端拥有完全独立设计和交互逻辑的场景。

这个template_type的设置，位于您模板目录下的config.json文件中。例如：

{
	"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
}

了解了这些，我们便可以设计相应的策略来动态加载不同的布局。

策略一：利用template_type驱动的文件目录结构（推荐）

AnQiCMS最直接且高效的根据template_type加载不同布局的方式，是充分利用其内置的文件目录结构约定。当您选择“代码适配”或“PC+手机端”模板类型时，AnQiCMS会智能地根据访问设备自动切换模板路径。

这意味着，如果您希望为移动端提供一个完全不同的布局，您无需在单个模板文件中编写复杂的if判断。您只需在您的主模板目录下，创建一个名为mobile/的子目录，并将所有移动端专属的模板文件放置其中。

例如：

  • PC端首页模板: template/your_theme/index/index.html
  • 移动端首页模板: template/your_theme/mobile/index/index.html

当系统检测到用户使用移动设备访问时，如果template_type允许，它将自动从mobile/index/index.html加载首页，而不是index/index.html。这种机制极大地简化了模板的开发和管理，保证了PC和移动端布局的清晰分离。

这种方法的优势在于：

  1. 系统自动化处理：AnQiCMS在底层完成了设备识别和模板路径切换，无需我们在前端模板中编写额外的逻辑。
  2. 代码分离清晰：PC和移动端代码互不干扰，便于独立维护和更新。
  3. 性能优化：只加载当前设备所需的模板文件，减少了不必要的代码传输和解析。

策略二：在模板内部进行条件判断（适用于自适应或局部调整）

尽管AnQiCMS通过目录结构实现了大部分布局的动态加载，但在某些情况下，您可能需要在同一个模板文件内部，根据某些条件（例如：设备类型、当前页面状态、用户组等）进行局部内容的调整或加载不同的代码片段。

虽然文档没有明确指出template_type是否直接作为模板变量暴露，但AnQiCMS通常会提供判断当前访问设备状态的上下文变量，例如is_mobile（这是一个常见CMS模式下的假设）。如果系统提供了这样的变量，您可以配合Django模板引擎的{% if %}标签来实现：

”`twig {# 假设AnQiCMS在模板上下文中提供了is_mobile变量 #}

{% 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