How to create and store a mobile template in Anqi CMS to ensure the normal display of a mobile website?

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 way according to your actual needs.

Understand AnQiCMS's mobile adaptation mode

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

1. (Responsive) adaptive modeColon In this mode, your website uses a set of template codes.By using CSS media queries (Media Queries) and other technologies, the same HTML structure and content can automatically adjust the layout and style according to the screen size of the user's device.This means you do not need to create different template files for PC and mobile devices, but to adapt the page through front-end technology.This is the mainstream and recommended way, as it has low maintenance costs and simple content management.

2. Code Adaptation Mode (Code Adaptation)When you select this mode, AnQiCMS will load different template files based on the type of device accessing (PC or mobile).This means you will design and develop two sets of templates separately for the PC and mobile端.The system will automatically switch to a template specially designed for mobile devices when it detects that the user is accessing it via a phone, and will display the PC version on the PC.This pattern is very useful when it is necessary to provide a completely different user experience or functionality for different devices.

3. PC + Mobile Separate Sites (PC + Phone Independent Sites)This is the most thorough way to distinguish. In this mode, your PC website and mobile website not only use different templates, but can also bind different domain names (such aswww.yourdomain.comFor PC,m.yourdomain.comFor mobile). AnQiCMS will redirect users to the corresponding site and template based on the domain and device type they visit.This model provides the greatest flexibility, allowing for completely independent content strategies and features for two platforms, but the maintenance cost is relatively high.

The core steps to create a mobile template file

No matter which code adaptation mode or PC+mobile independent site mode you choose, you need to create a dedicated mobile template file. 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/templatethe folder. In/templateIn the directory, you will find the folder of the template theme you are currently using (for exampledefaultOr other custom name). All the creation and storage of mobile templates will be carried out in this specific template theme folder.

2. CreatemobileTable of contents: In the template theme folder you choose (for example/template/你的模板包名称/), you need to create a directory namedmobile. All template files designed for mobile devices will be stored in thismobileIn the directory. This is the key path for AnQiCMS to identify mobile template.

3. Maintain the directory structure consistent with the PC end.To make AnQiCMS able to correctly identify and load the mobile template,mobileThe template file structure under the directory should be consistent with the PC template structure. For example, if your PC homepage template is/template/你的模板包名称/index.htmlThen the corresponding mobile homepage template should be/template/你的模板包名称/mobile/index.htmlSimilarly, if the PC article detail page template is/template/你的模板包名称/archive/detail.htmlthen on mobile/template/你的模板包名称/mobile/archive/detail.html. This mirrored structure helps the system automatically match and load.

4. Editconfig.jsonFileIn your template theme folder (for example/template/你的模板包名称/), there will be aconfig.json file. This file is the configuration file of the template, and you need to modify the contents within ittemplate_typeField, set it to1(Code adaptation) or2(PC+mobile independent site), to inform AnQiCMS that your template supports mobile adaptation.

   • "template_type": 0Represents adaptive mode
   • "template_type": 1Represents code adaptation mode
   • "template_type": 2Represents PC + independent mobile 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 a mobile-end template: Mobile template files are the same as PC template files, using.htmlAs a file extension. You can use the Django template engine syntax supported by AnQiCMS, combined with your front-end technology (such as responsive CSS, mobile-first design, etc.) to build a mobile page.Make sure the template file uses UTF-8 encoding to avoid garbled characters.

Management and storage of mobile template files

• File path: As mentioned before, all mobile templates should be located at/template/你的模板包名称/mobile/Under the directory, and follow the directory structure similar to the PC end.
• Static resources: Static resources such as CSS, JavaScript, and images used in mobile templates can be stored in a unified location,/public/static/In the directory. You can refer to these resources by relative path in the template, AnQiCMS will parse them correctly. If some resources are unique to mobile devices, you can also create them/public/static/mobile/The catalog is stored here.
• Backend settings:
  • If you choosePC + mobile independent site mode(template_type: 2), you must make additional settings in the AnQiCMS backend. Please log in to the backend and navigate toBackend Settings -> Global Function Settings. Here, you will see a name called“Mobile end address”settings. Please enter your mobile site domain name (such asm.yourdomain.comFill in this field. Ensure that the domain name has been correctly resolved to your server.

Notes to ensure the mobile website displays normally.

In order for the mobile website to display 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 should be consistent with the main template folder on the PC end. For example, ifarchivethere isdetail.htmlthenmobile/archivethere should also bedetail.html.
3. mobile end address settingsIf the PC+mobile independent site mode is enabled, please make sure to configure the correct 'mobile end address' in the background global function settings, and ensure that the domain name resolution is correct.
4. Content and style adaptation: The design of the mobile template should fully consider the characteristics of the mobile screen, including font size, image size, button interaction, form usability, and more.It is crucial to use mobile-first CSS styles and layouts.
5. Clear the system cacheAfter changing the template file or background configuration, remember to enter the AnQiCMS backend.Update CacheFunction, clear the system cache to 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.

Frequently Asked Questions (FAQ)

1. I createdmobiledirectory and template files, andconfig.jsonSet in Chinesetemplate_type: 1But why does the PC version template still display when accessed on a mobile phone?This is usually because the AnQiCMS cache has not been updated, or your browser has cached an old page.Please make sure to log in to the AnQiCMS backend, find the 'Update Cache' function and execute it, and clear all system caches.At the same time, try clearing your browser cache on your phone, or access the website using your phone's private/tracing mode for testing.If the problem still exists, please checkmobileDoes the naming and structure of the template files in the directory match that of 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 template be placed? Can the static resources be shared between the PC and mobile ends?Yes, the PC and mobile ends can and usually should share most of the static resources. It is recommended to place the universal CSS, JS files, and images and other resources in a unified place./public/static/Under the directory. You can refer to these resources by relative path in the template file.If some styles or scripts are only used for mobile devices, you can create independent CSS or JS files for the mobile template and store them in/public/static/mobile/In such a subdirectory, then separately import in the mobile template. This can improve the resource reuse rate and keep the file organization clear.

3. If I only plan to create a responsive website (Responsive Design), do I need to createmobilea catalog and a separate mobile template?Not required. If you choose the adaptive mode (i.e.config.jsonoftemplate_type: 0), then AnQiCMS will not look formobileThe template under the directory. In this case, your website uses a single set of template files and adapts to different devices through front-end technologies (such as CSS Media Queries).You only need to ensure that this template itself has a good responsive design, and it can be displayed normally on mobile phones. CreatemobileThe directory and separate template files are only applicable to code adaptation mode or PC + mobile independent site mode.