在构建和运营网站时，如何确保内容能够在各种设备上优雅且高效地呈现，是每个运营者都需要面对的挑战。AnQiCMS 作为一个功能丰富的企业级内容管理系统，充分考虑了这一点，提供了自适应、代码适配和PC+手机端独立站点这三种灵活的模板模式，让我们能够根据实际需求做出**选择。

接下来，我们将深入探讨这三种模式的特点、应用场景以及在 AnQiCMS 中如何配置和运用，希望能帮助您找到最适合自己网站的展现方式。

1. 自适应模式（Responsive Design）

自适应模式是最为常见和推荐的一种方式。它指的是网站使用一套代码、一套模板来适应不同屏幕尺寸的设备。无论用户是用电脑、平板还是手机访问，网站的内容和布局都会根据设备的屏幕大小自动调整，以提供**的阅读和交互体验。

特点与优势：

  • 统一管理，维护成本低： 只需要开发和维护一套模板，大大减少了内容更新和系统维护的工作量。
  • SEO友好： 网站内容通常拥有单一的URL地址，这符合搜索引擎的推荐原则，避免了重复内容问题，有利于网站的SEO排名。
  • 用户体验连贯： 用户在不同设备间切换时，网站的品牌形象和功能保持一致，体验更加流畅。

适用场景：

  • 大多数中小型企业官网、博客、资讯站等。
  • 内容结构相对简单，不需要在不同设备上呈现差异化很大的内容。
  • 注重成本效益和开发效率的项目。

在 AnQiCMS 中的应用： 在 AnQiCMS 中启用自适应模式非常直接。您只需在模板目录下的 config.json 文件中，将 template_type 字段设置为 0 即可。系统会默认使用您提供的这套模板，并期望它能通过CSS媒体查询等技术自行适应各种屏幕。

{
	"name": "我的自适应模板",
	"package": "my-responsive-template",
	"version": "1.0",
	"template_type": 0, // 0表示自适应模式
	"status": 1
}

2. 代码适配模式（Code-Adaptive Design / Dynamic Serving）

代码适配模式介于自适应和独立站点之间。它同样使用单一的URL地址，但在服务器端会根据检测到的用户设备类型（例如通过用户代理User-Agent），向不同设备发送不同的HTML、CSS代码或内容。这意味着，虽然URL不变，但手机用户和PC用户可能看到的是完全不同的页面结构。

特点与优势：

  • 更精细的控制： 相较于纯粹的自适应，代码适配允许您为不同设备提供更定制化的体验，例如在手机端精简部分功能或内容，以提升加载速度和可用性。
  • URL一致性： 保持了单一URL的优势，避免了301重定向的开销和潜在的SEO问题。
  • 性能优化： 可以为移动设备提供更轻量级的代码和资源，有效提升移动端页面的加载速度。

适用场景：

  • 对移动端用户体验有特殊优化需求，但又想保持URL一致性的网站。
  • 电商网站：PC端可能展示大量产品细节，而手机端则更侧重于快速浏览和购买流程。
  • 内容展示逻辑在不同设备上需要有较大差异的复杂应用。

在 AnQiCMS 中的应用： 启用代码适配模式时，您需要在模板目录中创建一个名为 mobile 的子目录。这个 mobile 目录的内部结构需要与您的PC端模板目录保持一致，用来存放针对移动设备优化的模板文件。

在 config.json 文件中，将 template_type 字段设置为 1。AnQiCMS 在检测到移动设备访问时，便会自动调用 mobile 目录下的对应模板。

{
	"name": "我的代码适配模板",
	"package": "my-code-adaptive-template",
	"version": "1.0",
	"template_type": 1, // 1表示代码适配模式
	"status": 1
}

例如，如果您的PC端首页模板是 index/index.html，那么手机端的首页模板就应该是 mobile/index/index.html。

3. PC+手机端独立站点模式（Separate Mobile Site）

PC+手机端独立站点模式，顾名思义，是为PC端和手机端分别搭建完全独立的网站。它们通常拥有不同的域名（例如 www.example.com 和 m.example.com），甚至可能在内容和功能上都有显著差异。

特点与优势：

  • 极致的定制化： 这种模式提供了最大的灵活性，您可以完全独立地设计和运营PC端和移动端网站，以满足各自独特的业务目标和用户需求。
  • 针对性优化： 可以为特定平台（如仅限移动端的APP下载、专属活动）进行高度定制的内容和营销。
  • 内容策略独立： 能够根据设备类型提供完全不同的内容，例如在移动端展示更简短、更直接的信息。

适用场景：

  • 大型企业或品牌，拥有足够资源维护两套独立系统。
  • 移动端用户行为与PC端差异巨大，需要完全不同的产品或服务呈现方式。
  • 有特定的移动端营销策略或功能需求，无法通过其他两种模式实现。

在 AnQiCMS 中的应用： 在 AnQiCMS 中配置独立站点模式相对复杂一些，因为它涉及多站点管理和域名配置。

首先，您需要为手机端准备一套独立的模板，并同样将其放置在模板目录下的 mobile 子目录中。 在 config.json 中，将 template_type 字段设置为 2。

{
	"name": "我的独立站点模板",
	"package": "my-separate-site-template",
	"version": "1.0",
	"template_type": 2, // 2表示PC+手机端独立站点模式
	"status": 1
}

更重要的是，您需要在 AnQiCMS 的后台 系统设置 -> 全局功能设置 中，明确设置 移动端地址（MobileUrl），填写您为手机端准备的独立域名，例如 m.example.com。同时，您还需要在服务器层面将这个手机域名解析并绑定到 AnQiCMS 所在的服务器上。

SEO注意事项： 由于PC和移动端使用不同URL，为避免搜索引擎误判为重复内容，并帮助其正确理解不同版本间的关系，您需要正确使用 canonical 和 hreflang 标签：

  • canonical 标签： 在移动端页面中，通过 canonical 标签指向对应的PC端页面（如果PC端是主要版本），或者指向移动端自身（如果是移动端优先）。AnQiCMS 提供 {% tdk with name="CanonicalUrl" %} 标签来帮助您动态生成规范链接。
  • hreflang 标签： 如果您的网站同时支持多语言或针对不同地区，可以使用 hreflang 标签明确声明各语言/区域版本之间的关系。AnQiCMS 提供了 {% languages websites %} 标签来帮助您在模板中添加这些信息。

如何选择最适合您的模式？

选择哪种模式，通常需要权衡以下几个因素：

  • 开发与维护成本： 自适应最低，代码适配次之，独立站点最高。
  • 设计自由度与用户体验定制化： 自适应最低，代码适配居中，