In AnQiCMS, in order to provide users with mobile devices a better access experience, we can configure the website to display independent site content on mobile devices.This PC and mobile independent operation mode not only helps to carry out refined design and optimization for different devices, but also can improve the mobile SEO performance in specific scenarios.

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

Understand the mobile display mode of AnQiCMS

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.PC and mobile share a set of HTML structure, and different effects are achieved through CSS media queries.
  2. Code Adaptation Mode：In this mode, the website will judge the type of accessing device through code, and then dynamically load different template files or provide different content segments.
  3. PC+手机独立站点模式This is the pattern we will introduce in detail today.It allows us to set independent domains and a completely independent template for PC and mobile platforms.When the user accesses via PC, the PC site content is displayed; if accessed via mobile phone, then jump to the mobile site domain, and display the mobile site template content.The advantage of this mode is that it can provide highly customized experiences for mobile users, free from the constraints of PC-side design, and can better control the page loading speed and interaction logic on the mobile side.

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.

Enter the AnQiCMS background management interface, find“Backend Settings”and click on“Global Function Settings”Here, you will see a name asthe option of 'Mobile End Address'Please enter the independent domain name you plan for the mobile site endpoint, for examplem.yourdomain.com.

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

Prepare the mobile template

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

  1. Choose the correct template typeIn the root directory of the template package you are using, there is usually oneconfig.jsonfile. Please edit this file, andtemplate_typefield to2enables the "Computer + Phone" 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/Below, create a template file namedmobileThis is a subdirectory. ThismobileThe directory will be used exclusively to store your mobile template files.

  3. Copy and optimize the template files:mobileThe file structure within the catalog should be consistent with the directory structure of the PC template. For example, if your PC homepage template isindex/index.htmlThen the mobile home page template should bemobile/index/index.html. You need to copy the PC template file to the correspondingmobileIn the subdirectory, and optimize and adjust for the screen size, operation habits, and performance requirements of mobile devices.This means you can design completely different page layouts, interactive elements, and even prioritize different content for mobile devices.

    For example, the PC template may contain complex navigation menus, large image sliders, while in the mobile template, you may need to simplify it to a hamburger menu, sliding image display adapted to the screen, and more concise text content.

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

To allow PC and mobile domain names to access the same instance of AnQiCMS with different content (distinguished by templates), we need to perform reverse proxy configuration at the web server level.This ensures that when the user accesses the PC domain name, the server loads the PC template; when accessing the mobile domain name, 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 are implemented through VirtualHost and reverse proxy.

Nginx configuration example

Assuming your AnQiCMS is running on the server8001Port, the PC domain name iswww.yourdomain.com, the mobile domain name ism.yourdomain.com. You need to add configurations for both these domain names 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 each domain.VirtualHostIn eachVirtualHostconfigurationProxyPassandProxyPassReversedirective, 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>

Complete the Web server configuration and 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 function operates properly, and whether the PC template is being used.
  2. Access the mobile domainIn the mobile browser or emulator