AnQiCMS 支持的自适应、代码适配、PC+手机端模板模式应如何选择和应用？

📅 👁️ 65

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

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

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

特点与优势：

适用场景：

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

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

代码适配模式介于自适应和独立站点之间。它同样使用单一的URL地址，但在服务器端会根据检测到的用户设备类型（例如通过用户代理User-Agent），向不同设备发送不同的HTML、CSS代码或内容。这意味着，虽然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。

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

特点与优势：

适用场景：

在 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 %} 标签来帮助您在模板中添加这些信息。

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