How to configure different content display templates for mobile and PC separately?

In website operation, providing a browse experience for different devices is crucial.AnQi CMS knows this, it provides a flexible template mechanism that allows you to easily configure different content display templates for mobile and PC terminals, thus meeting user needs and improving website performance.

Below, let's take a detailed look at how to achieve this goal in Anqi CMS.

Understand the template pattern of Anqi CMS.

AnQi CMS provides three main website modes to meet the needs of mobile and PC content display in different scenarios:

1. Adaptive Mode (Responsive)This is the most common pattern at present. You only need a set of templates, through CSS media queries (Media Query) and flexible layout design, so that the website content can intelligently adjust the display according to the screen size of the user's device.The advantages of this model are the low maintenance cost, a single codebase for all devices, but it may not be as precise in displaying for different devices in extreme cases.

2. Code Adaptation mode (Code Adaptation)In this mode, although the website is still accessed through the same domain, the security CMS will automatically judge according to the user's access device (PC or mobile) and load different template files.This means you can design two completely independent template codes for the PC and mobile端, with finer control, without worrying about domain redirection issues.

3. PC+mobile independent sites mode (PC + mobile independent sites)This mode provides you with the greatest flexibility. You can configure completely independent domain names for PC and mobile (for examplewww.yourdomain.comused for PC,m.yourdomain.comUsed for mobile), and independent templates are developed for them. Anqi CMS will intelligently jump and load templates based on the access domain and device type, realizing true independent operation.

Select the appropriate mode

The mode you choose depends on your specific needs and resources invested:

• If the structure of your website content is relatively simple, and you hope to minimize maintenance coststhenAdaptive modeIt is a very good choice. Modern browsers have very mature support for responsive design, a well-designed responsive template is enough to deal with most scenarios.
• If your mobile and PC end needs to display a content structure or design style that differs significantly, and you want to have finer control over both, but do not want to manage two separate domainsthenCode Adaptation ModeIt would be the ideal choice. It allows you to provide a customized user experience for mobile and PC platforms while maintaining a single domain entry.
• If your business scenario requires mobile and PC端 to have a completely independent brand positioning, content strategy, even user groups, and are willing to invest more resources to maintainthenPC + mobile independent site modeWill provide you with ultimate flexibility and customization capabilities. This model is common in large enterprises or websites in specific vertical industries.

Configure different content display templates for mobile and PC

Next, let's take the "code adaptation mode" and "PC + mobile independent site mode" as examples, and see how to configure it specifically in AnQi CMS.

Step 1: Make global settings in the background

No matter which independent template mode you choose, you need to make the corresponding configuration in the Anqi CMS background and tell the system your template strategy.

1. Confirm template type First, you need to open the folder of the template you are currently using (usually located/template/你的模板目录/) underconfig.jsonfile. In this file, you need to settemplate_typethe value of the field:

   • If you chooseAdaptive mode, willtemplate_typeis set to0.
   • If you chooseCode Adaptation Mode, willtemplate_typeis set to1.
   • If you choosePC + mobile independent site mode, willtemplate_typeis set to2.

   This setting is to inform AnQi CMS of the overall adaptation strategy of this template.

2. Configure the mobile end address (only for PC + mobile independent site mode)If you select the "PC+Mobile Independent Site Mode", then in the "Global Settings" backend, find the "Mobile End Address" option, enter the independent domain name you have prepared for the mobile end (for examplem.yourdomain.com). Make sure that this domain is correctly resolved to your server. Anqi CMS will automatically determine and redirect to the corresponding domain based on the device used by the user.

Step two: Organize your template file structure

The template file organization of Anqi CMS is very intuitive. In your template directory (for example/template/default/) you need to create a file namedmobile.

• PC template: All PC template files (such asindex/index.html/{模型table}/detail.html/{模型table}/list.html) will be placed directly in your main template directory.
• Mobile end template: The mobile template files corresponding to the PC template will be placed inmobile/In the subdirectory, keeping the same directory structure and file name. For example, if your PC homepage template isindex/index.html, then the mobile homepage template should bemobile/index/index.html.

In this way, when the system detects that it is a mobile device accessing, it will load preferentiallymobileThe templates under the directory; if it is a PC device, then load the files under the main template directory.

For example:

