In website content management, category navigation and detail pages are the core paths for users to browse the website and obtain information, as well as an important basis for search engines to understand the structure of the website.An intuitive and clear classification system can not only greatly improve user experience, but also effectively help the website's SEO performance.categoryListandcategoryDetailThese template tags can easily build powerful, beautiful, and practical classification navigation and detail display.
1. Build flexible classification navigation: Deep understandingcategoryListtags
categoryListTags are mainly used to obtain the classification list of websites.No matter if you want to display the main category at the top, build a multi-level category tree in the sidebar, or show subcategories under a specific category on the homepage, this tag can provide powerful support.
1. The basic usage and core parameters of the tag
When usingcategoryListWhen defining a tag, we usually define a variable to receive the obtained classification data, for example{% categoryList categories with ... %}...{% endcategoryList %}.categoriesThis is an array object containing multiple categories of information, and we can iterate over it to display each category.
The following are several commonly used and critical parameters that determine which categories you can obtain and how they are organized:
moduleIdSpecify the content modelYour website may have multiple content types, such as articles, products, etc., which are referred to as "content models" in the Anqi CMS.moduleId="1"(Taking the article model as an example) ormoduleId="2"This is an example of a product model to specify which content model's categories you want to obtain.parentId: Control the hierarchical relationshipThis is a key parameter for building hierarchical navigation.- When
parentId="0"When you do this, you will get all the top-level categories under the specified model. This is a common way to build the main navigation or first-level category list. - To get all subcategories under a specific category, just set
parentIdto the parent categoryID. - An extremely practical technique is that when you are on a certain category page (such as an article list page), if you want to get the sibling categories of the current category (i.e., other categories at the same level), you can
parentIdset"parent". The system will automatically identify the parent category of the current category and return all its subcategories (including the current category itself).
- When
limit: Limit the number of displayed items.If you only want to display a fixed number of categories, such as showing 5 popular categories on the homepage, you can uselimit="5". More advanced usage islimit="2,10"This means starting from the 2nd category, 10 categories are retrieved.allGet all categoriesIf you need to retrieve all categories under a specified model, regardless of the level, you can useall=trueThis is very useful when building a full-site category map or for some special display.
2.categoryListThe practical application scenarios of
Building the main navigation
{% categoryList categories with moduleId="1" parentId="0" %} <ul class="main-nav"> {% for item in categories %} <li {% if item.IsCurrent %}class="active"{% endif %}> <a href="{{ item.Link }}">{{ item.Title }}</a> </li> {% endfor %} </ul> {% endcategoryList %}This code will retrieve all top-level categories under the article model and generate a simple navigation list.
item.IsCurrentIt can help you determine whether the current category is the category of the page the user is visiting, thereby adding a highlight style.Create multi-level nested sidebarWhen you need to display a complex classification structure, you can use
categoryListnested calls:{% categoryList topCategories with moduleId="1" parentId="0" %} <ul class="sidebar-menu"> {% for topCategory in topCategories %} <li> <a href="{{ topCategory.Link }}">{{ topCategory.Title }}</a> {% if topCategory.HasChildren %} {# 判断是否有子分类 #} {% categoryList subCategories with parentId=topCategory.Id %} <ul class="sub-menu"> {% for subCategory in subCategories %} <li><a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a></li> {% endfor %} </ul> {% endcategoryList %} {% endif %} </li> {% endfor %} </ul> {% endcategoryList %}Here are the
topCategory.HasChildrenIt is a very useful field that helps us determine whether the current category has subcategories, thereby deciding whether to continue the nested callcategoryList.Combined with the document list displayOn the homepage or content aggregation page, we often need to display a list of articles under different categories.
categoryListAlso works well witharchiveList(Document list tag) cooperation:{% categoryList featureCategories with moduleId="1" parentId="0" limit="3" %} <div class="category-section"> {% for category in featureCategories %} <h3><a href="{{ category.Link }}">{{ category.Title }}</a></h3> <ul class="article-list"> {% archiveList articles with categoryId=category.Id limit="5" %} {# 获取当前分类下的5篇文章 #} {% for article in articles %} <li><a href="{{ article.Link }}">{{ article.Title }}</a></li> {% endfor %} {% endarchiveList %} </ul> {% endfor %} </div> {% endcategoryList %}
IncategoryListin the loop,item(Category object) provides rich field information, such asId(Category ID),Title(Category name),Link(Category link),Description(Category description),Logo(Thumbnail full image),Thumb(Thumbnail,)HasChildren(Has sub-category)、IsCurrent(Is the current link) etc., all of which bring great flexibility to template development.
Secondly, show the detailed information of the classification: mastercategoryDetailtags
When the user clicks on the category navigation, entering the specific category page, we often need to display the detailed information of the category, such as the introduction, Banner image, etc.categoryDetailLabels come in handy. It is used to get detailed data for a single category.
1. The basic usage and core parameters of the tag
categoryDetailLabels are typically used to directly output the value of a specific field in a category, such as{% categoryDetail with name="Title" %}.
idortoken: Specify the categoryGenerally speaking, when you use in the category detail pagecategoryDetailit is not necessary to specifyidortoken，The system will intelligently recognize the classification ID of the current page and automatically obtain its details. However, if you need to obtain information about a specific classification on other pages (such as the article detail page), you canid="10"(Specify the category ID as 10) ortoken="web-design"Specify the target category by (specifying the category URL alias as web-design).name: Get the specified fieldThis iscategoryDetailThe most important parameter, it determines which piece of information you want to get for the classification. Commonly usednameValues include:IdCategory ID.Title: Classification title.Link: Classification link.Description：Category description, usually used for page TDK or category introduction.Content：Category details, which can be edited in the "Document Category" backend.Logo：Classification Banner image or large thumbnail.Thumb：Classification small thumbnail.Images：Classification Banner group image, this is an array, usually requiring loop output.ArchiveCountThe number of documents in this category.- and any fields you customize for categories in the "Content Model" section on the backend.
2.categoryDetailThe practical application scenarios of
Display category name and description on the category page.
<div class="category-header"> <h1>{% categoryDetail with name="Title" %}</h1> <p>{% categoryDetail with name="Description" %}</p> </div>This code will be displayed at the top of the category list page, showing the name and description of the current category, making it convenient for users to understand the theme of the current category.
Display the category Banner imageIf your category has uploaded a Banner image on the backend, it can be displayed at the top of the category page:
{% categoryDetail categoryBanner with name="Logo" %} {% if categoryBanner %} <div class="category-banner" style="background-image: url('{{ categoryBanner }}');"> {# 可以叠加其他内容 #} </div> {% endif %}Here we first
Logoto the fieldcategoryBannerVariable, then judge whether the variable exists to avoid the case where the image path is empty.Used in breadcrumb navigation.In the article detail page, breadcrumb navigation usually needs to display the name and link of the category to which the article belongs. At this time, even if we are not on the category page, we can still get the category details through the article's
CategoryIdto get the category details:{# 假设这里是文章详情页，并且文章对象名为 archive #} {% breadcrumb crumbs %} <ul> {% for item in crumbs %} <li><a href="{{item.Link}}">{{item.Name}}</a></li> {% endfor %} </ul> {% endbreadcrumb %} {# 也可以直接获取文章所属分类的名称和链接 #} <p>所属分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></p>Invoke classification custom fieldIf you have added a custom field for the classification model in the background, such as "Classification负责人"
manager)，you can through{% categoryDetail with name="manager" %}Call directly and display its value. If you need to loop through and display all custom fields, you can handle it like this:{% categoryDetail extras with name="Extra" %} {% for field in extras %} <div>{{ field.Name }}：{{ field.Value }}</div> {% endfor %}
III,categoryListWithcategoryDetailCollaboration and advanced usage of
These tags are not isolated, they often work together in the actual template development and play a greater role.
A common scenario is when usingcategoryListWhen outputting categories in a loop, eachitemalready includes basic information of the category (such asId/Title/Link）。If you need to get more complex information that is notitemprovided directly (such as the categoryContentor some custom field), you can in thecategoryListThe loop inside, throughcategoryDetailtag, and pass initem.Idto get more detailed classification information.
For example, in a classification list, in addition to displaying the classification name, you also want to display the thumbnail of each classification:
{% categoryList categories with moduleId="1" parentId="0" %}
<ul class="category-grid">
{% for category in categories %}
<li>
<a href="{{ category.Link }}">
<img src="{% categoryDetail with name='Thumb' id=category.Id %}" alt="{{ category.Title }}">
<h4>{{ category.Title }}</h4>
<p>{{ category.Description | truncatechars:50 }}</p>
</a>
</li>
{% endfor %}
</ul>
{% endcategoryList %}
Here,{% categoryDetail with name='Thumb' id=category.Id %}Skilfully in the loop, for each categorycategorygained its corresponding thumbnail.
Four, Practical Suggestions and Summary
- Plan the classification structureIn order to develop the template, be sure to plan clear category levels and content models in the Anqi CMS backend, which will directly affect the way you call your tags.
- Optimize SEOMake reasonable use of
Title/Descriptionand custom URL alias (token) Set attractive and keyword-rich TDK information for each category, which helps search engines better index your category pages. - Keep the template concise：Make good use of template inheritance (English)
extends) And including (include功能，将重复的代码片段（如导航菜单的子菜单结构）模块化，使得模板结构清晰、易于维护。例如，多级嵌套的分类导航可以封装成一个宏 (macroTo call, avoid code redundancy. - Apply fields flexibly: In addition to the default