在 AnQiCMS 中构建和管理移动端模板，以确保您的网站在手机上正常显示，需要理解其灵活的模板适配机制和清晰的文件存放规则。AnQiCMS 提供了多种移动端适配模式，让您可以根据实际需求选择最适合的方式。

理解 AnQiCMS 的移动端适配模式

首先，我们需要了解 AnQiCMS 支持的三种主要移动端适配模式：

  1. 自适应模式 (Responsive)： 在这种模式下，您的网站使用一套模板代码。通过 CSS 媒体查询（Media Queries）等技术，同一套 HTML 结构和内容会根据用户设备的屏幕尺寸自动调整布局和样式。这意味着您不需要为 PC 和移动设备单独创建不同的模板文件，而是通过前端技术来实现页面的适配。这是目前主流且推荐的方式，因为它维护成本低，内容管理简单。

  2. 代码适配模式 (Code Adaptation)： 当您选择此模式时，AnQiCMS 会根据访问设备的类型（PC 或手机）加载不同的模板文件。这意味着您将为 PC 端和移动端分别设计和开发两套模板。系统会在检测到用户使用手机访问时，自动切换到专门为移动设备设计的模板，而在 PC 上则显示 PC 版模板。这种模式在需要为不同设备提供截然不同的用户体验或功能时非常有用。

  3. PC + 手机独立站点模式 (PC + Mobile Separate Sites)： 这是最彻底的区分方式。在这种模式下，您的 PC 网站和手机网站不仅使用不同的模板，甚至可以绑定不同的域名（例如 www.yourdomain.com 用于 PC，m.yourdomain.com 用于手机）。AnQiCMS 会根据用户访问的域名和设备类型，将用户重定向到相应的站点和模板。这种模式提供了最大的灵活性，允许为两个平台提供完全独立的内容策略和功能，但维护成本也相对较高。

创建移动端模板文件的核心步骤

无论您选择代码适配模式还是 PC+手机独立站点模式，都需要创建专门的移动端模板文件。以下是创建和存放这些文件的主要步骤：

  1. 定位您的模板包： 首先，你需要进入你的 AnQiCMS 网站目录。所有的模板文件都存放在 /template 文件夹下。在 /template 目录中，你会找到你当前使用的模板主题文件夹（例如 default 或其他自定义名称）。所有移动端模板的创建和存放都将在这个具体的模板主题文件夹内进行。

  2. 创建 mobile 目录： 在你选择的模板主题文件夹内（例如 /template/你的模板包名称/），你需要创建一个名为 mobile 的子目录。所有专门为移动端设计的模板文件都将存放在这个 mobile 目录中。这是 AnQiCMS 识别移动端模板的关键路径。

  3. 保持与 PC 端一致的目录结构： 为了让 AnQiCMS 能够正确地识别和加载移动端模板，mobile 目录下的模板文件结构应尽量与 PC 端模板的结构保持一致。例如，如果您的 PC 端首页模板是 /template/你的模板包名称/index.html，那么对应的移动端首页模板就应该是 /template/你的模板包名称/mobile/index.html。同理，如果 PC 端的文章详情页模板是 /template/你的模板包名称/archive/detail.html，移动端则为 /template/你的模板包名称/mobile/archive/detail.html。这种镜像结构有助于系统自动匹配和加载。

  4. 编辑 config.json 文件： 在你的模板主题文件夹（例如 /template/你的模板包名称/）中，会有一个 config.json 文件。这个文件是模板的配置文件，你需要修改其中的 template_type 字段，将其设置为 1 (代码适配) 或 2 (PC+手机独立站点)，以告知 AnQiCMS 您的模板支持移动端适配。

    • "template_type": 0 代表自适应模式
    • "template_type": 1 代表代码适配模式
    • "template_type": 2 代表 PC + 手机独立站点模式 例如，如果选择代码适配模式，您的 config.json 文件中可能包含如下配置：
    {
	"name": "我的移动适配模板",
	"package": "mytemplate",
	"version": "1.0",
	"template_type": 1,
	"status": 0
}

  5. 设计和编写移动端模板： 移动端模板文件与 PC 端模板一样，使用 .html 作为文件后缀。您可以使用 AnQiCMS 支持的 Django 模板引擎语法，结合您的前端技术（如响应式 CSS、移动优先设计等）来构建移动端页面。请确保模板文件统一采用 UTF-8 编码，以避免乱码问题。

