In website operation, a clear and informative classification 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 about various categories on your website, such as category logos and introductions, thereby creating a more attractive content layout.
Understand the management and configuration of category information
On the Anqi CMS backend, the management of category information is very convenient.When you enter the 'Content Management' under 'Document Category' to add or edit, you will see options such as 'Category Name', 'Category Introduction', 'Thumbnail' (usually used for Logo) and 'Banner Image'.These fields allow you to fill in exclusive descriptive text and visual elements for each category.
- Category NameDirectly used for display on the front end, it is the identifier for the category.
- Category introduction Provides a brief description for the category, which not only helps visitors quickly understand the category theme, but is also part of Search Engine Optimization (SEO)
descriptionTag content. - ThumbnailIt is usually used as a Logo or small image identifier, making the category more visually distinguishable.
- Banner imageUsed 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 called in the front-end through template tags.
Get the details of a single category:categoryDetailTag
When you need to obtain and display detailed information about a category on a page (such as a category detail page, or at a specific location to display fixed category information),categoryDetailTags are your ideal choice.
The usage of this tag is very concise, you can usenameparameters to specify the fields to be retrieved, andidortokenparameters to locate specific categories.
Basic Usage: Get the current page category logo and introduction
Suppose you are editing a category page template and 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 system will automatically identify the category of the current page and extract the corresponding fields.altThe settings of properties are very important for SEO and image accessibility, it is recommended to useTitleasalt.
Get information for a specific category: through ID or URL alias
If you want to display a specific category at any location on the website (for example, with ID as1The logo and introduction of the "Company News" category 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 (tokenTo specify a category, which is 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:categoryListTag
In many cases, you need to display multiple categories on a page, such as website navigation, homepage category modules, or sidebars. At this point,categoryListThe label comes into play. It allows you to loop through and display a series of category Logos, names, and descriptions.
Get the list of top-level categories and their Logos and descriptions.
Assume you want to display all top-level category logos, names, and descriptions on the homepage:
<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"It is usually used to specify the "article model", and you can adjust it according to your actual needs.parentId="0"Represents getting only the top-level categories without any parent categories.{% for item in categories %}Loop through each category.item.Link/item.Title/item.Logo/item.DescriptionThen, get the link, name, logo image address, and description of the current looped category respectively.{% if item.Logo %}It is a very practical conditional judgment, ensuring that the Logo image is rendered only when it actually exists.<img>tag, to avoid broken image icons on the page, enhancing user experience.
Display subcategory list and information
You can also retrieve the subcategory list under a specific category as needed, and display their Logo and introduction. For example, on a category page, display all subcategories under it:
<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.IdIndicates obtaining the current category (bycategoryDetailautomatically identifying the tag or URL) subcategory. In the loop, we usedsubItem.ThumbAs a logo, because the logo and thumbnail may be slightly different in the background category settings,ThumbUsually used for small images in the list.
Summary
Of Security CMScategoryDetailandcategoryListThe tags provide great flexibility for displaying classification information on the website. Through them, you can easily