How to configure AnQiCMS so that it displays correctly as an independent mobile site on mobile devices?

In AnQiCMS, to provide mobile device users with a better access experience, we can configure the website to display independent site content on mobile devices.This model of independent operation for PC and mobile end, not only helps to design and optimize in detail for different devices, but also can improve the mobile end's SEO performance in specific scenarios.

AnQiCMS provides us with various website display modes, including the "PC+mobile independent site" mode, which is the basis for achieving independent content display on mobile devices.Next, we will discuss step by step how to configure AnQiCMS to make your website look great on mobile devices.

Understand AnQiCMS's mobile display mode

AnQiCMS supports three main website display modes:

1. Adaptive modeThis means that your website template will automatically adjust the layout and style according to the screen size of the device being accessed.A PC and mobile share the same HTML structure, achieving different effects through CSS media queries.
2. Code Adaptation ModeIn this mode, the website will judge the type of device accessing through code, and then dynamically load different template files or provide different content segments.
3. PC + mobile independent site modeThis is the pattern we will introduce in detail today. It allows us to set separate domains and a completely independent set of templates for the PC and mobile ends.When the user accesses through PC, the PC site content is displayed; when accessed through mobile phone, it will jump to the mobile site domain and display the mobile site template content.The advantage of this model lies in providing mobile users with highly customized experiences, free from the constraints of PC design, and better control over the page loading speed and interaction logic on mobile devices.

Configure the mobile end address of AnQiCMS backend

To enable the PC+mobile independent site mode, you first need to perform core configuration in the AnQiCMS backend.

Log in to the AnQiCMS backend management interface and find“Background Settings”and click onGlobal function settings. Here, you will see a name called“Mobile end address”option. Please enter the independent domain name you plan for the mobile end site here, for examplem.yourdomain.com.

Important reminderBefore you fill in the mobile end address, make sure that this mobile domain has been correctly resolved to your server IP address.If the domain name resolution is not completed or incorrect, subsequent access and configuration will not take effect.

Prepare the mobile end template

The template design of AnQiCMS demonstrates its flexibility, supporting independent templates for mobile devices.

1. Choose the correct template type.: In the root directory of the template package you are using, there is usually oneconfig.jsonfile. Please edit this file, settemplate_typeThe value of the field is set to2to enable the "Computer+Mobile" mode.

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

2. Createmobiletemplate directoryIn the root directory of the template you are currently using (for example/template/default/),mobilein your template folder. ThismobileThe directory will be used exclusively to store your mobile template files.

3. Copy and optimize the template file:mobileThe file structure within the directory should be consistent with the PC template directory structure. For example, if your PC homepage template isindex/index.html, then the mobile homepage template should bemobile/index/index.html. You need to copy the PC template file to the correspondingmobileIn the subdirectory, and optimized and adjusted for mobile device screen size, operation habits, and performance requirements.This means you can design a completely different page layout, interactive elements, and even display content with different priorities for mobile devices.

   For example, PC templates may include complex navigation menus, large image sliders, and on mobile templates, you may need to simplify them to hamburger menus, sliding image displays that adapt to the screen, and more concise text content.

Web server (Nginx/Apache) configuration: traffic distribution strategy

To allow the PC and mobile domain names to access the same AnQiCMS instance but display different content (distinguished by templates), we need to configure reverse proxy on the web server.This ensures that when the user accesses the PC domain name, the server loads the PC template;When accessing the mobile domain, the server loads the mobile template.

Here is an example using Nginx to demonstrate its configuration method. The configuration principle of Apache is similar, both of which are implemented through virtual hosts (VirtualHost) and reverse proxy.

Nginx configuration example

Assuming your AnQiCMS is running on the server's8001Port, the PC end domain name iswww.yourdomain.com, the mobile end domain name ism.yourdomain.com. You need to add configuration for these two domains separately in the Nginx configuration fileserverthe block.

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

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

    location @AnqiCMS {
        # 将请求代理到AnQiCMS的内部端口
        proxy_pass http://127.0.0.1:8001; 
        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 http://127.0.0.1:8001; 
        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 configuration instructions

For Apache servers, you need to configure an independent one for eachVirtualHost. In eachVirtualHostconfigureProxyPassandProxyPassReverseinstructions, to reverse proxy requests to the running port of 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 / http://127.0.0.1:8001/ # 反向代理到AnQiCMS
    ProxyPassReverse / http://127.0.0.1:8001/

    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 / http://127.0.0.1:8001/ # 反向代理到AnQiCMS
    ProxyPassReverse / http://127.0.0.1:8001/

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

After completing the Web server configuration, don't forget to restart the Nginx or Apache service to make the changes take effect.

Comprehensive testing and launch

After all configurations are complete, be sure to perform a comprehensive test:

1. Visit the PC domain: Visit in the computer browserwww.yourdomain.comCheck if the page is displayed normally, whether the functions are running properly, and whether the PC template is being used.
2. Access the mobile domainIn a mobile browser or emulator