Build and manage mobile templates in AnQiCMS to ensure your website displays correctly on mobile devices, you need to understand its flexible template adaptation mechanism and clear file storage rules.AnQiCMS provides various mobile adaptation modes, allowing you to choose the most suitable method according to your actual needs.

Understanding the mobile adaptation mode of AnQiCMS

Firstly, we need to understand the three main mobile adaptation modes supported by AnQiCMS:

  1. 自适应模式 (Responsive)

  2. Code AdaptationWhen you select this mode, AnQiCMS will load different template files based on the type of the visiting device (PC or mobile).This means that you will design and develop two sets of templates separately for the PC and mobile platforms.System will automatically switch to a template specially designed for mobile devices when detecting user access from a phone, and display the PC version template on PC.This pattern is very useful when it is necessary to provide completely different user experiences or functions for different devices.

  3. PC + 手机独立站点模式 (PC + Mobile Separate Sites)： This is the most thorough way to differentiate. In this mode, your PC website and mobile website not only use different templates, but can also be bound to different domains (for example,www.yourdomain.comFor PC,m.yourdomain.comFor mobile).AnQiCMS will redirect users to the corresponding site and template based on the domain name and device type they access.This pattern provides the greatest flexibility, allowing for completely independent content strategies and features for two platforms, but the maintenance cost is relatively high.

Create the core steps for mobile template file creation

Whether you choose the code adaptation mode or the PC+mobile independent site mode, you need to create dedicated mobile template files. The following are the main steps for creating and storing these files:

  1. Locate your template package： First, you need to enter your AnQiCMS website directory. All template files are stored in/templatefolder. In/templateIn the directory, you will find the folder of the current template theme you are using (for example,default或其他custom names）。All mobile template creation and storage will be done within this specific template theme folder.

  2. CreatemobileDirectory： In the template theme folder you have selected (for example/template/你的模板包名称/），你需要创建一个名为Englishmobile的子目录。所有专门为移动端设计的模板文件都将存放在这个EnglishmobileThe directory contains. This is the key path recognized by AnQiCMS for mobile templates.

  3. Maintain the same directory structure as the PC end. In order for AnQiCMS to correctly identify and load the mobile template,mobileThe template file structure under the directory should be as consistent as possible with the structure of the PC端 template. For example, if your PC home page template is/template/你的模板包名称/index.html, then the corresponding mobile homepage template should be/template/你的模板包名称/mobile/index.html. Similarly, if the PC端 article detail page template is/template/你的模板包名称/archive/detail.html, the mobile end is/template/你的模板包名称/mobile/archive/detail.html. This mirrored structure helps the system automatically match and load.

  4. Editconfig.jsonFile： In your template theme folder (for example/template/你的模板包名称/)，there will be aconfig.jsonfile. This file is the configuration file of the template, you need to modify thetemplate_typefield and set it to1(Code Adaptation) or2(PC+手机独立站点)，to inform AnQiCMS that your template supports mobile adaptation.

    • "template_type": 0represents adaptive mode
    • "template_type": 1represents code adaptation mode
    • "template_type": 2Represents PC + mobile independent site mode For example, if you choose code adaptation mode, yourconfig.jsonThe file may contain the following configuration:
    {
	"name": "我的移动适配模板",
	"package": "mytemplate",
	"version": "1.0",
	"template_type": 1,
	"status": 0
}

  5. Design and write mobile端 templates： Mobile template files are the same as PC template files, using.htmlAs a file suffix.You can use the Django template engine syntax supported by AnQiCMS, combined with your frontend technology (such as responsive CSS, mobile-first design, etc.) to build mobile pages.Please make sure that the template files are unified in UTF-8 encoding to avoid garbled text issues.

Storage and management of mobile templates

  • File path：As mentioned before, all mobile templates should be located/template/你的模板包名称/mobile/In the directory, and follow the directory structure similar to that of the PC end.
  • Static ResourcesEnglish: The static resources such as CSS, JavaScript, and images used in the mobile template can be stored uniformly in/public/static/The directory. You can refer to these resources through relative paths in the template, and AnQiCMS will correctly parse them. If some resources are unique to mobile devices, you can also create/public/static/mobile/The catalog is stored here.
  • Backend settings:
    • If you choosePC+手机独立站点模式(template_type: 2), you must perform additional configuration in the AnQiCMS backend. Please log in to the backend and navigate toBackend settings -> Global function settingsHere, you will see a name asthe option of 'Mobile End Address'settings. Please enter your mobile station domain name (for examplem.yourdomain.comFill in the details here. Make sure that the domain has been correctly resolved to your server.

Points to note for ensuring the mobile website displays correctly.

To ensure that the mobile website can be displayed normally and provide a good user experience, please pay attention to the following points:

  1. template_typeConfigurationEnsure your template:config.jsonin the filetemplate_typeSet correctly, this will determine how AnQiCMS handles mobile access.
  2. mobileDirectory structure: Mobile template foldermobileThe structure inside should be consistent with the main template folder on the PC end. For example, ifarchiveis belowdetail.htmlso thatmobile/archiveshould also be belowdetail.html.
  3. Mobile end address settingsIf PC+mobile independent site mode is enabled, please configure the correct 'mobile end address' in the global function settings of the background, and ensure that the domain name resolution is correct.
  4. Content and style adaptation：Mobile template design should fully consider the characteristics of mobile screens, including font size, image size, button interaction, form usability, and so on.Using mobile-first CSS styles and layouts is crucial.
  5. Clear system cacheRemember to log in to the AnQiCMS backend after changing template files or background settingsUpdate the cacheFeature, clean system cache, ensure that the latest template files and configurations can take effect.

By following these steps and precautions, you will be able to effectively create and manage mobile templates in AnQiCMS, providing your users with an excellent mobile website experience.

Common Questions (FAQ)

  1. I createdmobilethe directory and template files, andconfig.jsonI set intemplate_type: 1, but why does the PC version template still show up when accessed on mobile?This is usually because the cache of AnQiCMS has not been updated, or your browser has cached the old page.Please make sure to log in to the AnQiCMS backend, find the "Update Cache" feature and execute it, and clear all system caches.Also, try clearing the cache of your phone's browser, or access the website in your phone's privacy/invisible mode for testing.mobileThe directory template file naming and structure is consistent with the PC end, ensuring that AnQiCMS can accurately match the corresponding mobile template.

  2. Where should the static resources (CSS, JS, images) used in the mobile terminal template be placed? Can the static resources be shared between PC and mobile terminals?Yes, the PC and mobile ends can and should usually share most of the static resources. It is recommended to place common CSS, JS files, and images, etc. in/public/static/In the directory.In the template file, you can refer to these resources via relative path./public/static/mobile/In such subdirectories, then separately import in the mobile template. This can improve resource reuse rate and keep the file organization clear.

  3. If I only intend to create a responsive website (Responsive Design), do I need to makemobilea separate mobile template?It is not necessary. If you choose the auto-adaptive mode (that isconfig.jsonoftemplate_type: 0)，then AnQiCMS will not go looking formobileTemplates under the directory.In this case, your website uses a single set of template files and adapts to different devices using front-end technologies (such as CSS Media Queries).Ensure that this template itself has a good responsive design so that it can be displayed normally on mobile phones.mobileThe catalog and separate template files are only applicable to code adaptation mode or PC+mobile independent site mode.