如何为 AnQiCMS 网站创建自适应、代码适配或PC+手机端分离的模板？
作为一名深谙AnQiCMS运营之道的网站内容专家，我深知一套优质的模板对于网站的吸引力和用户留存至关重要。AnQiCMS在模板设计上提供了极大的灵活性，支持多种模式以适应不同的业务需求和用户访问习惯。接下来，我将详细阐述如何为AnQiCMS网站创建自适应、代码适配或PC+手机端分离的模板。
AnQiCMS模板开发基础
在深入探讨不同模板模式之前，我们先了解AnQiCMS模板制作的一些共通规则。AnQiCMS的模板文件统一使用.html作为后缀，并存放在/template目录下以各自模板名称命名的独立文件夹中。例如，您创建了一个名为mytheme的模板，其所有文件都将位于/template/mytheme/。模板所需的CSS样式、JavaScript脚本、图片等静态资源，则应存放在/public/static/目录，以确保高效加载和管理。
AnQiCMS的模板引擎语法类似Django，变量通过双花括号{{变量名}}来引用，而条件判断和循环控制等逻辑标签则使用单花括号和百分号{% 标签 %}定义，并需以相应的结束标签结束。这种简洁直观的语法使得模板的创作和修改变得容易。
每套模板的核心是其根目录下的config.json配置文件。这个文件定义了模板的名称、版本、作者等基本信息，其中最关键的字段是template_type，它决定了该模板将采用何种响应式模式：0代表自适应，1代表代码适配，2代表PC+手机端分离。理解并正确配置template_type是构建不同类型模板的第一步。
AnQiCMS鼓励模块化的模板开发方式。您可以通过{% include "partial/header.html" %}标签引入公共的代码片段，如页头、页脚或侧边栏，避免重复编写。{% extends 'base.html' %}标签则允许您创建基础骨架模板，其他页面可以继承这个骨架，只重写特定的内容区块，极大地提高了模板的可维护性和开发效率。
AnQiCMS的三种模板模式详解
AnQiCMS提供的三种模板模式，旨在满足从单一响应式设计到完全独立双站点的多样化需求。
1. 自适应模板 (Adaptive Template)
自适应模式是最常见的响应式设计方法，它通过一套完整的模板代码来服务所有设备。在这种模式下，您在config.json中设置"template_type": 0。
其核心思想是利用前端技术，如CSS媒体查询（Media Queries）、弹性盒模型（Flexbox）和网格布局（Grid），使网页内容和布局能够根据用户设备的屏幕尺寸、分辨率和方向自动调整。例如，在宽屏显示器上，内容可能以多列布局呈现，而在手机屏幕上则自动转换为单列堆叠。
创建自适应模板时，务必在页面的<head>标签中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，以确保浏览器正确渲染页面的视口。这种模式的优势在于维护成本低，因为您只需要管理一套代码；同时，由于所有设备访问的是相同的URL，这对搜索引擎优化（SEO）也极为有利，避免了潜在的重复内容问题。对于多数中小企业和自媒体运营者而言，自适应模板通常是性能与维护成本之间的**平衡点。
2. 代码适配模板 (Code-adaptive Template)
代码适配模式提供了一种更为精细的设备体验定制方式，同时仍保持统一的URL结构。在此模式下，config.json中的"template_type"应设置为1。
在代码适配模式中，AnQiCMS会根据访问用户的设备类型（通过User-Agent检测）动态选择渲染PC端或移动端对应的模板文件。这意味着，虽然PC端和移动端的用户访问的是同一个URL，但他们看到和体验到的页面内容可能完全不同，因为AnQiCMS加载了针对其设备优化过的不同模板。
要实现代码适配，您的模板文件夹内部需要创建一个名为mobile/的子目录。这个mobile/目录将专门存放移动端版本的模板文件，并且其内部的目录结构和文件命名应该与PC端模板保持一致。例如，如果您的PC端首页模板是index/index.html，那么对应的移动端首页模板就应该是mobile/index/index.html。如果mobile/目录下缺少某个页面的模板文件，系统通常会尝试回溯使用PC端的模板，但为了确保一致的移动端体验，建议为所有需要定制的页面都创建对应的移动端模板。