As an experienced AnQi CMS expert who deeply understands website operation, I fully understand your need to display a diversified banner area on the homepage.An energetic and content-rich homepage is often the key to attracting users and enhancing brand image.The Anqi CMS is designed to meet such needs with its powerful flexibility and customizability.typeParameters, to implement the diversified display of the home page banner.
Anqi CMS home page banner diverse display:typeingenious use of parameters
In today's rapidly changing internet environment, the homepage of a website is like a company's 'front door', and its design and content presentation directly affect the first impression of visitors.Having only a fixed carousel Banner is no longer able to meet the growing demand for personalized display.You may wish to place a grand main carousel at the top of the homepage, while displaying some small promotional banners on the side or below the content area, or even have a set of banners with a unique style during specific promotional events.bannerListTags and their core parameterstype.
Deep understandingtype参数：Banners 的分类与调用
Anqi CMS'sbannerList标签是用于在模板中调取Banner列表的关键。它的核心在于一个叫做type的参数。这个typeParameters are like the 'folders' or 'category tags' you create for different Banner areas for various purposes. By setting differenttypeYou can accurately call out the corresponding Banner in the website template, and apply completely different styles and layouts to them.
By default, if you do not specifytypeparameters,bannerListTags will call all the banners from the "Banner Management" backendtypeBanner with the default value. But our goal is to achieve a diverse display, which means we need to break free from the limitations of “default” and make full use oftypeParameter classification ability.
Create and manage Banner groups in the Anqi CMS backend.
Although the specific operation steps of the background Banner management interface are not fully described in the document, according to the general design logic of Anqi CMS, you will usually manage the grouping of Banners in the following way:
- Enter the "Banner Management" interface:It is usually located under the "Content Management" or "Page Resources" modules.
- Create or edit Banner:When adding a new Banner image, you will see a field called "Group Name" or something similar, which is
typethe manifestation of parameters in the background. - Define the group name:In this field, you can enter a custom group name according to your needs, such as: 'Home Page Carousel', 'Side Advertisement', 'Promotion Area', 'Article Bottom Promotion', etc.Please ensure that these names are descriptive and easy to remember.
- Upload image and fill in information:Upload the corresponding image for each Banner and fill in the link address (
Link), image description (Alt) and title (Titleif needed).
By this method, you can easily classify different purposes and styles of banners into their respective groups, preparing for subsequent template calls.
Template flexibility: bytypeParameter call different Banner areas
Once you have set up the Banner grouping in the background, the next step is to use it in the front-end templatetypeParameters, display them on your website. The Anqi CMS template syntax is similar to Django, variables are enclosed in double curly braces{{变量}}Logic control uses single curly braces and percentages{% 标签 %}.
The English translation of auto is English.
Example One: Homepage Carousel Banner
This area usually requires large-sized images with a carousel effect, and may need to distinguish the first image to add special styles (such asactive类）。
<section class="main-carousel-section">
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
{% bannerList mainBanners with type="主页轮播" %}
{% for item in mainBanners %}
<div class="swiper-slide {% if forloop.Counter == 1 %}active{% endif %}">
<a href="{{ item.Link }}" target="_blank">
<img src="{{ item.Logo }}" alt="{{ item.Alt }}" title="{{ item.Title }}"/>
{% if item.Title %}
<div class="banner-title">{{ item.Title }}</div>
{% endif %}
</a>
</div>
{% endfor %}
{% endbannerList %}
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Navigation -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
在这个例子中，我们通过type="主页轮播"准确地调用了属于“主页轮播”分组的Banner。forloop.Counter == 1It is a practical technique that helps us identify the first element in the loop, so that we can add a specific CSS class for the initial state of the carousel (for example, the first slider is activated by default).
Example two: Sidebar small advertisement Banner
The advertisement in the sidebar may be smaller in size, not requiring a carousel, but possibly needing multiple side-by-side or stacked displays.
<aside class="sidebar-ads">
<h3>热门推荐</h3>
<ul>
{% bannerList sidebarAds with type="侧边广告" %}
{% for item in sidebarAds %}
<li>
<a href="{{ item.Link }}" target="_blank">
<img src="{{ item.Logo }}" alt="{{ item.Alt }}" />
{% if item.Title %}
<p class="ad-title">{{ item.Title }}</p>
{% endif %}
</a>
</li>
{% endfor %}
{% endbannerList %}
</ul>
</aside>
Here, we usetype="侧边广告"Retrieved a small Banner specifically used for the sidebar, and<ul><li>displayed in a structured format, where its size and layout can be controlled through CSS.
Example three: Special Promotion Banner in the middle of the page content
If your content area is long, you may want to insert a prominent promotional Banner between the article list or product list.
<section class="promotional-block">
{% bannerList promoBanner with type="特殊推广" %}
{% for item in promoBanner %}
<div class="promo-item">
<a href="{{ item.Link }}" target="_blank">
<img src="{{ item.Logo }}" alt="{{ item.Alt }}" />
<div class="promo-content">
<h4>{{ item.Title }}</h4>
{% if item.Description %}<p>{{ item.Description }}</p>{% endif %}
</div>
</a>
</div>
{% endfor %}
{% endbannerList %}
</section>
Passtype="特殊推广"We can provide a unique HTML structure and style for the Banner in this area, making it stand out from the page content.
Expanding Thoughts: The Practice of Design and Operation
PasstypeParameters, you can not only achieve different regional Banner style differentiation, but also bring more efficient operation and more flexible design:
- Refined content placement:Based on the page area and user behavior, deliver the most relevant Banner content.
- A/B Testing and Optimization:For different
typeMonitor the Banner area for effects and A/B testing, and continuously optimize images, copy, and links. - Code neatness and maintenance:The grouping call makes the template code clearer, separates the Banner logic in different areas, which is convenient for management and maintenance in the later stage.
- Responsive design:For different
typeThe Banner area design varies responsive strategies to ensure display on all devices.
In actual operation, please ensure that the background Banner group name matches the template in EnglishtypeThe consistency of parameter values, this is the basis for correct calls.At the same time, it is recommended that you keep the size uniform when uploading the Banner and adjust it through CSS on the front end to ensure the coordination of the overall visual effect.
Concluding remarks
Anqi CMS'stype参数是实现首页乃至全站Banner多样式、精细化展示的English。Through simple backend configuration and flexible template calls, you can easily create a feature-rich, visually diverse, and better user experience for the homepage of the website.This will greatly enhance the operational efficiency of your website and provide strong support for your content marketing strategy.
Common Questions (FAQ)
- Q: I created a Banner group in the background, but it does not display when called in the template. What went wrong?A: First, please check
typeThe value of the parameter is whether it matches the "group" you set in the background