How can I display the list of articles under the category page and also show the category's Logo or Banner image at the same time?
In Anqi CMS, managing and displaying categorized content is a crucial step in building a structured, user-friendly website.The category page not only helps users quickly find the content they are interested in, but also, with carefully designed visual elements such as logos or banner images, it can effectively enhance the brand image and user experience.This article will detail how to implement these features on the Anqi CMS category page.
Understand the composition and template settings of the category page
In Anqi CMS, each category corresponds to a page that can display its content.To better control the layout and display effects of these pages, Anqi CMS provides a flexible template mechanism.When you want to display an article list and a unique Logo or Banner image for a specific category or all categories under a specific model, we need to pay attention to the template file of the category page.
The template files of AnQi CMS are usually stored in/templateIn the directory, following certain naming conventions. For category list pages, the commonly used template file naming format is:
{模型table}/list.html: This is the default list page template for all categories under the model.{模型table}/list-{分类ID}.html：You can customize a dedicated list page template for a specific category ID.
This means you can use a list page template for the “Article” model (assuming its table name isarticle) for all categories.article/list.htmlOr it is specially designed for the "News Information" category with ID 10article/list-10.htmlIn the "Document Category" settings in the background, you can specify the template file to be used for each category.
Second, display the Logo or Banner image of the category on the category page
The Logo or Banner image is an important visual component of the category page.The Anqi CMS provides the function to upload these images for each category.You can go to the background and enter "Content Management" -> "Document Category", when editing a category, you will see the upload options for "Banner Image" and "Thumbnail".
In the template, we can usecategoryDetailtags to get the detailed information of the current category, including these images.
Get the category Logo or thumbnail:If your category is only set with one representative Logo or thumbnail, you can use it directly:LogoorThumbfield. Usually,Logofield is used to display the large image, whileThumbThe field is used for smaller thumbnails.
{# 假设这是分类列表页模板的某个位置 #}
<div class="category-header">
{# 获取当前分类的Logo图，并将其用作页面标题的背景或直接展示 #}
{% categoryDetail categoryLogo with name="Logo" %}
{% if categoryLogo %}
<img src="{{ categoryLogo }}" alt="{% categoryDetail with name='Title' %}" class="category-logo">
{% endif %}
{# 或者获取分类的缩略图 #}
{% categoryDetail categoryThumb with name="Thumb" %}
{% if categoryThumb %}
<img src="{{ categoryThumb }}" alt="{% categoryDetail with name='Title' %}" class="category-thumbnail">
{% endif %}
<h1>{% categoryDetail with name='Title' %}</h1>
<p>{% categoryDetail with name='Description' %}</p>
</div>
Display category Banner group images:If a category uploads multiple Banner images (in the "Banner Image" option in the backend), these images will be stored as a set of images. You can access them throughImagesField retrieval and use requiredforLoop to traverse and display.
{# 假设这是分类列表页模板的Banner区域 #}
<div class="category-banner-slider">
{% categoryDetail bannerImages with name="Images" %}
{% if bannerImages %}
{# 遍历所有Banner图片 #}
{% for imageSrc in bannerImages %}
<div class="banner-item">
<img src="{{ imageSrc }}" alt="{% categoryDetail with name='Title' %} - Banner {{ forloop.Counter }}">
</div>
{% endfor %}
{# 如果只需要显示第一张Banner图作为固定头部背景 #}
{% set firstBanner = bannerImages[0] %}
<div class="fixed-banner" style="background-image: url('{{ firstBanner }}');"></div>
{% endif %}
</div>
III, Display the list of articles under the category on the category page.
Displaying the list of articles under the category is the core function of the category page. Anqi CMS providesarchiveListThe tag makes it easy to achieve this requirement. This tag is very flexible and can filter articles based on various conditions, including categories and models.
On the category page, we usually want to retrieve all articles under the current category.archiveListTags automatically identify the category ID of the current page, so we usually do not need to explicitly specify it.categoryIdParameters, unless you want to get articles from other categories.
Basic article list display:The following code snippet shows how to get the list of articles under the current category and display the title, link, summary, and thumbnail of each article.
{# 假设这是文章列表区域 #}
<div class="article-list-section">
{% archiveList articles with type="page" limit="10" %} {# type="page"表示启用分页，limit="10"表示每页显示10篇文章 #}
{% for item in articles %}
<div class="article-item">
{% if item.Thumb %}
<a href="{{ item.Link }}" class="article-thumb">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
</a>
{% endif %}
<div class="article-content">
<h2 class="article-title"><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p class="article-description">{{ item.Description }}</p>
<div class="article-meta">
<span>发布日期：{{ stampToDate(item.CreatedTime, "2006-01-02") }}</span>
<span>浏览量：{{ item.Views }}</span>
</div>
</div>
</div>
{% empty %}
<p>当前分类下暂无文章。</p>
{% endfor %}
{% endarchiveList %}
</div>
In the above code:
type="page"This is a key setting to enable pagination.limit="10"It defines the number of articles displayed per page.item.Thumb/item.Link/item.Title/item.DescriptionisarchiveListThe fields available for each article while iterating tags.stampToDateThe filter is used to format the article's publish timestamp.
Four, implement the pagination function of the article list.
When the number of articles is large, pagination is an essential feature that can improve page loading speed and user experience. Anqi CMS provides pagination througharchiveListoftype="page"Combinepaginationtags.
paginationThe tag needs to be placed inarchiveListoutside the tag, and it needsarchiveListto pass the pagination data to it.
{# 承接上文的文章列表代码，在其下方添加分页部分 #}
<div class="pagination-section">
{% pagination pages with show="5" %} {# show="5"表示最多显示5个页码按钮 #}
<ul class="pagination-list">
{# 首页按钮 #}
<li class="page-item {% if pages.FirstPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.FirstPage.Link }}">{{ pages.FirstPage.Name }}</a>
</li>
{# 上一页按钮 #}
{% if pages.PrevPage %}
<li class="page-item">
<a href="{{ pages.PrevPage.Link }}">{{ pages.PrevPage.Name }}</a>
</li>
{% endif %}
{# 中间页码按钮 #}
{% for pageItem in pages.Pages %}
<li class="page-item {% if pageItem.IsCurrent %}active{% endif %}">
<a href="{{ pageItem.Link }}">{{ pageItem.Name }}</a>
</li>
{% endfor %}
{# 下一页按钮 #}
{% if pages.NextPage %}
<li class="page-item">
<a href="{{ pages.NextPage.Link }}">{{ pages.NextPage.Name }}</a>
</li>
{% endif %}
{# 末页按钮 #}
<li class="page-item {% if pages.LastPage.IsCurrent %}active{% endif %}">
<a href="{{ pages.LastPage.Link }}">{{ pages.LastPage.Name }}</a>
</li>
</ul>
<p class="pagination-info">总计 {{ pages.TotalItems }} 篇文章，{{ pages.TotalPages }} 页，当前第 {{ pages.CurrentPage }} 页。</p>
{% endpagination %}
</div>
here,pagesThe variable contains all the pagination-related data, such asTotalItems(Total number of articles),TotalPages(Total number of pages),CurrentPage(Current page) and links to each page (Link) and name (Name).
V, Integration and Practice Suggestions
To implement 'Display the list of articles under the category page and also show the category's Logo or Banner image', you can create a category namedarticle/list.html(or a specific category ID template) file, then integrate all the above code snippets into it.
Template file organization:
- Create in the template theme directory you have selected.
article/list.htmlfile. - Place the HTML structure, styles, and JavaScript code that you want to apply to all article category pages in this file.
- Insert the code above at the appropriate position in the file to display the category Logo/Banner image, article list, and pagination.
Backend configuration:
- Ensure your article is correctly categorized under the corresponding category and each article has uploaded a thumbnail (