In the operation of a website, providing a **browser experience for different devices is crucial.【en】The AnQi CMS understands this and provides a flexible template system that allows you to easily configure different content display templates for mobile and PC platforms, thereby meeting user needs and enhancing website performance.

Below, let us delve into how to achieve this goal in AnQi CMS.

Understanding the template pattern in AnQi CMS

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

  1. Responsive ModeThis is the most common pattern at present.You only need one template, and through CSS media queries (Media Query) and flexible layout design, the website content can intelligently adjust the display according to the screen size of the user's device.The advantages of this pattern are the low maintenance cost, a single codebase for all devices, but it may not offer the same level of display refinement for different devices in some extreme cases.

  2. Code Adaptation ModeIn this mode, although the website is still accessed through the same domain name, 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 PC and mobile platforms, with finer control without worrying about domain redirection issues.

  3. PC+mobile independent sites modeThis pattern provides you with the greatest flexibility. You can configure completely independent domains for the PC and mobile端 (for example)www.yourdomain.comFor PC,m.yourdomain.comUsed for movement), and develop independent templates for them. Anqi CMS will intelligently jump and load templates according to the access domain and device type, realizing independent operation in the true sense.

Choose the appropriate mode

The choice of mode depends on your specific needs and resources invested:

  • If the content structure of your website is relatively simple, and you hope to minimize maintenance costs as much as possibleso thatAdaptive Modeis a very good choice. Modern browsers have very mature support for responsive design, and a well-designed responsive template is enough to handle most scenarios.
  • If the content structure or design style of your mobile and PC end needs to be significantly different, and you want to have more fine-grained control over both, but do not want to manage two separate domainsso thatCode Adaptation ModeIt would be an 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 completely independent brand positioning, content strategy, and user base for both mobile and PC platforms, and you are willing to invest more resources for maintenanceso thatPC+Mobile Independent Site ModeThis mode provides ultimate flexibility and customization capabilities, and is commonly used by large enterprises or websites in specific vertical markets.

Configure different content display templates for mobile and PC endpoints

For example, let's take the 'Code Adaptation Mode' and 'PC + Mobile Independent Site Mode' as examples to see how to configure them specifically in the Anqi CMS.

First Step: Make global settings in the background

Regardless of the independent template mode you choose, you need to make the corresponding configuration in the Anqi CMS background and inform the system of your template strategy.

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

    • If selectedAdaptive Mode,template_typeset0.
    • If selectedCode Adaptation Mode,template_typeset1.
    • If selectedPC+Mobile Independent Site Mode,template_typeset2.

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

  2. Configure the mobile address (only for PC + mobile independent site mode)If you have chosen the "PC+Mobile Independent Site Mode", go to the "Global Settings" in the background, find the "Mobile Site Address" option, and enter the independent domain name you have prepared for the mobile end (for examplem.yourdomain.comPlease ensure that this domain has been correctly resolved to your server. The Anqi CMS will automatically judge and direct to the corresponding domain based on the device used by the user.

Step 2: 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 subdirectory namedmobile.

  • PC template: All PC template files (such as)index/index.html/{模型table}/detail.html/{模型table}/list.htmletc.) will be placed directly in your main template directory.
  • Mobile templateThe mobile template file corresponding to the PC template, then place it inmobile/the subdirectory, maintaining the same directory structure and filename. For example, if your PC homepage template isindex/index.htmlThen the mobile home page template should bemobile/index/index.html.

In this way, when the system detects that it is a mobile device accessing, it will load preferentiallymobileTemplates 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 # 移动端单页面

Step 3: Refine to page-level template configuration

The [安企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 it is necessary to display certain content uniquely, even when the overall mode of 'Code Adaptation' or 'PC + Independent Mobile Site' has been selected, these local settings are also applicable.

  1. Document templateIn 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），Security CMS will use this specific template to display this document. If you create both PC and mobile versions at the same time,download.htmlandmobile/download.htmlthe system will automatically load the corresponding version based on the device.

  2. Category TemplateIn editing category information, you can set the "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 "Apply to subcategories" is checked).news_list.htmlto set for the “Product” categoryproduct_list.html.

  3. Single Page TemplateFor single-page pages such as 'About Us' and 'Contact Information', you can also specify a 'Single Page Template' during editing.This is very convenient for creating independent pages with specific layouts or functions.

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

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 obtain the static file address of the template through{{system with name="TemplateUrl"}}Tag to get the static file address of the template, ensuring that the resources can be correctly found regardless of which template is loaded.
  • Content managementAlthough the template separates the display, the content in the background is managed uniformly.This means you don't need to publish content twice for PC and mobile platforms.DifferentiationThe 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, please make sure you have correctly configuredhreflangtags (if there is a need for multilingual support) andcanonicalTags, to inform search engines which pages are the main versions, and avoid duplicate content issues. Anqi CMS provides in the TDK tags.CanonicalUrlThe call can help you handle this aspect of the work.

The Anqi CMS provides high flexibility in multi-terminal template configuration, allowing you to easily achieve various configurations from simple responsive to fully independent sites according to actual needs.Mastering these features will help you provide users with a better access experience and contribute to the success of website operation.

Common Questions and Answers (FAQ)

1. If I selected the 'Code Adaptation' mode, but did not inmobileWhat will happen when a corresponding mobile template file is created in the directory?Answer: In this case, when a mobile device accesses, the Safe CMS will try to findmobileThe corresponding template under the directory, if not found, it will usually fall back to loading the template file for the PC end.This may 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 in display 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 use the template'stemplate_typeset1(Code Adaptation Mode), thenmobilePlace the mobile template under the directory.At the same time, you can also design your PC template to be responsive.Thus, PC users will receive a responsive experience, while mobile users will receive a mobile template experience designed specifically for you.This provides the ability to flexibly combine different frontend strategies across various devices.

3. If the content of my mobile and PC ends differs greatly, even requiring 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 the mobile and PC ends.This means you can manage almost all content details separately for them, including different TDK (Title, Description, Keywords), different content models (if needed), and completely different templates and designs.