How is the `bannerList` tag used differently in the mobile template of AnQiCMS?

Hello, everyone at AnQi CMS operations colleagues and technical partners!As an experienced website operation expert, I am fully aware that in the current mobile internet era, the performance of a website's mobile端 is directly related to user experience and marketing effectiveness.Today, let's delve deeply into a seemingly basic but actually huge potential tag in Anqi CMS -bannerListHow is the usage and strategy different in the mobile template.

Let's review the AnQi CMS firstbannerListThe basic appearance of the tag. According to the AnQiCMS template tag document,bannerListThe tag is mainly used to get the homepage Banner list of the website. Its basic usage is{% bannerList 变量名称 %}through.typeThe parameter can specify to get different groups of Banners, such astype="default"(default group) ortype="幻灯"(Custom group). It includes each Banner item returnedId/Logo(Image address),Link(link address),Description(Introduction) andAltThe image Alt attribute and other fields. From the syntax and parameters of the tag itself, its calling method and data structure are consistent in any template, whether on the PC side or the mobile side.

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

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

1. Application differentiation under independent mobile station or code adaptation mode

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

in this mode,bannerListThe use of tags in the mobile template, the core difference lies in:

• Exclusive Banner content grouping: This is the most direct and recommended approach. You can fully utilizebannerListlabel'stypeParameters. In the Anq CMS backend, you can create one or more Banner groups separately for mobile devices, such as named "Mobile Home Banner", "Mobile Promotion Banner", and so on.like, atmobile/index.htmlIn other mobile template files, you can call{% bannerList banners with type="移动首页Banner" %}to get a Banner designed specifically for mobile.
• Image size and optimization: Mobile devices come in various screen sizes, usually accessed through mobile networks, and are more sensitive to image loading speed. After setting a dedicated Banner group for mobile devices, you can uploadSmaller size, more concise file size, resolution adapts to mobile devicesAn image. For example, the PC end Banner may be 1920x500px, while the mobile end may need 750x300px.When uploading in the background, different sizes of images can be uploaded for different groups.
• Simplified copy and CTAThe display space of mobile banners is limited, and users' attention time is short.Therefore, the copy should be more concise, directly stating the core information, and accompanied by a striking call to action (CTA).This contrasts with the additional auxiliary information that may be carried by the PC banner.
• Loading performance optimizationBy providing specially optimized images for mobile devices, it directly reduces unnecessary data consumption and speeds up page loading.Combining the Anqi CMS content settings, such as automatic image compression and WebP image format conversion, can further optimize.

2. Under adaptive modebannerListApply strategies

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 labels are called is uniform in template files, but we can still optimize the mobile Banner through some strategies:

• The same Banner group provides pictures in multiple sizes: AlthoughbannerListReturned directlyLogoIt is usually a URL, but you can add custom fields for each Banner item in the background, such as 'Mobile Logo', 'Mobile Link', etc.Then in the template, determine the user's device type using front-end JavaScript 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-bannerDisplay and hide.
• Responsive image technology：A more advanced approach is to use HTML5's<picture>OR<img>label'ssrcsetProperty. This requires providing different resolution images in the background, then rendering this information in the template, so that the browser can automatically select the most suitable image based on the device. AlthoughbannerListReturn only one by defaultLogoField, but through the custom field function of Anqi CMS, it can be fully expanded toLogo_mobile_x1/Logo_mobile_x2Multiple image URLs to support responsive images.
• The flexible application of CSS media queries: Even using the same Banner image, you can adjust the display ratio, image focus, text size, and position of the Banner through CSS media queries on mobile devices to ensure that there is still a good visual effect on small screens.

Optimization Suggestions in Practice

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

1. Fine management of images: When 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.Use the image compression and WebP conversion features that come with Anqi CMS.For independent mobile sites, it is necessary to upload specially made mobile images.
2. Grouping is clear, responsibilities are clear: Set clear background for BannertypeGroup names, avoid confusion of PC and mobile end Banner content, convenient for management and iteration.
3. A selection of a few, highlighting the key points：Mobile banners 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 burden and distract the user's attention.
4. Regular detection and optimizationUsing the traffic statistics and crawler monitoring features 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 according to data feedback.

In short, the Anqi CMS'sbannerListThe tag itself is a universal and powerful content calling tool.The 'different' in mobile template is not a change in tag syntax, but requires us to formulate differentiated content operation strategies, backend configuration optimization, and front-end template implementation based on mobile user characteristics, device limitations, and selected template mode.Only in this way can it truly be realizedbannerListThe value, providing mobile users with a smooth, efficient and engaging visual experience.

Frequently Asked Questions (FAQ)

Q1: Is my Anqi CMS website adaptive template, do I need to make special handling for mobile end Banner?A1: Even with adaptive templates, it is strongly recommended to handle mobile banner design specially. Although the template files may be the same, the small screen size of mobile devices makes users very sensitive to loading speed and image details.