在当今移动互联网占据主导地位的时代，网站能否在不同设备上提供一致且优质的访问体验，直接关系到用户留存和品牌形象。AnQiCMS 深知用户对多端体验的需求，因此在系统设计之初就融入了灵活多样的模板显示模式，帮助用户轻松应对PC、手机等多种终端的挑战。

AnQiCMS 提供了三种核心的模板显示模式，它们分别是：自适应模式、代码适配模式以及PC+手机端独立模板模式。这三种模式各有侧重，能够满足不同网站运营者的具体需求。

深入理解AnQiCMS的三种模板显示模式

  1. 自适应模式 (Responsive Template Type) 自适应模式是目前非常流行的一种设计理念。在这种模式下，网站的前端代码（主要是HTML、CSS和JavaScript）是统一的，它会根据用户访问设备的屏幕尺寸和分辨率，自动调整布局、图片大小和文字排版，以提供**的视觉效果和交互体验。 在 AnQiCMS 中，自适应模式是一种基础且默认支持的方式。选择这种模式，你只需要设计一套通用的模板，并利用CSS媒体查询（Media Queries）等技术进行样式调整。AnQiCMS 系统本身无需进行额外的复杂配置，因为它处理的是同一套模板文件。这种模式的优势在于开发和维护成本相对较低，且URL保持一致，有利于SEO。

  2. 代码适配模式 (Code Adaptive Template Type) 代码适配模式介于自适应和完全独立站点之间。在这种模式下，虽然网站在PC端和手机端仍然共用同一个域名，但系统会根据用户设备的类型（通过User-Agent等信息判断）自动加载不同的模板文件。这意味着你可以为PC端设计一套完整的模板，同时为移动端设计另一套专门优化的模板。 AnQiCMS 在实现代码适配时，提供了一个非常清晰的目录结构。当你的模板主题文件夹（例如 template/default）中包含一个名为 mobile 的子目录时，系统就会启用代码适配的逻辑。所有放置在 mobile 目录下的模板文件，都会在手机端访问时优先被加载。例如，如果你的PC端首页模板是 template/default/index/index.html，那么手机端首页模板就应该是 template/default/mobile/index/index.html。这种模式的好处是内容统一管理，URL一致，但界面可以针对性地进行深度优化，避免自适应可能带来的兼容性或性能问题。

  3. PC+手机端独立模板模式 (PC+Mobile Independent Templates Type) 这是最高级别的分离模式，它允许你为PC端和手机端设置完全独立的站点，包括不同的域名（例如 www.example.com 用于PC，m.example.com 用于手机）和完全独立的模板。这种模式下，PC站和手机站可以拥有各自独立的设计、内容呈现甚至功能逻辑。 AnQiCMS 为这种模式提供了强大的支持。你不仅需要为PC端和手机端准备两套不同的模板，还需要在系统后台进行明确的配置。它通常适用于那些对移动端体验有极高要求，或者希望在不同设备上提供截然不同内容策略的网站。

实际操作：如何配置与制作模板

要在 AnQiCMS 中实现上述显示模式，主要涉及以下几个关键步骤和配置点：

  1. 模板文件的准备： 无论采用哪种模式，你都需要将模板文件放置在 AnQiCMS 的 /template 目录下，并为你的主题创建一个独立的文件夹，例如 mytheme。 如果选择代码适配或PC+手机端独立模板模式，你需要在 template/mytheme 目录下再创建一个 mobile 子目录，用于存放移动端专用的模板文件。例如，PC端的首页是 template/mytheme/index/index.html，那么对应的手机端首页就放在 template/mytheme/mobile/index/index.html。系统会根据文件名自动匹配，例如 archive/detail.html 对应 mobile/archive/detail.html。

  2. config.json 的作用： 每个模板主题文件夹内都必须包含一个 config.json 文件，用于描述模板的基本信息。其中一个非常重要的字段是 template_type，它决定了当前模板主题所支持的显示模式：

    • "template_type": 0 代表自适应模式。
    • "template_type": 1 代表代码适配模式。
    • "template_type": 2 代表 PC+手机端独立模板模式。 请确保根据你设计的模板类型，正确配置 config.json 中的 template_type 值。

  3. 后台系统设置： 对于 PC+手机端独立模板模式，还需要在 AnQiCMS 的后台进行进一步的全局配置。进入后台的“全局功能设置”页面，你会看到一个“移动端地址”的设置项。在这里，你需要填写你的手机站域名（例如 https://m.example.com）。系统会根据这个地址识别手机站，并加载对应的 mobile 目录下的模板。当然，前提是你需要确保该域名已正确解析到你的服务器。

  4. 模板设计与开发： AnQiCMS 的模板基于 Django 模板引擎语法，其语法结构与 Blade 等常见模板引擎类似，易于上手。你可以利用 {{变量}} 输出数据，使用 {% if 条件 %}、{% for 循环 %} 等标签进行逻辑控制。在制作手机端模板时，可以充分利用 AnQiCMS 提供的各种标签，如 system 标签获取系统信息（包括 MobileUrl 字段），archiveList 标签获取内容列表，categoryDetail 标签获取分类详情等，确保移动端模板也能灵活地展示内容。 值得一提的是，静态资源（CSS、JS、图片等）应统一存放在 /public/static/ 目录下，并在模板中通过相对路径或 AnQiCMS 提供的 TemplateUrl 变量来引用，以确保在不同模式下都能正确加载。模板文件本身统一使用 UTF-8 编码，避免乱码问题。

模板设计小贴士

  • 命名约定： AnQiCMS 有一套默认的模板文件命名约定，例如 index/index.html 用于首页，{模型table}/detail.html 用于内容详情页。手机端模板只需在 mobile/ 目录下遵循相同的命名即可。
  • 公共代码复用： 善用 include 标签将页头、页脚、侧边栏等公共部分抽离成独立文件，提高模板的可维护性。
  • 调试： 在开发过程中，利用浏览器开发者工具可以方便地模拟不同设备，检查布局和样式的适配情况。

AnQiCMS 通过灵活的模板显示模式，为网站的跨设备兼容性提供了强大且易用的解决方案。无论你是追求简洁高效的自适应设计，还是需要为不同终端提供深度定制体验的代码适配或独立站点，AnQiCMS 都能助你一臂之力，确保你的内容能够以**姿态呈现在每一位访问者面前。

常见问题 (FAQ)

Q1: 如何判断我的 AnQiCMS 网站目前使用的是哪种显示模式？ A1: 你可以通过检查你当前使用模板主题文件夹下的 config.json 文件来确认。在该文件中查找 "template_type" 字段的值：0 代表自适应模式，1 代表代码适配模式，2 代表 PC+手机端独立模板模式。同时，如果你配置了 PC+手机端独立模板模式，还需检查后台“全局功能设置”中的“移动端地址”是否已填写。

Q2: 切换显示模式（例如从自适应到代码适配）后，我的网站内容需要重新编辑或迁移吗？ A2: 无需担心，AnQiCMS 的内容是独立于模板的。当你切换显示模式时，只需确保新的模板主题（或 mobile 目录下的模板）能正确调用和渲染原有的内容即可。你发布的所有文章、产品、页面等数据都会保持不变。

Q3: 如果我只想为少数几个特定页面（例如“联系我们”或“产品详情”）提供单独的手机端模板，而其他页面仍然使用PC端模板（无论是自适应还是代码适配的PC部分），可以实现吗？ A3: 是的，完全可以。AnQiCMS 的模板加载机制具有层级性。当你在 `mobile