在当前的互联网环境中，用户通过各种设备浏览网站已成为常态，如何让您的网站在不同设备上都能呈现出**效果，是网站运营成功的关键之一。安企CMS（AnQiCMS）深谙此道，提供了灵活多样的显示模式配置，让您可以根据实际需求，轻松实现网站在自适应、代码适配或PC+Mobile独立站点间的切换。

这篇文章将详细带您了解如何在安企CMS中配置这些显示模式，确保您的内容在任何屏幕上都光彩照人。

核心配置：config.json 中的 template_type

在安企CMS中，控制网站显示模式的核心在于您的模板文件夹内的 config.json 文件。这个文件就像您网站前端的“大脑”，其中的 template_type 字段负责告诉系统应如何渲染您的页面。

您可以在您所使用的模板的根目录下找到 config.json 文件，例如 /template/您的模板名称/config.json。打开它，您会看到一个类似于这样的字段：

{
	"name": "默认模板",
	"package": "default",
	"version": "1.0",
	"description": "系统默认模板",
	"author": "kandaoni.com",
	"homepage": "https://www.kandaoni.com",
	"created": "2022-05-10 22:29:00",
	"template_type": 0, // 这里的数值是关键
	"status": 0
}

template_type 字段接受三个不同的数值，分别对应安企CMS支持的三种显示模式：

  • 0: 自适应模式
  • 1: 代码适配模式
  • 2: PC+Mobile独立站点模式

了解了这一点，我们就可以逐一探讨如何配置和利用这些模式了。

1. 自适应模式（template_type: 0）

自适应模式是目前最常见的一种网站设计方式。它通过一套统一的HTML结构和CSS媒体查询（Media Queries），让网站内容和布局能够根据访问设备的屏幕尺寸和方向自动调整。

如何配置： 只需在您的模板 config.json 文件中，将 template_type 的值设置为 0 即可。

模板制作： 在这种模式下，您只需要设计一套模板文件。所有的页面（如首页、文章详情页、分类列表页等）都使用这套模板。在模板的CSS文件中，您会利用 @media 规则来定义不同屏幕宽度下的样式，从而实现元素的缩放、重排或隐藏。安企CMS会直接使用这套模板渲染所有访问。

适用场景： 如果您希望通过一套代码维护所有设备显示，并具备现代网页设计经验，自适应模式是理想的选择。它的维护成本相对较低，且能提供较好的SEO效果，因为所有设备访问的都是同一个URL。

2. 代码适配模式（template_type: 1）

代码适配模式，有时也被称为响应式网站的“服务器端组件适配”，它允许网站在服务器端根据用户访问的设备类型，动态地选择并提供不同的HTML片段或模板文件，但所有设备仍然通过同一个URL访问。这意味着PC端和移动端虽然看到的内容可能不同，但网址是保持一致的。

如何配置： 在您的模板 config.json 文件中，将 template_type 的值设置为 1。

模板制作： 这是代码适配模式的关键所在。当 template_type 设置为 1 时，您需要在主模板目录下创建一个名为 mobile 的子目录。

  • 主模板目录 (/template/您的模板名称/) 存放PC端默认的模板文件。
  • mobile 子目录 (/template/您的模板名称/mobile/) 存放移动设备访问时需要特殊适配的模板片段或完整的移动端页面模板。

例如，如果您想让移动端首页和PC端首页有所不同，可以在 mobile 目录下创建 index/index.html。系统检测到移动设备访问时，会优先使用 mobile/index/index.html 来渲染首页，而PC端则继续使用主目录下的 index/index.html。对于没有在 mobile 目录中找到对应模板的页面，系统会自动回退到使用主目录中的模板。这种设计让您能够针对移动设备进行更精细的优化，而无需更改URL。

适用场景： 当您需要在不同设备上提供截然不同的用户体验或内容结构，但又希望保持URL统一，并优化SEO时，代码适配模式是一个很好的选择。例如，移动端可能需要更简洁的导航和操作，而PC端则可以展示更多复杂信息。

3. PC+Mobile独立站点模式（template_type: 2）

PC+Mobile独立站点模式是指为PC端和移动端分别搭建两套独立的网站，它们通常拥有不同的域名（例如 www.example.com 和 m.example.com），并使用完全独立的模板和内容结构。

如何配置：

  1. 模板 config.json： 将您的模板 config.json 文件中，template_type 的值设置为 2。
  2. 后台设置： 除了模板配置，您还需要在安企CMS后台进行额外设置。
    • 登录后台，导航到 “后台设置” -> “全局功能设置”。
    • 找到 “移动端地址” 字段，在这里填入您的移动站点的完整域名，例如 https://m.example.com。
    • 请确保您的移动站点域名已经正确解析并绑定到安企CMS的服务器上。

模板制作： 与代码适配模式类似，您需要在主模板目录下创建一个名为 mobile 的子目录。

  • 主模板目录 (/template/您的模板名称/) 将作为您的PC端网站的完整模板。
  • mobile 子目录 (/template/您的模板名称/mobile/) 则需要包含完整的移动端网站模板结构，包括 index/index.html、archive/detail.html、category/list.html 等所有移动端页面所需的模板文件。 系统会根据访问设备和配置的“移动端地址”，将用户重定向到相应的站点。

适用场景： 当您对PC端和移动端的用户体验有极其严格和差异化的要求，甚至可能提供完全不同的功能模块时，独立站点模式会是您的首选。它允许最大的设计自由度和性能优化空间，但相对而言，维护成本和SEO优化复杂度也会更高。

部署后的小贴士

无论您选择哪种模式，完成配置后，请务必进行以下操作：

  1. 清除缓存： 登录安企CMS后台，点击左侧菜单的“更新缓存”，确保新的配置能够即时生效。
  2. 多设备测试： 使用真实的PC、手机和平板设备，或利用浏览器的开发者工具模拟不同设备，全面测试网站在各种情况下的显示效果和功能。

安企CMS的这些灵活显示模式，旨在帮助您更高效地管理和分发内容，无论您的目标用户使用何种设备，都能获得优质的访问体验。选择最适合您业务需求的模式，开启您的内容运营之旅吧！

常见问题 (FAQ)

Q1: 我应该如何选择适合我的网站的显示模式？ A1: 这主要取决于您的设计和维护策略。如果您预算有限，且内容布局在不同设备上差异不大，推荐选择自适应模式，维护成本最低。如果您需要针对移动端提供完全不同的交互或内容，但又想保持URL统一以优化SEO，那么代码适配模式是更好的选择。而如果PC和移动端是两个完全独立的业务或用户群体，需要最大程度的定制和性能优化，且不介意更高的维护成本和SEO复杂性，可以选择PC+Mobile独立站点模式。

Q2: 配置完显示模式后，前台样式没有变化，或者部分页面显示异常，该怎么办？ A2: 遇到这种情况，首先请确保您已在安企CMS后台点击了“更新缓存”。浏览器缓存也可能导致问题，请尝试清空浏览器缓存或使用无痕模式访问。其次，检查 config.json 文件中的 template_type 值是否正确，并且对于代码适配或独立站点模式，确认 mobile 目录下的模板文件命名和结构是否符合预期，特别是路径是否与PC端模板对应。如果是PC+Mobile独立站点模式，还要检查后台“全局功能设置”中的“移动端地址”是否填写正确且域名已解析。

Q3: 代码适配模式和PC+Mobile独立站点模式的 mobile 目录有什么区别？ A3: 两种模式