In website operation, clear and informative category display is the key to attracting visitors, improving user experience, and optimizing search engine rankings.AnQiCMS provides a straightforward and powerful template tag system that allows you to flexibly obtain and display detailed information of various categories on the website, such as category logos and introductions, thus creating a more attractive content layout.
Understand the management and configuration of category information
In the backend of Anqi CMS, category information management is very convenient.When you enter the 'Content Management' under 'Document Categories' for addition or editing, you will see options such as 'Category Name', 'Category Introduction', 'Thumbnail' (usually used for Logo) as well as 'Banner Image'.These fields allow you to fill in exclusive descriptive text and visual elements for each category.
- Category name：Directly used for front-end display, it is the identifier for the category.
- Category Introduction：Provide a brief description for the category, which not only helps visitors quickly understand the theme of the category, but also plays a role in Search Engine Optimization (SEO)
descriptionThe important content of tags. - Thumbnail：English used as a classification Logo or small image identifier, making the classification more visually recognizable.
- Banner image：Used for the top banner of the category page, multiple images can be uploaded to form a carousel effect, providing a richer visual experience.
This information configured in the background is all based on template tags called in the front end.
Get detailed information of a single category:categoryDetailtags
When you need to retrieve and display detailed information of a category on a page (for example, on a detailed page of a certain category, or to display information of a fixed category at a specific location),categoryDetailThe label is your ideal choice.
The usage of this label is very simple, you can throughnameParameters specify the fields to be retrieved, and throughidortokenParameters to locate the specific category.
Basic Usage: Get the current page category logo and introduction
Assuming you are editing a category page template, and you want to display the current category logo and introduction:
{# 获取当前分类的Logo #}
<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" />
{# 获取当前分类的名称 #}
<h2>{% categoryDetail with name="Title" %}</h2>
{# 获取当前分类的简介 #}
<p>{% categoryDetail with name="Description" %}</p>
{# 获取当前分类的链接 #}
<a href="{% categoryDetail with name="Link" %}">查看更多</a>
In the above code,{% categoryDetail with name="..." %}The page category will be automatically recognized, and the corresponding fields will be extracted.altThe settings of properties are very important for SEO and image accessibility, it is recommended to useTitleasalttext.
Specify category to get information: by ID or URL alias
If you want to display a specific category at any location on the website (for example, by ID of 1The "Company News" category's Logo and introduction can be done like this:
{# 获取ID为1的分类Logo #}
<img src="{% categoryDetail with name="Logo" id="1" %}" alt="{% categoryDetail with name="Title" id="1" %}" />
{# 获取ID为1的分类名称 #}
<h3>{% categoryDetail with name="Title" id="1" %}</h3>
{# 获取ID为1的分类简介 #}
<p>{% categoryDetail with name="Description" id="1" %}</p>
{# 获取ID为1的分类链接 #}
<a href="{% categoryDetail with name="Link" id="1" %}">前往公司新闻</a>
Similarly, you can also use the category's URL alias (tokenSpecify the category with ( )，which is very convenient when the alias is fixed and easy to remember.
{# 获取URL别名为'about-us'的分类Logo #}
<img src="{% categoryDetail with name="Logo" token="about-us" %}" alt="{% categoryDetail with name="Title" token="about-us" %}" />
Batch retrieval and list display:categoryListtags
In many cases, you need to display multiple categories on a single page, such as website navigation, homepage category modules, or sidebars. At this time,categoryListThe label comes into play. It allows you to loop through and display a series of categories' Logos, names, and introductions, etc.
Get the top-level category list and its Logo and introduction
假设您想在首页展示所有顶层分类的Logo、名称和简介：
<ul class="category-grid">
{% categoryList categories with moduleId="1" parentId="0" %} {# moduleId指定模型，parentId="0"获取顶级分类 #}
{% for item in categories %}
<li class="category-item">
<a href="{{ item.Link }}">
{% if item.Logo %} {# 检查Logo是否存在，避免空图片标签 #}
<img src="{{ item.Logo }}" alt="{{ item.Title }}" class="category-logo" />
{% endif %}
<h4>{{ item.Title }}</h4>
<p class="category-description">{{ item.Description }}</p>
</a>
</li>
{% empty %}
<li>暂无分类信息。</li>
{% endfor %}
{% endcategoryList %}
</ul>
In the above code:
moduleId="1"通常用于指定“文章模型”，您可以根据实际需求调整。parentId="0"Represents retrieving the top-level categories with no parent categories.{% for item in categories %}Loop through each category.item.Link/item.Title/item.Logo/item.DescriptionThen, retrieve the link, name, logo image address, and description of the current loop category.{% if item.Logo %}It is a very practical conditional judgment, ensuring that the Logo image is rendered only when it actually exists.<img>Label, to avoid broken image icons on the page, enhancing user experience.
Display the subcategory list and its information
You can also retrieve the list of subcategories under a category as needed, and display their logos and descriptions. For example, display all subcategories under a category page:
<h3>子分类列表</h3>
<ul class="sub-category-list">
{% categoryList subCategories with parentId=category.Id %} {# 假设category.Id是当前分类的ID #}
{% for subItem in subCategories %}
<li>
<a href="{{ subItem.Link }}">
{% if subItem.Thumb %} {# 子分类常用Thumb作为缩略图 #}
<img src="{{ subItem.Thumb }}" alt="{{ subItem.Title }}" class="sub-category-thumb" />
{% endif %}
<h5>{{ subItem.Title }}</h5>
<small>{{ subItem.Description }}</small>
</a>
</li>
{% empty %}
<li>当前分类下暂无子分类。</li>
{% endfor %}
{% endcategoryList %}
</ul>
Here,parentId=category.IdRepresents getting the current category (bycategoryDetailautomatically identifying tags or URLs) subcategory. In the loop, we usesubItem.ThumbAs a Logo, because in the background category settings, the Logo and thumbnail may be slightly different,Thumbusually used for small images in the list.
Summary
Anqi CMS'scategoryDetailandcategoryListThe tag provides great flexibility for displaying website category information. Through them, you can easily