What are the differences in the usage of the `bannerList` tag in the mobile template of Anqi CMS?

Hello, all the operation colleagues and technical partners of Anqi CMS!As a senior website operation expert, I know that in the current mobile Internet era, the performance of the website's mobile end is directly related to user experience and marketing effect.bannerListWhat are the differences in usage methods and strategies in the mobile template?

Firstly, let's review the Anqi CMSbannerListLabel's basic appearance. According to AnQiCMS template label document,bannerListLabel is mainly used to obtain the website's homepage Banner list. Its basic usage is{% bannerList 变量名称 %}ThroughtypeParameters can specify to get different groups of Banners, for exampletype="default"(Default group) ortype="幻灯"(Custom group). Each Banner item returned containsId/Logo(image address),Link[Link address],Description(Introduction) andAlt(Image Alt attribute) fields.From the syntax and parameters of the label itself, its calling method and data structure are consistent in any template, whether on the PC end or the mobile end.

Where does the so-called 'difference' manifest? This is not a difference in tag syntax, but rather a result of the diverse mobile end template support of Anqi CMS and our deep understanding of mobile end user experience as operators.Content strategy, design considerations, and technical implementation pathDifferentiated application.

The Anqi CMS provides very flexible choices in terms of mobile template, it supportsAdaptive, code compatibility, and independent PC+Mobile sitesThree modes. It is these different modes that determine the strategies we need to adopt when usingbannerListlabels:

1. Differentiated application under independent mobile site or code adaptation mode

When your website is set to “PC+Mobile independent site” or “code adaptation” mode, Safe CMS allows you to set an independent directory for the mobile template, which is usuallymobile/This means that your PC and mobile端 can haveentirely independent template files and page structures.

in this mode,bannerListLabel usage in mobile template, its core difference is体现在：

• Exclusive Banner content grouping：This is the most direct and most recommended approach. You can make full use ofbannerListTagstypeParameter.In the Anqi CMS backend, you can create one or more Banner groups for mobile devices separately, such as named "Mobile Home Banner" or "Mobile Promotion Banner" etc.mobile/index.htmlIn other mobile template files, you can call{% bannerList banners with type="移动首页Banner" %}to get the Banner designed specifically for mobile.
• Image size and optimizationEnglish version: The screen size of mobile devices is diverse, and they are usually accessed via mobile networks, which are more sensitive to image loading speed. After setting a dedicated Banner group for mobile devices, you can uploadSmaller size, more compact file size, resolution compatible with mobile devicesThe image.For example, the PC端Banner may be 1920x500px, while the mobile end may need 750x300px.When uploading to the backend, different sizes of images can be uploaded for different groups.
• Simplified text and CTA：Mobile banner display space is limited, and user attention time is short.Therefore, the copy on it should be more concise, directly pointing out the core information, and accompanied by an eye-catching call to action (CTA).This contrasts with the additional auxiliary information that a PC端Banner may carry.
• Loading performance optimizationThrough providing specially optimized images for mobile devices, unnecessary traffic consumption is directly reduced, and the page loading speed is improved.Combining the content settings of Safe CMS, such as automatic image compression and WebP image format conversion, can further optimize.

2. Adaptive mode underbannerListStrategy application

If your website uses the 'adaptive' template mode, this means that the PC and mobile ends share a set of template files. In this case,bannerListThe way to call the label is unified in the template file, but we can still achieve optimization of the mobile Banner through some strategies:

• The same Banner group provides pictures in multiple sizesAlthoughbannerListDirectly returnedLogoIt is usually a URL, but you can add custom fields for each Banner item in the background, such as 'Mobile Logo', 'Mobile Link', and so on.Then, in the template, use front-end JavaScript to determine the user's device type or use CSS media queries to dynamically display different image URLs.

  
  {# 假设您在后台Banner配置中为每个Banner项添加了名为 "MobileLogo" 的自定义字段 #}
  {% bannerList banners %}
      {% for item in banners %}
      <a href="{{item.Link}}" target="_blank">
          <img class="desktop-banner" src="{{item.Logo}}" alt="{{item.Alt}}" />
          {% if item.MobileLogo %}
          <img class="mobile-banner" src="{{item.MobileLogo}}" alt="{{item.Alt}}" />
          {% endif %}
          <h5>{{item.Title}}</h5>
      </a>
      {% endfor %}
  {% endbannerList %}
  

  Then, control it through CSS media queries.desktop-bannerand.mobile-bannerto display and hide.
• Responsive image technologyThe more advanced approach is to use HTML5's<picture>element or<img>TagssrcsetProperty. This requires providing different resolution images in the background, then rendering this information in the template, allowing the browser to automatically select the most suitable image for the device. AlthoughbannerList默认只返回一个Logo字段，但通过安企CMS的自定义字段功能，完全可以扩展出Logo_mobile_x1/Logo_mobile_x2等多个图片URL，以支持响应式图片。
• The flexible use of CSS media queries：Even if the same Banner image is used, it can be adjusted for the display ratio, image focus, text size and position on mobile devices through CSS media queries to ensure that there is still a good visual effect on small screens.

Practical Optimization Suggestions

No matter which mode is usedbannerListWhen using tags, we should adhere to the "mobile first" principle and pay attention to the following points:

1. Image refined managementAfter uploading the Banner on the backend, be sure to pay attention to the file size of the image, try to compress it to the lowest possible without affecting the visual quality.English translation: The picture compression and WebP conversion features built into the AnQi CMS should be used wisely.For independent mobile sites, it is necessary to upload specially made mobile-end images.
2. Grouping clear, responsibilities clear: Set clear in the background for BannertypeGroup names, avoid confusion of PC and mobile end Banner content, convenient for management and iteration.
3. A small selection of highlights, focusing on key pointsEnglish: The mobile banner should not be too many, usually 1-3 are enough, each banner should carry a clear message and call to action.Too many banners will increase the load, distracting the user's attention.
4. Regular detection and optimization：Using the traffic statistics and crawler monitoring functions of Anqi CMS, combined with third-party tools, regularly check the loading speed, bounce rate, and other indicators of mobile page, and optimize the Banner content and display strategy based on data feedback.

In short, the Anqi CMS isbannerListThe label itself is a general and powerful content call tool.The 'different' in the mobile template is not a change in tag syntax, but the need for us to develop differentiated content operation strategies, backend configuration optimization, and frontend template implementation based on the characteristics of mobile users, device limitations, and the selected template mode.bannerListThe value, providing mobile users with a smooth, efficient and engaging visual experience.

---

Common Questions (FAQ)

Q1: My CMS website is responsive. Do I need to make special handling for the mobile end Banner?A1: Even for adaptive templates, it is strongly recommended that you give special treatment to mobile banner ads. Although the template files may be the same, the screen size of mobile devices is small, and users are very sensitive to loading speed and image details.