When building a website, category information is not only the skeleton of the content, but also the key to user navigation, search engine optimization (SEO), and improving user experience.AutoCMS (AutoCMS) is equipped with a flexible template engine, which allows you to easily display the names, descriptions, content, and links of categories on the website front end, providing visitors with a clear navigation path and also offering rich information to search engines to better understand the structure of your website.
This article will delve into how to flexibly call and display your website's category information through several core tags in the AnQiCMS template.
Core tags:categoryDetailWithcategoryList
In AnQiCMS, there are mainly two tags used to handle the display of 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 certain category ID,categoryDetailTags are your powerful assistants.categoryListIf you want to build a navigation menu, sidebar category list, or display child categories under a specific content model on the homepage,categoryListTags can be put to use, it can iterate through and list multiple categories.
Next, we will learn in detail how to use these two tags to display various information of the categories.
Display detailed information of a single category
Suppose you are editing the detail page template of a category (for example/template/{您的模型表名}/list.html1. Display the category name (or custom category template), you want to display various detailed data of the current category here.
1. Display category name (}]}Title)
The name of the category is its most basic identifier. You can use the following methods to obtain and display the current category name:
<div>
<h1>{% categoryDetail with name="Title" %}</h1>
</div>
If you need to get the name of a specific ID category or want to assign the name to a variable for later 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 category description (Description)
Category description is usually used to briefly summarize the theme of the category, 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 detailed content filled in the background (such as, introduction text written using a rich text editor), you canContentField to display. It is particularly important to note that the classification content may contain HTML tags. To ensure that these tags are parsed correctly by the browser instead of being 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 links (Link)
Category links are crucial for guiding users and search engines to access the category page. Typically, they are used for<a>Tagshrefproperties.
<a href="{% categoryDetail with name="Link" %}">点击查看更多</a>
When building breadcrumb navigation, you will also often use the 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 the images associated with the category (Banner image, thumbnail)
The category support of AnQi CMS can set thumbnails (Thumb), Banner images (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 toImagesReturns an array of image addresses, you need to usefora loop to iterate through and display them, which is very suitable for making a slideshow.<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 access them byExtrausing the field name directly or by using the custom field name.
{# 循环显示所有自定义字段 #}
{% 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 are only concerned with a specific custom field, for example, if you have defined a field named "Contact Email" with the calling field namecontactEmail, you can use it directly like this:
<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. Obtain the top-level category list
It is usually used to build the main navigation menu. You need to specifymoduleIdTell the system which content model (e.g., article model ID 1, product model ID 2) under which to obtain the classification, and setparentId="0"To obtain the top-level classification.
<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 whether 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 subcategories under the main category. This can be done within another loop.categoryListLabel 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 %}
Useful tips
- SEO Optimization: In the description of the category
Description合理地融入关键词，能有效提升分类页面在搜索引擎中的表现。同时，清晰的分类链接结构对搜索引擎抓取也至关重要。 - HTML Content SecurityWhen you display the category
Contentfield, remember to use|safefilters. This is to prevent background editing