So Outside Technology Security CMS
AnQiCMS
Online Demonstration

How to design a mobile template for independent mobile sites or code adaptation mode?

Calendar 👁️ 56

As a senior person in charge of content operations for AnQiCMS, I deeply understand that providing excellent mobile experience to users is the foundation for the success of a website in today's mobile internet era.AnQi CMS, with its flexible architecture, provides us with a variety of solutions to meet the challenges of mobile devices.Today, I will elaborate on how to design high-quality mobile templates for independent mobile sites or code adaptation mode in Anqi CMS.

Mobile first strategy and mobile support of Anqi CMS

When conceiving any content display plan, I always adhere to the 'mobile first' philosophy.This means not only do we need to ensure that the website displays normally on small screens, but also to provide a customized, smooth, and efficient browsing experience for mobile users.AnQi CMS provided us with strong support in this aspect, it offers three core website modes to handle mobile access: responsive, code adaptation, and PC+mobile independent site.

The adaptive mode adjusts the layout of the same HTML structure automatically across different screen sizes using a set of CSS and JavaScript code, achieving content reuse.However, in some business scenarios, we may need more fine-grained control, or provide content or features slightly different from the PC end on mobile devices. In such cases, code adaptation and the PC+Mobile independent site model are particularly important.These two modes allow us to provide independent templates for mobile devices, thereby achieving deeper optimization and personalization.

Code adaptation and template design philosophy for independent mobile sites

When choosing code adaptation or PC+Mobile independent site mode, the core is to provide a set of independent and optimized frontend presentations for mobile users.This is not just a style adjustment, it is also a reconstruction of the experience.

first, Minimalism and efficiency are the primary principles of designUsers of mobile devices are often in fragmented time, with high requirements for loading speed and operational convenience.AnQi CMS is developed based on Go language, which has already achieved high concurrency and high-performance advantages in the backend, laying a good foundation for the fast response of the frontend.When designing templates, we should avoid redundant animations, complex interactions, and large image resources.Every pixel, every click should serve the core needs of the user.

secondly,Content first, highlighting the key pointsIn a limited screen space, users need to quickly find the information they care about.The mobile template should reorganize the content hierarchy, placing the most important and frequently accessed content in a prominent position.This means giving up some secondary elements on the PC side or incorporating them into a collapsible menu.The Anqi CMS content model and flexible content fields provide convenience here, we can define specific fields needed for mobile based on the model, or selectively call them in templates.

Moreover,Optimize mobile interaction. A large click area, intuitive navigation, and avoiding excessive text input are key to improving the user experience on mobile devices.For example, the navigation bar should be designed as a collapsible hamburger menu, form input should take advantage of the keyboard features of mobile devices, such as the number input box automatically popping up the numeric keyboard.

The specific implementation of AnQi CMS mobile template

Create a mobile template for independent mobile sites or code adaptation mode in AnQi CMS, mainly involving the following key steps and design considerations:

Configure template type and directory structure

In your AnQi CMS template root directory/templateunder, each template needs to have oneconfig.jsonfile. This is the core of defining template behavior. For mobile templates, we need totemplate_typeis set to1Or (code adaptation)2(PC+mobile).

It is most critical that all independent template files for mobile devices must be stored in the template directory.mobile/In the subdirectory. This means that if your PC homepage template isindex.htmlThen the corresponding mobile homepage template should bemobile/index.html. Other pages such as document details page ({模型table}/detail.html), list page ({模型table}/list.html) and so on also need correspondingmobile/versions (for examplemobile/{模型table}/detail.html)

This clear directory structure allows Anqi CMS to automatically load and render the corresponding template based on the user's device type, without complex backend logic judgments.

The flexible application of template language and tags

