How to set up an independent directory structure for the mobile template of AnQiCMS?

As an experienced website operator familiar with the operation of AnQiCMS, I know that a flexible and efficient template management system is crucial for the website, especially in the current mobile-first era, providing an independently optimized template experience for mobile devices is the key to attracting and retaining users.AnQiCMS provides strong support in template design, including setting up independent directory structures for mobile templates, which allows us to provide customized content display and interactive experiences for different devices.

The template mode of AnQiCMS and the demand for independent mobile templates

AnQiCMS provides three core website template modes: adaptive, code adaptation, and PC + mobile independent site mode.These three modes have different focuses, and the "code adaptation" and "PC + independent mobile site" modes especially require us to prepare a set of independent template files for the mobile end.

In "Code Adaptation" mode, the system will automatically switch to render different templates based on the type of device the user accesses (PC or mobile).This means we need to provide two versions of the template file for the same page.And the "PC+mobile independent site" model goes further, allowing us to bind an independent domain to the mobile site, achieving complete separation between the PC site and the mobile site. In this case, the independence of the mobile template becomes particularly important.By using an independent mobile template, we can implement mobile-specific optimization strategies such as simplifying page elements, optimizing touch operations, and accelerating loading speed, thereby significantly enhancing the access experience of mobile users.

Building the directory structure of independent mobile templates

The core of setting up an independent directory for mobile templates in AnQiCMS lies in using/template/{你的模板目录}/mobile/This preset path. Once the template mode is set to "code adaptation" or "PC+mobile independent site", the system will prioritize searching and rendering the mobile template in thismobilesubdirectory.

Thismobile/The internal structure of the catalog should be consistent with your PC template catalog (i.e./template/{你的模板目录}/The root directory) remains consistent. This means that if you have a homepage file on your PC endpointindex/index.htmlorindex.html, you can bemobile/The directory should also have correspondingmobile/index/index.htmlormobile/index.htmlSimilarly, the article detail pagearchive/detail.htmlShould correspond on the mobile phonemobile/archive/detail.html, Single pagepage/detail.htmlShould correspondmobile/page/detail.html.

For example, if your PC template uses a folder organization mode, the structure may be as follows:

/template/your_template_name/
├── config.json
├── index/
│   └── index.html
├── archive/
│   └── detail.html
├── page/
│   └── detail.html
└── partial/
    └── header.html
    └── footer.html

So, the corresponding mobile template structure should be inmobile/Mirror this structure in the subdirectory:

/template/your_template_name/
├── config.json
├── index/
│   └── index.html
├── archive/
│   └── detail.html
├── page/
│   └── detail.html
├── partial/
│   └── header.html
│   └── footer.html
└── mobile/ # 手机端独立模板目录
    ├── index/
    │   └── index.html # 手机端首页
    ├── archive/
    │   └── detail.html # 手机端文章详情页
    ├── page/
    │   └── detail.html # 手机端单页面详情页
    └── partial/
        └── header.html # 手机端公共头部
        └── footer.html # 手机端公共底部

If the PC template uses a flat file organization mode (such asindex.html,archive_detail.html), then the mobile directory should also follow this pattern.

Configure template type and bind the mobile end address

After completing the directory structure setting of the mobile template, we still need to make corresponding configurations in the AnQiCMS background.

Firstly, you need to edit the template directory under.config.jsonfile, totemplate_typeThe value of the field is set to1Or (code adaptation)2(Computer + mobile). This will tell AnQiCMS that your template supports switching according to the device type.

Second, if you choose the "PC+mobile independent site" mode, you also need to find the "mobile end address" configuration item in the "global function settings" of AnQiCMS backend. Here, enter the domain name you have bound separately for the mobile site (for examplem.yourdomain.com)。Make sure that this domain has been correctly resolved to your server, and that your web server (such as Nginx, Apache) has also configured the corresponding reverse proxy rules to direct traffic to AnQiCMS.

By following these steps, AnQiCMS can identify and correctly render your independent mobile template. When users access the website through their mobile devices, the system will prioritize usingmobile/Templates under the directory, while the PC end still uses the files under the main template directory, thus achieving true device adaptation and experience optimization.

Summary

To set up an independent directory structure for the mobile template of AnQiCMS, not only can it provide a more refined user experience for mobile devices, but it also helps with subsequent template maintenance and feature expansion. Follow./template/{你的模板目录}/mobile/The structure agreement, and ensuring the internal mirroring of the PC template layout, as well as the correct configuration of the template type and mobile end address in the background, are key steps to achieve this goal.

Frequently Asked Questions

Q1: What are the main differences between 'code adaptation' and 'PC+mobile independent site' modes when configuring the independent directory structure of the mobile端?

The main difference lies in the degree of separation between the domain and the site logic.In "code adaptation" mode, the PC and mobile templates share the same domain, and the system determines whether to render the PC template or the mobile template by judging the user agent (User-Agent).m.example.comThe PC site and mobile site have been separated at the domain level, and the background can also be independently managed for each site, allowing for more independent operation and optimization strategies.

Q2: If I used the "code adaptation" or "PC+mobile independent site" mode but did not createmobile/the catalog, how will AnQiCMS handle it?

If your template is set to "code adaptation" or "PC+mobile independent site" mode, but the correspondingmobile/The directory does not exist or does not contain a matching template file, AnQiCMS will usually fall back to using your PC template file for rendering.Although this can avoid page errors, doing so loses the opportunity to optimize the experience for mobile devices, the page may display poorly on mobile phones, and the user experience may be affected.mobile/create the corresponding template file in the directory.

Q3: Can I apply a set of mobile template to multiple templates at the same time? For example, I have a default mobile template, but I only want to enable it for a specific PC template.

AnQiCMS mobile template directory (mobile/) is tightly bound to a specific PC template directory. That is, each/template/{你的模板目录}/belowmobile/The directory, serving only its parent PC template. If you want multiple PC templates to share a single mobile template, you may need to manually copy the directory of the mobile template to each PC template directory, or use it in the template code by{% include %}or{% extends %}Labeling to refer to a set of common mobile template components, but this will increase the complexity of template maintenance, it is more clear to maintain an independent mobile template directory under each PC template.