How can I use the `type` parameter to display multiple different styled Banner areas on the homepage?

As an expert in website operation who deeply understands, I fully understand your need to display a diversified Banner area on the homepage of the website.A vibrant, content-rich homepage is often the key to attracting users and enhancing brand image.AnQi CMS is born to meet such needs with its powerful flexibility and customizability.Today, let's delve into how to skillfully use Anqi CMStypeParameters, to implement the diversified display of the home page Banner.

Anqi CMS home page Banner display in various styles:typeThe clever use of parameters

In today's fast-changing Internet environment, the homepage of a website is like the 'face' of a company, and its design and content presentation directly affect the first impression of visitors.Having just a fixed carousel banner is no longer sufficient to meet the growing demand for personalized displays.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 an independent style during specific promotional activities.Aqicms knows these needs and provides a simple and powerful solution - that isbannerListLabel and its core parameterstype.

Deep understandingtypeParameters: Classification and invocation of Banners.

Of Security CMSbannerListThe tag is used to call the Banner list in the template. Its core lies in a calledtype.typeParameters are like the 'folders' or 'category tags' you create for different Banner areas. By setting different parameters for different Banner groups,typeThe value, you can accurately call out the corresponding group's Banner in the website template, and apply completely different styles and layouts to them.

By default, if you do not specifytypeparameter,bannerListThe tag will call all the banners from the background “Banner Management”typeA Banner with the default value. But our goal is to achieve diverse display, which means we need to break out of the default restrictions and make full use oftypeParameter classification capability.

Create and manage Banner groups in AnQi CMS backend.

Although the specific operation steps of the background Banner management interface are not detailed in the document, according to the general design logic of Anqi CMS, you will usually manage Banner groups in the following ways:

1. Enter the "Banner Management" interface in the background:This is usually located under the "Content Management" or "Page Resources" module.
2. Create or edit Banner:When adding a new Banner image, you will see a field called "Group Name" or similar, this istypethe manifestation of the parameter in the background.
3. Define the group name:In this field, you can enter custom group names according to your needs, such as: 'Home Page Carousel', 'Sidebar Advertisement', 'Promotion Area', 'Article Bottom Promotion', etc.Make sure these names are descriptive and easy to remember.
4. Upload image and fill in the information:Upload the corresponding image for each Banner and fill in the link address (Link), image description (Alt) and title (Titleif needed).

In this way, you can easily categorize different purpose, different style banners into their respective groups, preparing for subsequent template calls.

Flexible application in the template: throughtypeParameter call to different Banner areas

Once you have set up the Banner grouping in the background, the next step is to apply it in the front-end templatetypeParameters, display them on your website. Anqi CMS template syntax is similar to Django, variables are enclosed in double curly braces{{变量}}Using single curly braces and percentage signs for logical control{% 标签 %}.

Assuming we want to have three different style banner areas on the homepage: a large top carousel, a group of small ads in the sidebar, and a special promotion area in the middle of the page content.

Example One: Homepage Top 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 asactiveclass).

<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>

In this example, we go throughtype="主页轮播"The banner belonging to the "Home Carousel" group was called accurately.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 to the initial state of the carousel (such as the first slider being activated by default).

Example two: Sidebar mini ad Banner

The ad in the sidebar may be smaller in size, does not need a carousel, but may need to display multiple ads side by side or stacked.

<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="侧边广告"Called a small Banner specifically designed for the sidebar and presented using<ul><li>structure, the size and layout of which can be controlled with CSS.

Example three: Special promotion Banner in the middle of the page content

If the 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>

Bytype="特殊推广"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**

BytypeParameters, you can not only achieve differentiated styles of Banner in different regions, but also bring more efficient operations and more flexible design:

• Refined content distribution:Based on the page area and user behavior, display the most relevant Banner content.
• A/B testing and optimization: For differenttypeMonitor the effectiveness and A/B testing of the Banner area, continuously optimizing images, copy, and links.
• Code tidiness and maintenance:Grouping calls makes the template code clearer, logically separating banners in different areas, making it easier to manage and maintain later.
• Responsive design:For differenttypeThe Banner area design different responsive strategies, ensuring that there is **display on various devices.

In actual operation, please ensure that the background Banner group name matches the template intypeParameter consistency is the foundation for ensuring the correct call.At the same time, it is recommended that you upload the Banner with uniform size and adjust it through CSS on the front end to ensure the coordination of the overall visual effect.

Conclusion

Of Security CMStypeThe parameter is a powerful tool for realizing the diverse and refined display of Banners on the homepage and throughout the entire site.With simple backend configuration and flexible template calls, you can easily create a rich-featured, visually diverse, and better user experience homepage.This will greatly enhance the operational efficiency of your website and provide strong support for your content marketing strategy.

Frequently Asked Questions (FAQ)

1. 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.typeIs the value of the parameter the same as the "group" you set in the background?