如何配置AnQiCMS，使其在移动设备上正确显示为独立的移动端站点内容？

在AnQiCMS中，为了给移动设备用户提供更优质的访问体验，我们可以将网站配置为在移动端显示独立的站点内容。这种PC端与移动端独立运营的模式，不仅有助于针对不同设备进行精细化设计和优化，还能在特定场景下提升移动端的SEO表现。

AnQiCMS为我们提供了多种网站显示模式，其中包括了“PC+手机独立站点”模式，这正是实现移动端独立内容展示的基础。接下来，我们将逐步探讨如何配置AnQiCMS，让您的网站在移动设备上焕发新颜。

理解AnQiCMS的移动端显示模式

AnQiCMS支持三种主要的网站显示模式：

1. 自适应模式：这意味着您的网站模板会根据访问设备的屏幕大小自动调整布局和样式。PC和移动端共用一套HTML结构，通过CSS媒体查询实现不同效果。
2. 代码适配模式：此模式下，网站会通过代码判断访问设备类型，然后动态加载不同的模板文件或提供不同的内容片段。
3. PC+手机独立站点模式：这是我们今天要详细介绍的模式。它允许我们为PC端和移动端分别设置独立的域名和一套完全独立的模板。当用户通过PC访问时，显示PC站内容；当通过手机访问时，则跳转到移动站域名，并显示移动站模板内容。这种模式的优势在于可以为移动用户提供高度定制化的体验，不受PC端设计束缚，并且能更好地控制移动端的页面加载速度和交互逻辑。

配置AnQiCMS后台的移动端地址

要启用PC+手机独立站点模式，首先需要在AnQiCMS的后台进行核心配置。

进入AnQiCMS后台管理界面，找到“后台设置”，点击其中的“全局功能设置”。在这里，您会看到一个名为“移动端地址”的选项。请在此处填写您为移动端站点规划的独立域名，例如m.yourdomain.com。

重要提示：在您填写移动端地址之前，务必确保这个移动端域名已经正确解析到您的服务器IP地址。如果域名解析未完成或不正确，后续的访问和配置都将无法生效。

准备移动端模板

AnQiCMS的模板设计是其灵活性的体现，支持为移动端提供独立模板。

1. 选择正确的模板类型：在您使用的模板包根目录下，通常会有一个config.json文件。请编辑此文件，将template_type字段的值设置为2，表示启用“电脑+手机”模式。

   
   {
   	"name": "我的模板",
   	"package": "my_template",
   	"version": "1.0",
   	// ... 其他配置 ...
   	"template_type": 2, // 重点：设置为2，启用电脑+手机模式
   	"status": 1
   }
   

2. 创建mobile模板目录：在您当前使用模板的根目录（例如/template/default/）下，创建一个名为mobile的子目录。这个mobile目录将专门用于存放您的移动端模板文件。

3. 复制并优化模板文件：mobile目录内的文件结构应该与PC端模板的目录结构保持一致。例如，如果您的PC端首页模板是index/index.html，那么移动端首页模板就应该是mobile/index/index.html。您需要将PC端模板文件复制到对应的mobile子目录中，并针对移动设备的屏幕尺寸、操作习惯和性能要求进行优化和调整。这意味着您可以为移动端设计完全不同的页面布局、交互元素，甚至展示不同优先级的内容。

   例如，PC端模板可能包含复杂的导航菜单、大幅图片轮播，而在移动端模板中，您可能需要将其简化为汉堡菜单、适应屏幕的滑动图片展示，以及更精简的文字内容。

Web服务器（Nginx/Apache）配置：流量分发策略

要让PC和移动端域名分别访问到AnQiCMS的同一个实例，但显示不同的内容（通过模板区分），我们需要在Web服务器层面进行反向代理配置。这确保了当用户访问PC域名时，服务器加载PC模板；访问移动域名时，服务器加载移动模板。

这里以Nginx为例，演示其配置方法。Apache的配置原理类似，都是通过虚拟主机（VirtualHost）和反向代理来实现。

Nginx配置示例

假设您的AnQiCMS运行在服务器的8001端口，PC端域名是www.yourdomain.com，移动端域名是m.yourdomain.com。您需要在Nginx的配置文件中为这两个域名分别添加server块。

# PC端域名配置
server {
    listen 80;
    server_name www.yourdomain.com; # 您的PC端域名

    # 网站根目录指向AnQiCMS的public目录
    root /www/wwwroot/anqicms.com/public; 

    location @AnqiCMS {
        # 将请求代理到AnQiCMS的内部端口
        proxy_pass https://www.anqicms.com; 
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    }

    # 伪静态规则，确保所有非静态文件请求都由AnQiCMS处理
    location / {
       try_files $uri $uri/index.html @AnqiCMS;
    }

    access_log /var/log/nginx/www.yourdomain.com_access.log; # 访问日志
    error_log /var/log/nginx/www.yourdomain.com_error.log;   # 错误日志
}

# 移动端域名配置
server {
    listen 80;
    server_name m.yourdomain.com; # 您的移动端域名

    # 网站根目录同样指向AnQiCMS的public目录
    root /www/wwwroot/anqicms.com/public; 

    location @AnqiCMS {
        # 将请求代理到AnQiCMS的内部端口
        proxy_pass https://www.anqicms.com; 
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    }

    # 伪静态规则
    location / {
       try_files $uri $uri/index.html @AnqiCMS;
    }

    access_log /var/log/nginx/m.yourdomain.com_access.log; # 访问日志
    error_log /var/log/nginx/m.yourdomain.com_error.log;   # 错误日志
}

Apache配置说明

对于Apache服务器，您需要为每个域名配置一个独立的VirtualHost。在每个VirtualHost中，配置ProxyPass和ProxyPassReverse指令，将请求反向代理到AnQiCMS的运行端口。

# PC端域名配置
<VirtualHost *:80>
    ServerName www.yourdomain.com
    DocumentRoot "/www/wwwroot/anqicms.com/public" # 网站根目录

    ProxyRequests Off
    ProxyPreserveHost On
    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>
    ProxyPass / https://www.anqicms.com/ # 反向代理到AnQiCMS
    ProxyPassReverse / https://www.anqicms.com/

    ErrorLog "logs/www.yourdomain.com-error_log"
    CustomLog "logs/www.yourdomain.com-access_log" common
</VirtualHost>

# 移动端域名配置
<VirtualHost *:80>
    ServerName m.yourdomain.com
    DocumentRoot "/www/wwwroot/anqicms.com/public" # 网站根目录

    ProxyRequests Off
    ProxyPreserveHost On
    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>
    ProxyPass / https://www.anqicms.com/ # 反向代理到AnQiCMS
    ProxyPassReverse / https://www.anqicms.com/

    ErrorLog "logs/m.yourdomain.com-error_log"
    CustomLog "logs/m.yourdomain.com-access_log" common
</VirtualHost>

完成Web服务器配置后，别忘了重启Nginx或Apache服务，使更改生效。

全面测试与上线

在所有配置完成后，务必进行全面的测试：

1. 访问PC端域名：在电脑浏览器中访问www.yourdomain.com，检查页面是否正常显示，功能是否正常运行，以及是否使用的是PC端模板。
2. 访问移动端域名：在手机浏览器或模拟器