When building and operating a website, the display effect of content on different devices is crucial to user experience.AnQiCMS provides a variety of mechanisms and rich features to help users easily cope with content display challenges on PC, mobile, and various adaptive scenarios.Understanding and properly utilizing these features can effectively ensure that your website content is displayed normally and beautifully on any screen.

One, understand the responsive and adaptation mechanism of AnQiCMS

AnQiCMS offers flexible choices in website mode, which directly determines how your website content is displayed on different devices:

1. Adaptive Mode (Template Type 0)This is the current mainstream web design trend, meaning that your website uses a set of template codes, through CSS media queries (Media Queries) and JavaScript and other technologies, automatically adjust the layout and element size according to the screen size, resolution and other characteristics of the user's device.In this mode, you do not need to maintain multiple sets of templates for different devices, all content on PC, tablet, and mobile will be adjusted responsively through the same set of code.AnQi CMS allows you to choose this template type and depends on the responsive design capabilities of your front-end template.

2. Code Adaptation Mode (Template Type 1)In this mode, your website will prepare two independent templates separately 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 visited device and automatically load the corresponding template.This means that mobile users will see layouts and content presentations specially optimized for mobile screens.To achieve this, you need to create a namedmobile/In the subdirectory, and place your mobile template file there.

3. PC+Mobile independent site mode (Template Type 2)This pattern goes beyond code adaptation, allowing you to use completely independent domain names or subdomains for PC and mobile ends, such aswww.yourdomain.comused for PC, andm.yourdomain.comUsed for mobility. In this case, AnQiCMS will recognize different domain requests and point to independent templates and content.In the "Global Settings" on the backend, you need to explicitly configure the "Mobile End Address" to ensure the system can correctly guide mobile users to access the specified mobile site.

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

Chapter 2: The Key to Template Design and Content Structure

A good template design is the core of normal display of content across devices. AnQiCMS has some basic conventions and powerful features in template creation:

1. Uniform Encoding and Static Resource ManagementAll template files should use UTF-8 encoding to avoid garbled text issues. It is recommended to store the static resources such as styles (CSS), JavaScript scripts, and images used in the templates in a unified location./public/static/Under the directory. AnQiCMS'TemplateUrlTags can help you correctly refer to these resources, ensuring they can be loaded normally on different devices.

2. Maintenance of independent templates for mobile devicesIf you choose the "code adaptation" or "PC+Mobile independent site" mode, then inmobile/Maintaining a set of template structures under the directory that aligns with the PC version is crucial. This means that the files that exist on the PC versionindex.html/detail.htmlare inmobile/The directory should also have a corresponding mobile version file to provide a mobile browsing experience.

3. Make flexible use of template tagsAnQiCMS provides rich template tags to control content output. For example,archiveDetail/categoryDetail/pageDetailthese tags can be flexibly selected when calling imagesLogo(usually the main image),Thumb(thumbnail) orImages(Group image), This allows you to load images of different sizes according to the device size, or to implement lazy loading of images (vialazy="data-src"properties). For rich text content, use{{内容字段|safe}}The filter is crucial to ensure that HTML code is parsed correctly and not displayed as escaped.truncatecharsandtruncatewordsFilters that can help you intelligently truncate text to avoid overflow when the content display area is limited.

3. 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. Smart processing of image resourcesImages are an important factor in web page loading speed and display quality. AnQiCMS provides multiple image optimization features in the "Content Settings":

  • WebP image format: Enabling WebP conversion can significantly reduce image file size and speed up mobile loading.
  • Image auto-compression: The system can automatically compress the large image uploaded to the specified width to avoid loading large image resources on small screen devices.
  • Thumbnail Processing MethodYou can choose strategies such as 'Proportional scaling based on the longest side', 'Fill based on the longest side', or 'Crop based on the shortest side' to generate thumbnails, ensuring the coordination of image size in different display scenarios.
  • Default thumbnail: Setting a default image can prevent the display from being blank or the style from being confused due to the lack of content images.
  • Remote image and external link management: Downloading remote images to local can improve website loading stability, and filtering external links can maintain content purity and SEO advantages.

2. Display 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 frontend viarender=trueParameters must be rendered to display as HTML. If you use 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 essential, as these libraries ensure that complex elements are correctly parsed and displayed on different devices. For ordinary rich text content, make sure to use|safeFilter to prevent HTML tags from being escaped and displayed as raw code.

Section 4: Background Configuration and Detail Adjustment

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

1. Global website address configurationIt is crucial to fill in the 'Website Address' and 'Mobile End Address' correctly in the 'Global Settings'.Especially in the "PC+Mobile independent site" mode, accurate configuration of the mobile end address is crucial to ensure that mobile users are correctly directed.

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

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

By the above detailed management and configuration, by reasonably utilizing 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.

Frequently Asked Questions (FAQ)

1. Why did I set a mobile domain, but the PC site still displays when accessed on a mobile phone? Answer:This usually happens in the "PC+Mobile independent site" mode.First, please check whether the "Global Settings" of the background has the "Mobile End Address" configured correctly, ensure that the domain name accessed by the phone is consistent with the mobile end address set here.Next, confirm your templateconfig.jsonin the filetemplate_typeIs it set to 2 (computer + mobile)? Finally, check the Nginx or Apache configuration on the server to ensure that the mobile domain is correctly pointing 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. How can I optimize the uploaded images that are too large on the mobile end? Answer:You can optimize it in the "Content Settings" of the AnQiCMS backend.Enable the 'Auto-compress large images' feature and set an appropriate 'Auto-compress to a specified width' (for example, 800px or smaller).Moreover, choosing the appropriate 'thumbnail processing method' and 'thumbnail size' is also very helpful.In the template, prefer to use pass through{{item.Thumb}}or{{item.Logo}}The address obtained by the tag is the thumbnail address instead of the original large image address, and it is配合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 the "Enable Webp image format" option to further reduce the size of the image file.

**3. I used the same content block under