In website operation, category pages are not only the aggregation of content, but also an important entry for users to understand the website structure and delve into specific topics.An well-designed, informative category page that can significantly enhance user experience and search engine optimization (SEO) effectiveness.AnQiCMS provides flexible features, allowing us to easily display category descriptions, Banner images, and thumbnails on category pages, making your website's category page look fresh.
Understanding the category page and template structure of AnQiCMS
In AnQiCMS, each category has its corresponding display page, usually used to list all articles or products under the category.The content and layout of these pages are controlled by the corresponding template files.
By default, the template file for the category page is usually located in the template folder you are currently using/{模型table}/list.htmlFor example, the article category may correspond toarticle/list.htmlThe product category may correspond toproduct/list.html. You can also customize a template for a specific category ID, for example,article/list-10.htmlThis provides highly customized possibilities for different categories.AnQiCMS will automatically load and parse the correct template based on the current category being accessed, and provide you with the relevant data for the current category.
Add rich information to the category in the background
To display category introduction, Banner image, and thumbnail on the category page, the first step is to add this information to your category in the AnQiCMS backend.
You can go toContent management -> Document classificationFind the category you need to edit, click the "Edit" button.In the category editing page, in addition to the basic information such as 'category name' and 'document model', you will see a collapsible area for 'other parameters'.
- Category Introduction:This is a text input box, where you can enter a brief introduction to the current category.This content not only helps users quickly understand the classification topics, but is also an important source for search engines to capture page descriptions (meta description).
- Banner image:Here you are allowed to upload one or more images.Generally used to display an eye-catching visual element at the top of the category page, enhancing the aesthetic and professional appearance of the page.You can upload multiple images, and the system will treat them as an image group.
- Thumbnail:This is a separate image upload field. Thumbnails are usually used in category lists (such as the category modules displayed on the homepage) or breadcrumb navigation to represent the current category in the form of small images.
Ensure that you fill in and upload these contents for your category, as this is the data basis for the frontend call.
Call and display information in the category template
Once the category information is configured in the background, the next step is to call and display them in the front-end template file. We will mainly usecategoryDetailLabel to get detailed data of the current category.
Display category introduction.
Category introductions are usually divided into two types: a brief overview and detailed rich text content.
If you enter a brief text in the "Category Description" field in the background, you can use it in the templatename="Description"to retrieve and display:
<div class="category-description-short">
<p>{% categoryDetail with name="Description" %}</p>
</div>
If your category page needs to display more detailed content, including rich text and Markdown format, you can fill in the 'Category Content' field in the backend and display it in the template.name="Content"Call it. Since the "category content" may contain HTML tags, to ensure that the browser parses it correctly, we need to use|safeFilter:
<div class="category-full-content">
{% categoryDetail categoryContent with name="Content" %}{{ categoryContent|safe }}
</div>
Display Banner Image
Banner images are usually one of the most eye-catching elements on category pages. The Banner images uploaded on the backend,name="Images"can obtain a list of images.
If your category only needs to display one main banner image, or if you have uploaded multiple but only want to take the first one, you can handle it like this:
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{# 假设您只想显示上传的第一张Banner图 #}
{% set mainBanner = bannerImages[0] %}
<div class="category-banner" style="background-image: url('{{ mainBanner }}');">
{# 您可以在Banner上叠加分类名称或其他信息 #}
<h1>{% categoryDetail with name="Title" %}</h1>
</div>
{% endif %}
If your category may have uploaded multiple Banner images and you wish to display them in a carousel format, you need to introduce a front-end carousel component (such as Swiper or Owl Carousel), and then iteratebannerImagesArray:
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
<div class="category-carousel swiper-container">
<div class="swiper-wrapper">
{% for image in bannerImages %}
<div class="swiper-slide">
<img src="{{ image }}" alt="{% categoryDetail with name="Title" %}" />
</div>
{% endfor %}
</div>
{# 如果需要，添加分页器和导航按钮 #}
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
{% endif %}
Display thumbnails
Category thumbnails are usually used to display in category lists or navigation. If you want to display the thumbnail of the current category in a small area on the category page, you can usename="Thumb":
<div class="category-thumbnail-area">
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
<img src="{{ categoryThumb }}" alt="{% categoryDetail with name="Title" %}" />
{% else %}
{# 如果没有上传缩略图，可以显示一个默认占位图 #}
<img src="/public/static/images/default-thumb.png" alt="{% categoryDetail with name="Title" %}" />
{% endif %}
</div>
English translation: Create a richer category page example
Below is an example of integrating the above elements into the category list pagearticle/list.htmlThis is a simplified example, you can expand it based on your design requirements:
auto
{% block title %}
<title>{% tdk with name="Title" siteName=true %}</title>
{% endblock %}
{% block content %}
<div class="container">
{# 分类 Banner 区域 #}
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{% set mainBanner = bannerImages[0] %} {# 假设只显示第一张作为主Banner #}
<div class="hero-banner" style="background-image: url('{{ mainBanner }}');">
<h1 class="hero-title">{% categoryDetail with name="Title" %}</h1>
</div>
{% else %}
<div class="hero-banner-placeholder">
<h1 class="hero-title">{% categoryDetail with name="Title" %}</h1>
</div>
{% endif %}
<div class="category-header">
{# 分类缩略图，可选 #}
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
<div class="category-icon">
<img src="{{ categoryThumb }}" alt="{% categoryDetail with name="Title" %}" />
</div>
{% endif %}
{# 分类简介 #}
<div class="category-intro">
<p>{% categoryDetail with name="Description" %}</p>
</div>
</div>
{# 详细分类内容，如果需要 #}
{% categoryDetail categoryFullContent with name="Content" %}
{% if categoryFullContent %}
<div class="category-detail-content">
{{ categoryFullContent|safe }}
</div>
{% endif %}
<hr>
{# 该分类下的文章列表 #}
<div class="article-list">
<h2>最新文章</h2>
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<div class="article-item">
<h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
<p>{{ item.Description }}</p>
<small>发布日期: {{ stampToDate(item.CreatedTime, "2006-01-02") }} 阅读: {{ item.Views }}</small>
{% if item.Thumb %}
<img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="article-thumb" />
{% endif %}
</div>
{% empty %}
<p>该分类下暂无文章。</p>
{% endfor %}
{% endarchiveList %}
{# 分页导航 #}
<div class="pagination">
{% pagination pages with show="5" %}
<ul>
{% if pages.PrevPage %}<li class="page-item"><a href="{{pages.PrevPage.Link}}">上一页</a></li>{% endif %}
{% for page