When building and operating a website, how content displays on different devices is crucial to user experience.AnQiCMS provides a variety of mechanisms and rich features, aimed at helping users easily handle the challenges of content display on PC, mobile, and various adaptive scenarios.Understand and properly utilize these features to ensure that your website content is displayed normally and beautifully on any screen.

AnQiCMS Responsive and Adaptation Mechanism Understanding

AnQiCMS offers flexible options in website mode, which directly determines the way your website content is presented on different devices:

1. Adaptive Mode (Template Type 0)This is the current trend in web design, meaning that your website uses a set of template code, adjusting the layout and element sizes automatically based on the screen size, resolution, and other characteristics of the user's device through technologies such as CSS media queries and JavaScript.In this mode, you do not need to maintain multiple sets of templates for different devices. All content will be responsively adjusted through the same set of code on PCs, tablets, and mobile phones.The AnQi CMS allows you to choose this template type and relies on the responsive design capabilities of your own frontend template.

2. Code Adaptation Mode (Template Type 1)In this mode, your website will prepare two separate templates for PC and mobile endpoints.When a user visits the website, AnQiCMS will judge whether it is a PC or a mobile device based on the User-Agent information of the visiting device and automatically load the corresponding template.This means that mobile users will see layouts and content presentations optimized specifically for mobile screens.mobile/The subdirectory, and store your mobile template files in it.

3. PC+Mobile Independent Site Mode (Template Type 2)This pattern goes even further than code adaptation, allowing you to use completely independent domain names or subdomains for PC and mobile, for examplewww.yourdomain.comused for PC,m.yourdomain.comUsed for movement.In this case, AnQiCMS will recognize requests from different domain names and direct them to independent templates and content.In the "Global Settings" on the backend, you need to explicitly configure the "Mobile End Address" to ensure that the system can correctly guide mobile users to the specified mobile site.

Choose the appropriate mode is the first step to ensure the normal display of content, which lays the foundation for subsequent template design and content optimization.

The key to template design and content structure

A well-designed template is the core of normal display across devices. AnQiCMS has some basic conventions and powerful features in template creation:

1. Unified Encoding and Static Resource ManagementAll template files should be encoded in UTF-8 to avoid garbled characters. It is recommended to store the styles (CSS), JavaScript scripts, and static resources such as images used in the templates uniformly./public/static/In the directory. AnQiCMS is located here.TemplateUrlTags can help you correctly reference these resources, ensuring they can be loaded normally on different devices.

2. Independent template maintenance for mobile devicesIf you have chosen the 'Code Adaptation' or 'PC + Mobile Independent Site' mode, then inmobile/It is crucial to maintain a template structure consistent with the PC-side mirror in the directory. This means that everything that exists on the PC-sideindex.html/detail.htmlalso exists inmobile/The directory should also have the corresponding mobile version file to provide a **mobile browsing experience.

3. Flexibly use template tagsAnQiCMS provides rich template tags to control content output. For example,archiveDetail/categoryDetail/pageDetailthese tags can flexibly select when calling images.Logo(usually the main image),Thumb(Thumbnail) orImages[Image gallery], which allows you to load images of different sizes based on the device dimensions, or implement lazy loading of images (bylazy="data-src"properties). For rich text content, use{{内容字段|safe}}The filter is crucial for ensuring that HTML code is parsed correctly and not displayed as escaped.truncatecharsandtruncatewordsWhen the display area of the content is limited, these filters can help you intelligently truncate text to prevent overflow.

III. Content Editing and Media Resource Optimization

Even if the template design is good, the optimization of the content itself directly affects the display effect:

1. Intelligent processing of image resourcesImages are an important factor in webpage loading speed and display effect. AnQiCMS provides multiple image optimization features in the "Content Settings":

  • WebP image formatEnable WebP conversion can significantly reduce the size of image files and speed up loading on mobile devices.
  • Automatic image compressionFor the large image uploaded, the system can automatically compress it to the specified width, avoiding loading too large image resources on small screen devices.
  • Thumbnail processing methodYou can choose strategies such as 'Scale to fit the longest edge', 'Fill the longest edge', or 'Crop to the shortest edge' to generate thumbnails, ensuring the coordination of image size in different display scenarios.
  • Default ThumbnailSet a default image to avoid display issues such as blank spaces or incorrect styles due to the absence of content images.
  • Remote image and external link management[en]: Downloading remote images to local can improve the stability of website loading, and filtering external links can maintain the purity of content and SEO advantages.

[en]: 2. Presentation and adaptation of rich text contentDuring content editing, AnQiCMS supports the Markdown editor, making it easier to write structured content. Markdown content needs to be processed on the front end viarender=trueParameters must be rendered to display as HTML. If you have used complex mathematical formulas or flowcharts in the content,help-markdown.mdThe method mentioned in the document for introducing third-party libraries (such as MathJax, Mermaid) is indispensable. These libraries ensure that these complex elements are correctly parsed and displayed on different devices. For general rich text content, make sure to use|safeFilter to prevent HTML tags from being escaped and displayed as raw code.

IV. Backend Configuration and Detail Adjustment

In addition to the template and content itself, some global settings on the backend also play a role in ensuring the display of the website on different devices:

1. Global website address configurationIt is crucial to correctly fill in the "Website Address" and "Mobile End Address" in the "Global Settings".Especially in the "PC+Mobile Independent Site" mode, the accurate configuration of the mobile end address is crucial for correctly guiding mobile users.

2. Static resource path guaranteePass{% system with name="TemplateUrl" %}Label call static resource path, must match your actual deployment path.This ensures that CSS, JS, and other files are loaded correctly, thereby guaranteeing that the website's style and interactive effects work normally on all devices.

3. Shutdown status and notificationsAlthough it does not directly affect content display, when the website is in 'shutdown status', the customized 'shutdown notice' content will be the only information that users can see on any device.Ensure this prompt is clear and friendly, and it is also an important aspect of user experience maintenance.

By carefully managing and configuring from multiple aspects, making full use of the various functions provided by AnQiCMS, you can effectively ensure that your website content is displayed normally and excellently on PC, mobile, or adaptive modes.

Common Questions (FAQ)

1. Why does the mobile site still show up when I access it from a mobile phone, even though I set the mobile domain? Answer:config.jsonin the filetemplate_typeIs it set to 2 (computer + phone)?Finally, check the Nginx or Apache configuration on the server side to ensure that the mobile domain is correctly pointed to the corresponding entry of AnQiCMS, and that the reverse proxy or redirection rules of Nginx or Apache are not incorrectly directing mobile requests to the PC site.

2. The image I uploaded in the content is too large on the mobile phone, how to optimize it? Answer:You can optimize it in the 'Content Settings' of the AnQiCMS backend.Enable the "Auto-compress large images" feature and set a suitable "Auto-compress to a specified width" (e.g., 800px or smaller).In addition, choosing the appropriate 'thumbnail processing method' and 'thumbnail size' is also very helpful.{{item.Thumb}}or{{item.Logo}}The thumbnail address obtained from the tag instead of the original large image address, and配合CSS style to limit the maximum width of the image (such asmax-width: 100%; height: auto;If the image is still too large, consider enabling 'Whether to start Webp image format' to further reduce the size of the image file.

**3. I used the same content block under