Today, let's delve into the topic of how to organize and store mobile template files when creating mobile端 templates with Anqi CMS, ensuring they comply with system specifications and are easy to manage and maintain.
Mobile Template: An independent and orderly 'home'
AnQi CMS provides three main modes for dealing with mobile adaptation issues:Adaptive/code adaptationandPC+手机独立站点.For the auto-adaptive mode, you only need one template to handle all devices, and the system will automatically adjust the layout through CSS or other frontend technologies.If your requirements are more refined, and you hope that the mobile end has completely different interactions or designs from the PC end, then the "code adaptation" or "PC+mobile independent site" mode becomes your best choice.An independent mobile template.
In order to organize these exclusive mobile template files clearly, Anqi CMS has designed a very intuitive storage mechanism: you need to create a folder named in your current template directory,mobileThis is a subdirectory. ThismobileThe catalog, which is the exclusive 'home' for all your mobile template files. When the website runs in the above two independent adaptation modes, and the system detects that the user is accessing through a mobile device, Anqi CMS will prioritize accessing thismobileFind and load the corresponding template file in the catalog.
Inheriting the PC client structure, improving development efficiency
Why the CMS emphasizes inmobileThe directory stores mobile templates, not just to distinguish between PC and mobile, but more importantly, it requiresmobileThe directory insideThe file organization and naming method must be highly consistent with the PC template directoryThis means that if the homepage template of your PC end isindex/index.htmlthen the homepage template of your mobile end should bemobile/index/index.htmlIf the PC page template of the article detail page isarticle/detail.html, then the corresponding mobile page ismobile/article/detail.html.
This design concept greatly simplifies the work of template developers. You do not need to design a brand new set of file naming conventions and directory hierarchy for mobile templates, just inmobileTranslate the content of 'auto' to 'English'.This not only helps maintain clear and consistent project structure, but also greatly reduces the cost of learning and maintenance.article/detail.html）or 'flattened file organization mode' (for example)article_detail.html)mobileAll templates within the directory will follow the same rule.
Key configuration: let the system recognize your mobile template
Of course, just creatingmobileThe catalog and file storage are not enough. The AQS CMS needs to clearly know which adaptation mode your current template is, which is mainly through the template directory.config.jsonFile is configured. In this configuration file, there is a file namedtemplate_type:
0representAdaptivemode, in this mode it is usually not necessary to have a separatemobiledirectory.1representcode adaptationpattern.2representPC+手机独立站点pattern.
When you willtemplate_typeset1or2When, the mobile template recognition mechanism of the Anqi CMS will be activated, it will start to search for and usemobilethe exclusive template under the directory.
Regarding the styles (CSS), scripts (JavaScript), and images, etc., static resources used in the template, they are usually stored uniformly.public/static/Under the directory. In the mobile template, you can refer to the CSS and JS files optimized specifically for mobile, as needed.public/static/css/mobile.cssorpublic/static/js/mobile.jsThis way of centralized management of static resources makes the resource references more standardized, and it is also convenient for CDN acceleration and unified maintenance.
In summary, Anqi CMS provides a clear and practical organization strategy for mobile templates. By creating under the main template directorymobileFolder, and inherits the file structure and naming of the PC client template, with.config.jsonoftemplate_typeConfiguration, you can easily create a set of functional and excellent mobile website experience for users.
Common Questions (FAQ)
Q1: If my templatetemplate_typeSet to "Code Adaptation" or "PC+Mobile Independent Site" mode, but no directory has been createdmobileormobileThe website will show how when a template file is missing under the directory?
A1: When your template configuration is set to independent adaptation mode,mobilemobileCreate the corresponding template file under the directory.
Q2: Can the mobile template have a completely different layout and content from the PC end?
A2: Absolutely. Anqi CMS designmobileThe purpose of the catalog is precisely to support high customization between mobile and PC platforms. Although it requiresmobileThe file structure within the catalog is consistent with the PC version, but this is only a specification for file organization, not a restriction on content and layout. You canmobileIn the directory template files, design a completely new HTML structure, refer to special CSS and JavaScript, and even call different data content through different tags to provide a completely independent mobile user experience from the PC end.For example, the navigation on mobile devices can be designed as a drawer menu, while on PC it is horizontal navigation.
Q3: Where should the static resources (such as CSS, JavaScript, and images) of the mobile template be placed? Do they need an independent folder?
A3: The Auto CMS specifies that static resources are stored uniformly inpublic/static/Under the directory. For mobile templates, you can create a dedicated subdirectory or file in this directory to store the exclusive CSS and JavaScript files for mobile devices, such aspublic/static/css/mobile.cssorpublic/static/js/mobile.jsThen in yourmobileTemplate files, like referencing static resources on the PC end, point to these dedicated mobile resources. Image resources are usually shared, but if you have images optimized specifically for mobile, you can alsopublic/static/images/mobile/Store in such a subdirectory and refer to it in the mobile template. This method helps to centrally manage and optimize static resources.