The AnQi CMS template engine is similar to Django syntax, supporting powerful features of Go language templates. When writing mobile templates, we can fully utilize built-in tags to dynamically retrieve content and display it:

  • Get system configuration: Use.{% system with name="MobileUrl" %}Can obtain the mobile end URL configured in the background, which is very useful for adding a link to jump to the mobile end on the PC page in the PC + Mobile independent site mode.
  • Content call:archiveList/categoryList/pageListTags can be used to retrieve various list data, whilearchiveDetail/categoryDetail/pageDetailis used to retrieve the details of specific content. On mobile devices, we may need to adjust these tags.limitParameters to reduce the amount of content loaded, or adjust the loop structure to accommodate a single-column layout.
  • Image optimization: Images are a key factor affecting performance in mobile templates.We can take advantage of the backend content settings of Anqi CMS to enable WebP image format, automatically compress large images, set thumbnail processing methods, and other functions to reduce server load and accelerate loading.When calling images in the template, you can useitem.Thumboritem.LogoGet the thumbnails processed by the system, even by means ofarchiveDetaillabel'slazyParameter配合front-end Lazyload library to implement image lazy loading.
  • Interaction and data display:navListUsed to build common hamburger menu navigation on mobile devices.stampToDateFormat timestamp.breadcrumbBuild breadcrumb navigation. For user interaction forms, such as message forms (guestbook) or comment forms (commentList), ensure that the input box and button sizes are large enough for easy touch.
  • Modular developmentUtilizeinclude/extendsandmacroAuxiliary tags, which can divide the mobile template into reusable modules, such as separating the mobile header (mobile/partial/header.html), and footer (mobile/partial/footer.html) to improve development efficiency and maintainability.

Mobile SEO considerations

Even if it is an independent mobile template, SEO is still an indispensable link. Anqi CMS is built-in with powerful SEO tools, we should make full use of them:

  • TDK (Title, Description, Keywords) Optimization: Use.{% tdk with name="Title" %}Set the title, keywords, and description exclusively for the mobile page with the tag. Sometimes, the title of the mobile page can be more concise, straight to the point.
  • The (Canonical URL)If the content on the PC and mobile end is consistent, it should be passed through the mobile page.<link rel="canonical" href="PC端URL" />Point to the corresponding PC page to avoid duplicate content penalties from search engines. Conversely, as well. Anqi CMS.{% tdk with name="CanonicalUrl" %}Tags can help us output this information.
  • Hreflang tagIf your website supports multilingual and both PC and mobile versions have multilingual versions,{% languages %}The hreflang attribute generated by the tag will help search engines correctly identify the geographic and language targets of the content, ensuring that users receive the most relevant language version.
  • Pseudo-static URL: AnQi CMS supports flexible pseudo-static rules to ensure that the mobile URL structure is clear and easy to crawl, which is crucial for SEO.

Practice and iteration

Template development is a continuous iterative process. When designing and developing mobile templates, we should:

  • Start from the design draft: Prioritize mobile design, then expand to PC, or redesign the mobile user experience (UX) for existing PC design.
  • Multi-device testingOn actual mobile devices of different brands, models, operating systems, and browser combinations, extensive testing is conducted to ensure compatibility and user experience.
  • Performance Monitoring: Use professional tools (such as Google PageSpeed Insights, Lighthouse) to continuously monitor the loading speed and performance metrics of mobile web pages and optimize according to the reports.

With the meticulous planning and powerful functions provided by AnQi CMS, we have the ability to build a high-performance mobile website that can attract users, effectively convert them, and meet the preferences of search engines.

Frequently Asked Questions (FAQ)

1. Can I display completely different content or features on the mobile end in the "Code Adaptation" or "PC+mobile independent site" mode?

Yes, this is one of the main advantages compared to the adaptive mode. By creating independentmobile/Template file, you can fully control the layout, content, and even functional modules of the mobile page.For example, you may display a detailed product parameter table on the PC side, while only displaying the core parameters on the mobile side and providing a "View More" button;Or design a dedicated lightweight form for mobile to optimize the filling experience.Although the core data usually comes from the same background, the independence of the template gives you a great deal of freedom in presenting content on the front end.

