In website operation, a beautifully designed page banner carousel is a key element to attract visitors' attention, convey important information, and enhance brand image.The AnQiCMS provides a flexible and intuitive way to manage and display these visual contents. Whether you want to set a Banner for the homepage, a specific page, or a category page, it can be easily achieved.
Manage custom Banner carousel
The AutoCMS allows you to set exclusive Banner images for different content types, mainly including Banners for specific pages, Banners for category pages, and home or global Banners achieved through tags.
For a specific page Banner:If you need to configure a Banner slideshow for single pages such as "About Us" and "Contact Us", you can go to the Anqi CMS backend management interface.First, click on the "Page ResourcesHere, you can edit an existing single page or create a new one.In the page editing interface, scroll down to find an option named "Banner image".You can upload multiple images here, which will constitute the banner carousel of this page.To maintain a clean and professional page layout, it is recommended that you upload images of the same size.
For category page Banner:For pages that need to display carousels for article categories, product categories, etc., the operation process is similar to that of a single page.You need to go to the "Content ManagementSelect the category of Banner you want to edit.In the category editing interface, you will also see an option for "Banner Image", where you can upload the Banner image for this category page.Similarly, please ensure that the uploaded images have a uniform size to maintain the consistency of the front-end display.
For homepage or global Banner:The Anqi CMS also providesbannerListTags, used to retrieve Banner images for the homepage or other general areas.Although the document does not directly show the detailed management entry on the back-end, the existence of this tag indicates that the system supports this kind of global Banner configuration.通常，这些Banner会有一个“分组名称”（type），例如“幻灯”，以便在前端调用时区分不同用途的Banner组。
Display Banner carousel in front-end template
Completed the background image upload and configuration, and the next step is to display these Banners on the website frontend.This requires you to use specific tags in the template files of the Anqi CMS to call data.{{变量}}With the percentage brace{% 标签 %}to operate data.
Get single page Banner data:In the template file of a single page (such as)page/detail.htmlOr a custom single page template), you can usepageDetailTag to get the detailed information of this page, including Banner images. This tag provides a namedImagesThe field, it will return an array containing all the Banner image URLs.
{# 假设在单页面模板中获取Banner图片 #}
{% pageDetail pageImages with name="Images" %}
<div class="banner-carousel">
{% for imageUrl in pageImages %}
<div class="carousel-item">
<img src="{{ imageUrl }}" alt="页面Banner" />
</div>
{% endfor %}
</div>
If your design only needs to display a single background image, rather than a carousel, you can directly access the first image in the array:
{% pageDetail pageImages with name="Images" %}
{% if pageImages %}
{% set firstBanner = pageImages[0] %}
<div class="page-header" style="background-image: url('{{ firstBanner }}');">
{# 这里可以放置页面标题等内容 #}
</div>
{% endif %}
Get the Banner data for the category page:Similar to a single page, in the category page template file (for example{模型table}/list.htmlor a custom category template), you can usecategoryDetailtags to get the category Banner image. Similarly,