How to display the name, description, content, and link of the category?
When building a website, categorization information is not only the skeleton of the content, but also the key to user navigation, search engine optimization (SEO), and improving user experience.AnQiCMS (AnQiCMS) with its flexible template engine allows you to easily display categories, descriptions, content, and links on the website front-end, thereby providing visitors with a clear navigation path and rich information for search engines to better understand your website structure.
This article will delve into how to flexibly call and display the category information of your website in the AnQiCMS template using several core tags.
Core tags:categoryDetailwithcategoryList
In AnQiCMS, there are mainly two tags used to display category information:
categoryDetailWhen you need to display detailed information (such as category name, description, content, Banner image, etc.) on a category page itself, or when you know a specific category ID,categoryDetailTags are your helpful assistants.categoryListIf you want to build a navigation menu, sidebar category list, or display subcategories under a specific content model on the homepage,categoryListThe tag can be put to use, it can iterate and list multiple categories.
Next, we will learn in detail how to use these two tags to display the various information of categories.
Display detailed information of a single category
Suppose you are editing the detail page template of a category (for example/template/{您的模型表名}/list.htmlOr a custom category template), you want to display various detailed data of the current category here.
1. Show category name (Title)
The category name is its most basic identifier. You can use the following method to obtain and display the name of the current category:
<div>
<h1>{% categoryDetail with name="Title" %}</h1>
</div>
If you need to retrieve the name of a specific ID category or want to assign the name to a variable for subsequent use, you can do it like this:
{# 获取ID为10的分类名称 #}
<h2>特定分类名称：{% categoryDetail with name="Title" id="10" %}</h2>
{# 将当前分类名称赋值给一个变量 #}
{% set currentCategoryName = categoryDetail with name="Title" %}
<p>当前分类名称是：{{ currentCategoryName }}</p>
2. Display the category description (Description)
Category descriptions are usually used to briefly summarize the category topic, which is very helpful for SEO and user understanding.
<meta name="description" content="{% categoryDetail with name="Description" %}">
<p>分类简介：{% categoryDetail with name="Description" %}</p>
3. Display category content (Content)
If your category has filled in detailed content in the background (for example, using rich text editor-written introduction text), you canContentThe field should display it. It is especially important to note that the category content may contain HTML tags. To ensure that these tags are parsed correctly by the browser rather than displayed as plain text, you need to use|safefilter.
<div class="category-content">
{% set categoryContent = categoryDetail with name="Content" %}
{{ categoryContent|safe }}
</div>
4. Display category link (Link)
Category links are crucial for guiding users and search engines to the category page. They are usually used for<a>label'shrefProperty.
<a href="{% categoryDetail with name="Link" %}">点击查看更多</a>
When building breadcrumb navigation, you will also often use category links:
{% breadcrumb crumbs with index="首页" %}
<ul>
{% for item in crumbs %}
<li><a href="{{item.Link}}">{{item.Name}}</a></li>
{% endfor %}
</ul>
{% endbreadcrumb %}
5. Display category-related images (Banner image, thumbnail)
Support for setting thumbnail images in AnQi CMS categories (Thumb), Banner image (Logo) and a set of Banner carousel images (Images)
Category thumbnail/Banner image (
Thumb/Logo):<img src="{% categoryDetail with name="Logo" %}" alt="{% categoryDetail with name="Title" %}" /> <img src="{% categoryDetail with name="Thumb" %}" alt="{% categoryDetail with name="Title" %}" />Category Banner group image (
Images):due toImagesIt returns an array of image addresses, you need to useforLoop to traverse and display them, which is very suitable for making a carousel.<div class="category-banner-carousel"> {% categoryDetail categoryImages with name="Images" %} {% for imageUrl in categoryImages %} <img src="{{ imageUrl }}" alt="{% categoryDetail with name="Title" %}" /> {% endfor %} {% endcategoryDetail %} </div>
6. Display custom fields of categories
If you have added custom fields to the category model in the background, you can go throughExtraField or directly use the custom field name to call.
{# 循环显示所有自定义字段 #}
{% categoryDetail extras with name="Extra" %}
<div class="category-custom-params">
{% for field in extras %}
<div>
<span>{{ field.Name }}：</span>
<span>{{ field.Value }}</span>
</div>
{% endfor %}
</div>
If you only care about a specific custom field, for example, if you define a field named "contact email", its calling field name iscontactEmailyou can use it directly:
<p>分类联系邮箱：{% categoryDetail with name="contactEmail" %}</p>
Display category list information
When you need to display multiple categories, such as in the website's navigation menu, sidebar, or some block on the homepage,categoryListtags are very useful.
1. Get the top-level category list
It is usually used to build the main navigation menu. You need to specifymoduleIdTell the system to get the category under which content model (for example, article model ID is 1, product model ID is 2) and setparentId="0"To get the top-level category.
<nav class="main-navigation">
<ul>
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
In the above example,item.IsCurrentIt can help you determine if the current loop category is the category of the page the user is visiting, so that you can add a highlight style to it.
2. Get the subcategory list
In many cases, you may need to display the subcategories under the main category. This can be used again inside a loop.categoryListTag implementation.
<nav class="main-navigation">
<ul>
{% categoryList topCategories with moduleId="1" parentId="0" %}
{% for topCategory in topCategories %}
<li {% if topCategory.IsCurrent %}class="active"{% endif %}>
<a href="{{ topCategory.Link }}">{{ topCategory.Title }}</a>
{# 判断是否有子分类，如果有，则再次循环 #}
{% if topCategory.HasChildren %}
<ul class="sub-menu">
{% categoryList subCategories with parentId=topCategory.Id %}
{% for subCategory in subCategories %}
<li {% if subCategory.IsCurrent %}class="active"{% endif %}>
<a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
</li>
{% endfor %}
{% endcategoryList %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endcategoryList %}
</ul>
</nav>
exceptTitleandLinkYou can also display other information in the list, such as the number of documents included in the categoryArchiveCount:
{% categoryList categories with moduleId="1" parentId="0" %}
{% for item in categories %}
<p><a href="{{ item.Link }}">{{ item.Title }}</a> ({{ item.ArchiveCount }}篇文章)</p>
{% endfor %}
{% endcategoryList %}
Practical tips
- SEO OptimizationDescription of the category (
DescriptionIncorporating keywords rationally can effectively improve the performance of the classification page in search engines. At the same time, a clear classification link structure is crucial for search engine crawling. - HTML content securityWhen you display categories'
Contentfields, remember to use|safefilters. This is to prevent background editing