随着智能手机的普及，移动端网站的用户体验已成为衡量网站成功与否的关键因素。一个设计精良的手机网站不仅能有效提升用户满意度，对于搜索引擎优化（SEO）也至关重要。AnQiCMS 充分考虑了这一需求，为您提供了灵活多样的移动端模板解决方案，尤其支持独立设计和部署手机端模板，让您的网站在不同设备上都能展现**姿态。

认识 AnQiCMS 的移动端模板策略

在 AnQiCMS 中，您可以根据网站的实际需求选择不同的移动端模板适配模式。这主要包括三种类型：

  1. 自适应模板： 这种模式下，您的网站会使用一套模板，通过 CSS 媒体查询等技术，让同一个页面内容根据访问设备的屏幕大小自动调整布局和样式。这种方式开发成本较低，但可能在极端情况下表现不尽人意。
  2. 代码适配模板： 在这种模式下，网站会识别用户设备，并为手机用户提供专门优化过的 HTML 代码结构。虽然仍使用相同的 URL，但后端会根据设备类型返回不同的模板内容。
  3. PC+手机端独立站点模式： 这正是我们今天要深入探讨的模式。它允许您为 PC 端和手机端分别设计和部署完全独立的模板，甚至可以为手机端绑定一个独立的域名（例如 m.yourdomain.com）。这种模式下，您可以为手机用户提供极致优化的体验，无论是内容布局、功能优先级还是交互设计，都能做到量身定制。AnQiCMS 的核心优势之一，就是能高效支持这种独立站点的管理。

第一步：规划您的移动端模板结构

要为手机端独立设计模板，首先需要在您的 AnQiCMS 模板目录中进行清晰的规划。每一套独立的模板都存放在 /template 目录下各自的文件夹中。例如，您可能有一个名为 default 的模板文件夹。

要启用 PC+手机端独立站点模式，您需要在该模板文件夹下的 config.json 文件中明确指定模板类型。找到 template_type 字段，将其设置为 2。这将告诉 AnQiCMS，您的这套模板将支持 PC 端和手机端独立运行，并且系统会在访问手机端时查找专门的手机模板文件。

{
	"name": "我的独立手机模板",
	"package": "my_mobile_template",
	"version": "1.0",
	"description": "专为手机端优化的独立模板",
	"author": "YourName",
	"homepage": "https://www.yourdomain.com",
	"created": "2023-10-26 10:00:00",
	"template_type": 2, // 关键设置：PC+手机端独立模式
	"status": 1
}

第二步：创建独立的手机端模板文件

当 template_type 被设置为 2 时，AnQiCMS 将会在您的模板文件夹内寻找一个名为 mobile 的子目录。这个 mobile 目录就是您存放所有手机端模板文件的地方。

它的内部结构应当与您的 PC 端模板结构保持一致，只是内容和设计会根据手机端的特点进行调整。例如：

  • 手机端首页： /template/您的模板名/mobile/index/index.html
  • 手机端文章详情页： /template/您的模板名/mobile/archive/detail.html
  • 手机端分类列表页： /template/您的模板名/mobile/category/list.html
  • 手机端公共部分（如头部、底部）： /template/您的模板名/mobile/bash.html 或 /template/您的模板名/mobile/partial/header.html

您可以根据实际需求，将 PC 端模板文件复制到 mobile 目录下，然后针对手机屏幕尺寸、触摸操作习惯以及更快的加载速度进行细致的修改。静态资源（如 CSS、JavaScript 和图片）仍然统一存放在 /public/static/ 目录下，并在模板中引用。

第三步：手机端模板内容的开发与调用

在手机端模板的开发过程中，您依然会沿用 AnQiCMS 简洁高效的 Django 模板引擎语法。这意味着您可以使用熟悉的 {{变量}} 来输出内容，以及 {% 标签 %} 来实现逻辑控制和数据调用。

开发手机模板时，需要特别关注以下几点：

  • 简化布局： 移除不必要的元素，采用单列或简洁的多列布局。
  • 优化图片： 使用 AnQiCMS 内置的图片处理功能，如自动压缩大图、转换为 WebP 格式，并在模板中利用 thumb 过滤器获取缩略图，确保图片加载速度。
  • 触控友好： 确保按钮、链接等可点击元素足够大，方便手指操作。
  • 内容精简： 手机用户通常阅读时间碎片化，您可以考虑在手机端显示更精炼的内容摘要，提供“查看更多”选项。

AnQiCMS 提供了丰富的模板标签，让您能够轻松调用各类数据：

  • 获取网站基本信息： 使用 {% system with name="SiteName" %} 来显示网站名称，{% system with name="MobileUrl" %} 来获取手机端网址。
  • 调用文章或产品列表/详情： {% archiveList %} 和 {% archiveDetail %} 是您展示核心内容的关键。
  • 显示分类导航： {% categoryList %} 和 {% navList %} 帮助构建清晰的导航结构。
  • 页面 TDK 信息： 确保手机端页面的 title、keywords 和 description 也经过优化，可以使用 {% tdk with name="Title" %} 等标签获取。

通过这些标签，您可以将后台管理的内容灵活地呈现在手机端模板中，并根据手机用户的阅读习惯进行优化排版。

第四步：配置移动端域名

当您选择 PC+手机端独立站点模式时，通常会为手机端分配一个独立的域名，例如 m.yourdomain.com。这一步是确保 AnQiCMS 能够识别手机访问并加载相应模板的关键。

  1. DNS 解析： 首先，您需要在域名注册商处将 m.yourdomain.com 解析到您的服务器 IP 地址。
  2. AnQiCMS 后台设置： 登录 AnQiCMS 后台，前往 全局功能设置。找到 移动端地址 字段，在这里填写您为手机端网站准备的独立域名，例如 https://m.yourdomain.com。这一设置将告知 AnQiCMS 在检测到移动设备访问时，如何重定向或识别。
  3. Web 服务器配置（Nginx/Apache）： 如果您使用了 Nginx 或 Apache 作为 Web 服务器，可能还需要配置反向代理，将手机域名 m.yourdomain.com 的请求指向 AnQiCMS 所在的端口（默认为 8001）。这通常涉及在服务器配置中添加 server 块（Nginx）或 VirtualHost 块（Apache），并将 proxy_pass 指向 AnQiCMS 端口。具体的配置方式可以参考 AnQiCMS 官方文档中关于 Nginx 或 Apache 反向代理的说明。

完成这些配置后，当用户通过移动设备访问您的主域名时，AnQiCMS 会自动判断并将其重定向到您配置的移动端地址，并加载 /mobile 目录下的独立模板。

第五步：部署与测试

模板文件创建并配置完成后，将您的模板文件夹（包含 mobile 子目录和 config.json）上传到 AnQiCMS 系统的 /template 目录下。

接下来，登录 AnQiCMS 后台，前往 模板设计 模块，选择并启用您刚刚配置好的独立手机