How to retrieve and display details of a specific category, including description, content, and Banner image?
When operating a website, we often need to display unique content for different category pages, such as a product category may have a detailed introduction and a prominent Banner image, while a news category focuses more on concise descriptions.AnQi CMS provides a flexible mechanism that allows us to easily obtain and display detailed information about specific categories, including descriptions, content, and Banner images.
Backend settings are fundamental: to enrich the content of categories
Before displaying the category details on the front-end, we need to fill in this information in the Anqi CMS backend. This is like preparing a "business card" for your category.
- Enter Category Management:Log in to the AnQi CMS backend, navigate to the 'Content Management' menu, and then click 'Document Category'. Here, you can see the list of all categories.
- Edit or add a category:Select a category that needs to display detailed information, click the 'Edit' button to enter its details page; or, you can also add a new category.
- Enter key information:
- Category NameThis is the category title, which will be displayed on the front end.
- Category introductionThis is usually used for search engine optimization (SEO) purposes.
descriptionTag, which can also be used as a brief introduction on the page. - Category contentThis is a rich text editor, where you can add more detailed classification descriptions, pictures, and content.
- Banner imageIn the 'Other Parameters' section, you will find the 'Banner Image' option.You can upload multiple images, which can be used as the carousel or main visual image on the category page.It is recommended to use images of the same size when uploading to maintain aesthetics.
- Thumbnail: Similarly, in the "Other parameters", you can upload a category thumbnail, which is used in the list or other places where a small image needs to be displayed.
Ensure that this content has been filled in and saved properly, so that the front-end template can call and display it correctly.
Core tags:categoryDetailusefulness
Anqi CMS provides a namedcategoryDetailThe template tag, it is a powerful tool for us to get the details of the category. This tag can help us get the information of the current category page we are visiting, or the various information of the category specified by the ID.
Get the category details of the current page
When your visitor is browsing a category page, such as the "Product Display" category, we usually want to directly obtain the detailed information of this "Product Display" category. In this case,categoryDetailThe label intelligently identifies the category of the current page, we do not need to specify any ID, just throughnameparameters to obtain the corresponding field.
For example, to display the title of the current category:
{% categoryDetail with name="Title" %}
Get details of a specified category
Sometimes, you may need to specify a non-category page or want to display information about multiple categories on a single page, in which case you need to make it clear thatcategoryDetailThe tag to get data for which category. We can specify it throughidortokenthe (URL alias) parameter.
For example, if you know the ID of a category is10, and you want to get its title:
{% categoryDetail with name="Title" id="10" %}
Or if the category URL alias isabout-us:
{% categoryDetail with name="Title" token="about-us" %}
Display the category description and content
NowcategoryDetailTags, displaying the description and content becomes very direct.
Display the category description (Description)
Category descriptions are usually plain text and can be output directly:
<p>分类描述：{% categoryDetail with name="Description" %}</p>
If you want to assign the description content to a variable for subsequent processing, you can do it like this:
{% set categoryDescription = categoryDetail with name="Description" %}
<p>{{ categoryDescription }}</p>
Display category content (Content)
Categories typically contain HTML code generated by rich text editors. In order for the browser to correctly parse and render these HTML, we need to use|safeFilter. If the content is in Markdown format, we can also choose to userender=trueparameters to allow the system to convert it to HTML.
<div class="category-content">
{% set categoryContent = categoryDetail with name="Content" %}
{{ categoryContent|safe }}
</div>
If the background content is in Markdown format and you want the system to automatically render it as HTML:
<div class="category-content">
{% set categoryContent = categoryDetail with name="Content" render=true %}
{{ categoryContent|safe }}
</div>
Display the category Banner image and thumbnail
Visual elements of categories are crucial for enhancing the aesthetic appeal and information conveyance of the page.
Display Category Banner Image (Images)
The Category Banner images usually support uploading multiple images in the background.categoryDetailtag to obtainImagesWhen the field is called, it will return an array of image URLs. We can iterate over this array to display all Banner images, or take only the first one as the main Banner.
Traverse all Banner images:
<div class="category-banners">
{% categoryDetail categoryImages with name="Images" %}
{% for imageUrl in categoryImages %}
<img src="{{ imageUrl }}" alt="分类Banner图">
{% endfor %}
</div>
Only display the first Banner image:If you only want to display the first Banner image and need to judge if it exists, you can do it like this:
{% categoryDetail categoryImages with name="Images" %}
{% if categoryImages %}
<img src="{{ categoryImages[0] }}" alt="分类主Banner图">
{# 也可以把它作为背景图 #}
<div class="hero-banner" style="background-image: url('{{ categoryImages[0] }}');">
<!-- 页面其他内容 -->
</div>
{% endif %}
Display category thumbnails (LogoorThumb)
Category thumbnails are usually used in lists or other small display scenarios.LogoIt usually refers to large thumbnails, whileThumbIt refers to a smaller thumbnail that has been processed by the system.
<div class="category-thumbnail">
<img src="{% categoryDetail with name="Thumb" %}" alt="分类缩略图">
</div>
<div class="category-logo">
<img src="{% categoryDetail with name="Logo" %}" alt="分类大图">
</div>
Practice: Build a category detail page
Now, let's combine these tags to create a typical category detail page layout:
`twig {# Assume this is a page template for some category, such as products/list.html #} <!DOCTYPE html>
<meta charset="UTF-8">
{# 获取分类标题，并附加网站名称 #}
<title>{% tdk with name="Title" siteName=true %}</title>
{# 获取分类描述作为页面Meta Description #}
<meta name="description" content="{% categoryDetail with name="Description" %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<header>
{# 头部导航等通用元素 #}
</header>
<main class="container">
<nav class="breadcrumb">
{% breadcrumb crumbs with index="首页" %}
<ul>
{% for item in crumbs %}
<li><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
<section class="category-header">
{# 显示分类标题 #}
<h1>{% categoryDetail with name="Title" %}</h1>
{# 显示分类Banner图（取第一张作为主图） #}
{% categoryDetail categoryBanners with name="Images" %}
{% if categoryBanners %}
<div class="main-banner">
<img src="{{ categoryBanners[0] }}" alt="{% categoryDetail with name="Title" %} Banner">
</div>
{% endif %}
{# 显示分类描述 #}
{% set categoryDescription = categoryDetail with name="Description" %}
{% if categoryDescription %}
<p class="category-intro">{{ categoryDescription }}</p>
{% endif %}
</section>
<section class="category-full-content">
{# 显示分类详细内容 #}
{% set categoryFullContent = categoryDetail with name="Content" render=true %} {# 假设后台内容可能是Markdown #}
{% if categoryFullContent %}
<div class="rich-text-content">
{{ categoryFullContent|safe }}
</div>
{% endif %}
</section>
<section class="category-products-list">
<h2>{% categoryDetail with name="Title" %} 下的文章/产品</h2>
{# 在这里可以调用 archiveList