2. How does AnQiCMS identify whether a user is on a PC or mobile end and load the corresponding template?

The AnqiCMS identifies the type of the accessing device by recognizing the User-Agent string of the user's device. When it detects a mobile device, the system prioritizes

Related articles

What types of template modes does Anqi CMS support?

As a website operator who deeply understands the operation of AnQiCMS (AnQiCMS) and has a profound understanding of content operation, I am very happy to give you a detailed explanation of the template mode supported by AnQiCMS.In AnQiCMS design philosophy, flexibility and adaptability are among its core advantages, which naturally also manifest in its powerful template system.AnQiCMS knows that different websites and operational strategies have diverse needs for front-end display.

2025-11-06

What encoding format should the template file be saved in to avoid page garbled characters?

Hello!As an experienced CMS website operation person, I know that every detail in content publishing and website maintenance may affect user experience.The page garbled characters are one of the common and annoying problems, which are directly related to the correct presentation of content.According to the Anqi CMS documentation, there is a clear and simple solution to this problem.

2025-11-06

What is the naming rule for template variables?(For example:`archive.Id`)

As a senior security CMS website operator, I know that a clear and consistent template variable naming rule is crucial for the efficient operation and content management of the website.This not only improves the efficiency of template development and maintenance, but also helps operation personnel quickly locate and understand the data structure when adjusting content.In Anqi CMS, the naming of template variables follows a set of clear conventions aimed at ensuring the readability and maintainability of the system.

2025-11-06

Are conditional judgment and loop control tags in the template required to have closing tags?

As an experienced CMS website operation person, I am well aware of the importance of template design for website content display and user experience.During the process of content creation, editing, and publishing, we often deal with templates, and understanding the correct usage of template tags, especially the closure requirements of conditional judgment and loop control tags, is the basis for ensuring the correct rendering of content and the stable operation of the website.About whether the end tags are required for conditional judgment and loop control tags in the template, the template engine of AnQi CMS follows clear conventions.Make the agreement document according to the template we provide, **condition judgment

2025-11-06

Where should the mobile template files be stored in a specific subdirectory?

As a senior security CMS website operation personnel, I fully understand the core position of content in user experience, and providing optimized content display for different devices is the key to retaining users.When it comes to the mobile template management of AnQi CMS, specifying the storage location of the template files is crucial for efficient content publishing and maintenance.In AnQi CMS, in order to adapt to the display of mobile devices, the system provides a specific mechanism to manage the template files for the mobile end.

2025-11-06

How can I implement a custom template name so that the system can automatically recognize and apply it?

As an experienced security CMS website operator, I am well aware of the importance of flexible template customization for website content display and user experience.The Anqi CMS, with its concise and efficient architecture, provides us with great freedom to manage and display content.How to implement a custom template name so that the system can intelligently recognize and apply it is the key to improving operational efficiency and meeting the needs of personalized display.

2025-11-06

What are the naming conventions to follow for a specific document detail page template?

As an experienced security CMS website operations personnel, I deeply understand the importance of the naming rules of the content management system (CMS) template for the long-term operation, maintenance efficiency, and content presentation quality of the website.A clear and standardized template naming not only allows team members to quickly understand the purpose of the file, reduce collaboration costs, but also provides strong flexibility and scalability when the website faces a redesign or feature upgrade.In AnQi CMS, the naming of templates for specific document detail pages follows a set of flexible and hierarchical rules, aimed at meeting the needs of content display at different granularity.

2025-11-06

How to customize the document list template for a specific category?

As a website operator who deeply understands the operation of AnQiCMS, I understand your needs for personalized content display and user experience optimization.The document list template under the custom category is the key step to achieve this goal.AnQiCMS provides a flexible template mechanism that allows you to present a unique list layout based on the content features of specific categories.

2025-11-06