移动端模板的存放与管理

  • 文件路径：如前所述，所有的移动端模板都应位于 /template/你的模板包名称/mobile/ 目录下，并遵循与 PC 端相似的目录结构。
  • 静态资源：移动端模板中使用的 CSS、JavaScript 和图片等静态资源，可以统一存放在 /public/static/ 目录中。您可以在模板中通过相对路径引用这些资源，AnQiCMS 会正确解析。如果某些资源是移动端特有的，也可以创建 /public/static/mobile/ 目录来存放。
  • 后台设置：
    • 如果您选择 PC+手机独立站点模式（template_type: 2），则必须在 AnQiCMS 后台进行额外配置。请登录后台，导航至 后台设置 -> 全局功能设置。在这里，您会看到一个名为 “移动端地址” 的设置项。请将您的手机站域名（例如 m.yourdomain.com）填写到此处。确保该域名已正确解析到您的服务器。

确保移动网站正常显示的注意事项

为了让手机网站能够正常显示并提供良好的用户体验，请务必关注以下几点：

  1. template_type 配置：确保您的模板 config.json 文件中的 template_type 设置正确，这将决定 AnQiCMS 如何处理移动端访问。
  2. mobile 目录结构：移动端模板文件夹 mobile 内的结构应与 PC 端主模板文件夹内的结构保持一致。例如，如果 archive 下有 detail.html，那么 mobile/archive 下也应有 detail.html。
  3. 移动端地址设置：如果启用了 PC+手机独立站点模式，请务必在后台的全局功能设置中配置正确的“移动端地址”，并确保域名解析无误。
  4. 内容与样式适配：移动端模板的设计应充分考虑手机屏幕的特点，包括字体大小、图片尺寸、按钮交互、表单易用性等。使用移动优先的 CSS 样式和布局是关键。
  5. 清除系统缓存：在更改模板文件或后台配置后，记得进入 AnQiCMS 后台的 更新缓存 功能，清理系统缓存，确保最新的模板文件和配置能够生效。

通过遵循这些步骤和注意事项，您将能够有效地在 AnQiCMS 中创建和管理移动端模板，为您的用户提供卓越的手机网站体验。

常见问题 (FAQ)

  1. 我创建了 mobile 目录和模板文件，并在 config.json 中设置了 template_type: 1，但为什么手机访问时仍然显示 PC 版模板？ 这通常是因为 AnQiCMS 的缓存未更新，或者您的浏览器缓存了旧的页面。请务必登录 AnQiCMS 后台，找到“更新缓存”功能并执行，清理所有系统缓存。同时，尝试清除您手机浏览器的缓存，或使用手机的隐私/无痕模式访问网站进行测试。如果问题依然存在，请检查 mobile 目录下的模板文件命名和结构是否与 PC 端保持一致，确保 AnQiCMS 能够准确匹配到对应的移动模板。

  2. 移动端模板使用的静态资源（CSS、JS、图片）应该放在哪里？PC 端和移动端可以共用静态资源吗？ 是的，PC 端和移动端可以并且通常应该共用大部分静态资源。建议将通用的 CSS、JS 文件和图片等资源统一存放在 /public/static/ 目录下。在模板文件中，通过相对路径引用这些资源即可。如果某些样式或脚本只用于移动端，您可以为移动端模板创建独立的 CSS 或 JS 文件，并存放在 /public/static/mobile/ 这样的子目录中，然后在移动端模板中单独引入。这样既能提高资源复用率，又能保持文件组织的清晰。

  3. 如果我只打算做自适应网站（Responsive Design），还需要创建 mobile 目录和单独的移动端模板吗？ 不需要。如果您选择的是自适应模式（即 config.json 中的 template_type: 0），那么 AnQiCMS 不会去寻找 mobile 目录下的模板。在这种情况下，您的网站仅使用一套模板文件，并通过前端技术（如 CSS Media Queries）来适配不同设备。您只需确保这套模板本身具有良好的响应式设计，即可在手机上正常显示。创建 mobile 目录和单独的模板文件只适用于代码适配模式或 PC+手机独立站点模式。