How to design and deploy a template independently for mobile website?

With the widespread use of smartphones, the user experience of mobile websites has become a key factor in measuring whether a website is successful or not.A well-designed mobile website can not only effectively enhance user satisfaction, but is also crucial for search engine optimization (SEO).AnQiCMS has fully considered this requirement, providing you with a flexible and diverse mobile template solution, especially supporting independent design and deployment of mobile templates, allowing your website to display posture on different devices.

Understanding AnQiCMS's mobile template strategy

In AnQiCMS, you can choose different mobile template adaptation modes according to the actual needs of the website. This mainly includes three types:

1. Adaptive template:In this mode, your website will use a set of templates, using technologies such as CSS media queries, to automatically adjust the layout and style of the same page content based on the screen size of the visiting device.This method has a lower development cost, but may not perform well under extreme conditions.
2. Code Adaptation Template:In this mode, the website recognizes the user's device and provides a specially optimized HTML code structure for mobile users.Although the same URL is still used, the backend will return different template content based on the device type.
3. PC + Mobile Independent Site Mode:This is the pattern we are going to delve into today. It allows you to design and deploy completely independent templates for the PC and mobile end, and even bind a separate domain for the mobile end (such asm.yourdomain.com）。In this mode, you can provide the mobile users with the ultimate optimized experience, whether it is content layout, priority of functions, or interaction design, it can be tailored to fit perfectly.One of the core advantages of AnQiCMS is its ability to efficiently support the management of such independent sites.

Step 1: Plan your mobile template structure

To design a standalone template for mobile devices, you first need to clearly plan in your AnQiCMS template directory. Each independent template is stored in/templateIn each folder under the directory. For example, you may have a folder nameddefaulttemplate folder.

To enable the PC+mobile independent site mode, you need to go to the folder under the template folder.config.jsonThe template type is explicitly specified in the file. Findtemplate_typeField, set it to2.This will inform AnQiCMS that your template will support independent operation on PC and mobile terminals, and the system will look for a dedicated mobile template file when accessing the mobile terminal.

{
	"name": "我的独立手机模板",
	"package": "my_mobile_template",
	"version": "1.0",
	"description": "专为手机端优化的独立模板",
	"author": "YourName",
	"homepage": "https://www.yourdomain.com",
	"created": "2023-10-26 10:00:00",
	"template_type": 2, // 关键设置：PC+手机端独立模式
	"status": 1
}

Second step: Create an independent mobile template file

Whentemplate_typeSet to2When, AnQiCMS will look for a folder namedmobilein your template folder. Thismobilefolder is where you store all your mobile template files.

The internal structure should be consistent with your PC template structure, but the content and design will be adjusted according to the characteristics of the mobile end. For example:

• Mobile end homepage: /template/您的模板名/mobile/index/index.html
• Mobile article detail page: /template/您的模板名/mobile/archive/detail.html
• Mobile category list page: /template/您的模板名/mobile/category/list.html
• Mobile common part (such as header, footer): /template/您的模板名/mobile/bash.htmlor/template/您的模板名/mobile/partial/header.html

You can copy the PC template file according to your actual needs,mobileUnder the directory, then make detailed modifications for mobile screen size, touch operation habits, and faster loading speed. Static resources (such as CSS, JavaScript, and images) are still stored in a unified manner./public/static/Under the directory and refer to the template.

Step 3: Development and invocation of mobile template content.

During the development of the mobile template, you will still use the concise and efficient Django template engine syntax of AnQiCMS. This means you can use the familiar{{变量}}Output content as well{% 标签 %}To implement logic control and data calling

When developing mobile templates, pay special attention to the following points:

• Simplify layout:Remove unnecessary elements, use a single-column or a concise multi-column layout.
• Optimize images:Use the built-in image processing feature of AnQiCMS, such as automatically compressing large images, converting to WebP format, and utilizingthumbThe filter retrieves thumbnails and ensures the speed of image loading.
• Touch-friendly:Ensure that buttons, links, and other clickable elements are sufficiently large for easy finger operation.
• Content is simplified:Mobile users usually read in fragmented time, you may consider displaying a more concise content summary on the mobile端, and providing a 'View More' option.

AnQiCMS provides rich template tags, allowing you to easily call various data:

• To get the basic information of the website:Use{% system with name="SiteName" %}To display the website name,{% system with name="MobileUrl" %}To get the mobile website address.
• Call article or product list/detail: {% archiveList %}and{% archiveDetail %}Is the key to displaying your core content.
• Display category navigation: {% categoryList %}and{% navList %}Help build a clear navigation structure.
• Page TDK information:Ensure the mobile pagetitle/keywordsanddescriptionis also optimized and can be used{% tdk with name="Title" %}to get tags.

By using these tags, you can flexibly display the content of the background management in the mobile template and optimize the layout according to the reading habits of mobile users.

Step 4: Configure mobile domain

When you choose the PC+mobile independent site mode, a separate domain for the mobile end is usually assigned, such asm.yourdomain.comThis step is crucial for AnQiCMS to recognize mobile access and load the corresponding template.

1. DNS resolution:Firstly, you need to transfer the domain to your domain registrar.m.yourdomain.comResolved to your server IP address.
2. AnQiCMS backend settings:Log in to AnQiCMS backend, go to全局功能设置. Find.移动端地址Field, here you fill in the independent domain name you prepare for the mobile website, for examplehttps://m.yourdomain.com. This setting will inform AnQiCMS how to redirect or identify when accessing mobile devices.
3. Web server configuration (Nginx/Apache):If you use Nginx or Apache as a web server, you may also need to configure a reverse proxy to map the mobile domainm.yourdomain.comThe request points to the port where AnQiCMS is located (default is 8001). This usually involves adding to the server configurationserverblock (Nginx) orVirtualHostBlock (Apache), and willproxy_passPoint to the AnQiCMS port.The specific configuration method can be referred to in the official documentation of AnQiCMS regarding Nginx or Apache reverse proxy.

After completing these configurations, when a user accesses your primary domain through a mobile device, AnQiCMS will automatically determine and redirect it to the mobile address you have configured and load/mobileindependent template under the directory.

Fifth step: Deployment and testing

After the template file is created and configured, include your template folder (includingmobilesubdirectories andconfig.jsonUploaded to the AnQiCMS system's/templatedirectory.

Next, log in to the AnQiCMS backend, go to模板设计Module, select and enable the independent mobile phone you just configured