AnQiCMS 致力于为用户提供高效、灵活的内容管理体验，当然也充分考虑了网站在不同设备上的展现需求，特别是日益重要的移动端显示。让您的 AnQiCMS 网站内容在手机端实现自适应显示，并非难事。AnQiCMS 提供了多种灵活的策略，确保您的网站无论在何种设备上都能提供出色的用户体验。

AnQiCMS 的灵活适配之道

AnQiCMS 深知移动设备多样化的显示需求，因此内置了三种主要的网站适配模式，您可以根据自己的网站定位和运营策略来选择最适合的方式：

  1. 自适应模式（Responsive Design） 这是目前最常用也是最推荐的方式。在这种模式下，网站采用一套代码和一套模板，通过 CSS 媒体查询等技术，根据用户设备的屏幕尺寸、分辨率等特性，自动调整布局、字体大小、图片尺寸等，使内容在不同设备上都能良好地显示。 优势： 维护成本低，一套代码库，一次性开发；对搜索引擎友好，有助于 SEO 优化，因为所有内容都在同一个 URL 下。 AnQiCMS 的支持： 只要您选择或自行开发的模板是基于响应式设计原则构建的，AnQiCMS 就能完美支持。您无需进行额外的后台设置，系统会自动交付响应式页面。

  2. 代码适配模式（Code Adaptation） 在这种模式下，AnQiCMS 会根据用户访问设备的类型（例如是电脑还是手机），在服务器端动态选择并提供不同的模板文件。这意味着您可以为手机用户提供一个完全定制化的移动端界面，而 PC 端用户则看到传统的桌面版页面。 优势： 能够为不同设备提供更精准、更优化的用户体验，移动端页面可以去除桌面端不必要的功能和元素，加载速度更快。 AnQiCMS 的支持： AnQiCMS 允许您在模板目录下创建 mobile/ 子目录，并在其中放置专门为移动端设计的模板文件。当系统检测到移动设备访问时，便会优先调用 mobile/ 目录下的对应模板。

  3. PC + 手机端独立站点模式（Separate PC + Mobile Sites） 这是最高级的适配方式，它意味着您的 PC 网站和手机网站是完全独立的两个站点，拥有不同的域名或子域名（例如 www.yourdomain.com 和 m.yourdomain.com）。每个站点都有自己的独立代码和模板。AnQiCMS 强大的多站点管理功能为此提供了天然的支持。 优势： 极高的灵活性和定制化程度，可以根据桌面和移动设备的特点，在功能、内容和交互上做出最大程度的区分和优化。 AnQiCMS 的支持： 您可以通过 AnQiCMS 的多站点管理功能创建两个独立的站点，一个作为 PC 站，一个作为移动站。同时，在全局设置中，您可以指定移动端网站的访问地址，系统会根据访问设备自动进行重定向。

实操指南：让您的网站内容动起来

了解了 AnQiCMS 提供的适配策略后，我们来看看具体的配置和操作步骤：

第一步：选择合适的适配策略

首先，明确您的网站需要哪种适配方式。对于大多数中小企业和自媒体而言，如果您的模板是响应式的，那么“自适应模式”就已经足够。如果您对移动端体验有更高的要求，希望在手机上呈现更简洁、更专注的内容，那么“代码适配模式”或“PC+手机端独立站点模式”将提供更大的发挥空间。

第二步：准备您的模板

  • 对于自适应模式： 确保您当前使用的模板本身就是响应式设计的。这意味着模板的 CSS 文件中应包含 @media 查询规则，以适应不同屏幕宽度。如果您使用的是 AnQiCMS 官方或第三方提供的模板，通常会明确说明是否支持响应式。
  • 对于代码适配模式和 PC+手机端独立站点模式： 这两种模式都需要为移动端准备一套独立的模板。
    • 在您的网站模板根目录（通常是 /template/您的模板名）下，创建一个名为 mobile/ 的子目录。
    • 将您希望在手机端显示的页面（例如首页 index/index.html、文章详情页 archive/detail.html、列表页 archive/list.html 等）的移动版模板文件放入 mobile/ 目录中。这些移动版模板的文件名和层级结构应与 PC 端模板保持一致，只是多了一层 mobile/ 前缀。

第三步：后台系统设置：关键配置一步到位

在 AnQiCMS 的后台管理界面，进行模式选择和相关配置：

  1. 登录后台： 访问您的 AnQiCMS 后台（通常是 您的域名/system/）。
  2. 进入全局设置： 在左侧导航菜单中找到“后台设置”，点击进入“全局设置”。
  3. 设置网站模式： 在全局设置页面，您会看到一个名为“网站模式”的选项。
    • 如果您选择自适应模式，请确保选择“自适应”选项。
    • 如果您选择代码适配模式，请选择“代码适配”选项。
    • 如果您选择PC+手机端独立站点模式，请选择“电脑+手机”选项。
  4. 配置移动端地址（仅限 PC+手机端独立站点模式）： 如果您选择了“电脑+手机”模式，页面下方会出现“移动端地址”的输入框。请在此处填写您移动站点的完整域名，例如 https://m.yourdomain.com。请确保该域名已正确解析到您的服务器。

第四步：内容与图片优化：提升移动端加载速度与用户体验

无论您采用哪种适配模式，对内容和图片进行优化都是提升移动端用户体验的关键：

  • 图片优化：

    • 在“后台设置”下的“内容设置”中，您可以找到“是否启动 Webp 图片格式”的选项。开启此功能可将上传的 JPG、PNG 图片自动转换为体积更小的 WebP 格式，显著减少移动端图片加载时间。
    • “是否自动压缩大图”和“自动压缩到指定宽度”可以帮助您在图片上传时自动缩小尺寸，避免移动端加载过大的图片。
    • “缩略图处理方式”和“缩略图尺寸”可以精细控制生成缩略图的策略，确保在列表页等地方显示大小适中的图片。
    • 在模板中调用图片时，可以利用 archiveDetail 等标签提供的 lazy="data-src" 参数，实现图片的懒加载，当用户滚动到图片时才进行加载，进一步提升页面性能。

  • 内容结构优化：

    • 保持段落简短，信息密度适中，避免大段文字堆砌。
    • 使用清晰的标题和副标题（如 h2, h3）来划分内容，方便用户快速浏览。
    • AnQiCMS 丰富的富文本编辑器功能可帮助您轻松排版内容，确保在小屏幕上也能清晰可读。Markdown 编辑器也方便内容创作。

不可忽视的 SEO 考量

在实现移动端自适应显示的同时，也要关注搜索引擎优化。AnQiCMS 提供了强大的 SEO 工具，可以与您的移动适配策略协同工作：

  • 规范链接（Canonical URL）： 对于代码适配和 PC+手机端独立站点模式，确保您的移动端页面通过 link rel="canonical" 标签指向对应的桌面版页面，或桌面版页面指向移动版页面，以避免搜索引擎将其视为重复