/template/your_theme/
├── config.json         # 包含 template_type 设置
├── index/
│   └── index.html      # PC端首页
├── article/
│   └── list.html       # PC端文章列表
│   └── detail.html     # PC端文章详情
├── page/
│   └── detail.html     # PC端单页面
└── mobile/
    ├── index/
    │   └── index.html  # 移动端首页
    ├── article/
    │   └── list.html   # 移动端文章列表
    │   └── detail.html # 移动端文章详情
    └── page/
        └── detail.html # 移动端单页面

The third step: refine to page-level template configuration

AnQi CMS also provides more fine-grained control, allowing you to specify different display templates for individual documents, categories, or single pages.This is very useful when certain content needs unique display, even when the overall choice is 'code adaptation' or 'PC + independent mobile site' mode, these local settings are also applicable.

1. Document TemplateWhen editing an article or product, you can find the 'Document Template' option in the 'Other Parameters'. Here you can enter a custom template filename (such asdownload.html），AnQi CMS will use this specific template to display this document. If you create one for both PC and mobile endpointsdownload.htmlandmobile/download.html，the system will automatically load the corresponding version based on the device.

2. category templateIn editing category information, you can set "category template".This allows you to specify a unique list page or detail page template for a specific category (and all documents under it if the 'Apply to subcategories' option is checked).For example, you can set up a category for "news"news_list.htmlSet as 'Product' categoryproduct_list.html.

3. Single page templateFor pages like "About Us", "Contact Information", etc., you can also specify the "Single Page Template" during editing.This is very convenient for creating a standalone page with specific layout or functionality.

These page-level template settings will override the global template rules, bringing great flexibility to your content operation.

Other considerations

• Static resourcesEnsure the path is correct when referencing images, CSS, JavaScript, and other static resources in your template. Anqi CMS usually places static resources in/public/static/Under the directory, and through the template{{system with name="TemplateUrl"}}Label to obtain the template static file address, ensuring that the correct resources can be found regardless of which template is loaded
• Content Management: Although the template separates the display, the content behind the scenes is managed uniformly.This means you don't need to publish content separately for PC and mobile platforms.If you need to display on different devicesDifferentiationThe content may need to consider adding custom fields in the content model, and displaying them through logical judgments in the template (for example{% if isMobile %}{{"移动端内容"}}{% else %}{{"PC端内容"}}{% endif %})
• SEO optimizationFor PC+mobile independent site mode, make sure you have configured it correctlyhreflangtags (if there is a need for multilingual support) andcanonicalTags to tell search engines which pages are the main version, avoiding duplicate content issues. Anqi CMS provides in the TDK tags.CanonicalUrlThe call can help you handle this kind of work.

The AnQi CMS provides high flexibility in multi-terminal template configuration, allowing you to easily implement various configurations from simple responsive to fully independent sites according to your actual needs.Mastering these features will help you provide a better user experience and contribute to the success of website operations.

Frequently Asked Questions (FAQ)

1. If I selected the "Code Adaptation" mode but did not inmobileWhat will happen when the corresponding mobile template file is created in the directory?Answer: In this case, when the mobile device accesses, the Safe CMS will try to findmobileThe corresponding template under the directory, if not found, it will usually fallback to loading the PC template file.This could result in poor display on mobile devices, as PC templates are usually not suitable for direct display on small screens.Therefore, it is recommended to create corresponding mobile templates for all pages that need to be distinguished when enabling code adaptation mode.

2. Can I use both 'Adaptive' and 'Code Adaptation' strategies in the same template?Answer: Yes, that is possible. You can adapt the template'stemplate_typeis set to1(Code adaptation mode), thenmobilePlace the mobile template in the directory. At the same time, your PC template itself can also be designed to be responsive.This, PC users will get a responsive experience, and mobile users will get a mobile template experience designed specifically for you.This provides you with the ability to flexibly combine different front-end strategies across different devices.

3. If there is a significant difference between the content of my mobile and PC end, even needing different SEO strategies, can Anqi CMS support it?Of course you can. When you choose the "PC+Mobile Independent Site Mode", you can configure completely independent domains for mobile and PC endpoints.This means you can manage almost all content details for them separately, including different TDK (Title, Description, Keywords), different content models (if needed), and completely different templates and designs.Although content publishing still takes place on the same backend, but by fine-tuning at the template level and distinguishing fields in backend management, you can achieve