In website operations, clearly displaying content categories not only helps users quickly find the information they need, but is also a key factor in improving website usability and Search Engine Optimization (SEO).AnQiCMS relies on its flexible template engine, allowing us to easily dynamically call and display the names, descriptions, and links of various content categories in website templates.Today, let's delve into how to achieve this goal in templates, making your website content more vivid and efficient.

Understand the content classification data in AnQi CMS

In the Anqi CMS backend management system, we have created corresponding categories for each article or product.These categories are not just simple names; they also contain rich metadata: such as user-friendly category names (Title), detailed category descriptions (Description), keywords and aliases for SEO optimization, as well as system-generated access links (Link).All this information is stored in the database and can be dynamically extracted and presented on the website frontend through the template tag mechanism of AnQiCMS.

AnQi CMS's template system uses syntax similar to Django, with double curly braces{{变量}}to output variable values, as well as{% 标签 %}Invoke functions or perform logical control using the structure.This enables even operators without a strong programming background to achieve highly customized content display by learning simple tag usage.

Core Tag: Retrieve Single Category Information Dynamically

The most commonly used tool to display the name, description, and link of a specific category in the template iscategoryDetailLabel. This label is specifically used to retrieve detailed information about a single content category.

Basic Usage

When you are on the category list page (for examplecategory/list.htmlorarticle/list-{分类ID}.html) usedcategoryDetailWhen labeling, it will intelligently recognize the classification ID of the current page and automatically extract the detailed information of that category. You only need to specify the field names you need to retrieve:

{# 动态显示当前分类的名称 #}
<h1>{{% categoryDetail with name="Title" %}}</h1>

{# 动态显示当前分类的描述，注意使用 |safe 过滤器以解析HTML内容 #}
<div class="category-description">{{% categoryDetail with name="Description" %}|safe}}</div>

{# 动态显示当前分类的链接 #}
<a href="{{% categoryDetail with name="Link" %}}">查看更多</a>

Here,name="Title"Will output the category name,name="Description"Will output the category description,name="Link"The output will display the category access link. It is especially important to note that if your category description may contain HTML rich text content (such as bold, images, etc.), then in the outputDescriptionWhen a field is mentioned, it is essential to add|safefilter. This is to inform the template engine that this content is safe and does not require HTML escaping, thus allowing it to render rich text correctly.

Retrieve information for a specified category

If you want to display information about a specific category on any page of the website (such as the homepage, article detail page, or sidebar) instead of the category of the current page,idortokenParameters can be used to explicitly specify the category.

Suppose you want to display the ID of10The name and link of the category:

{# 获取ID为10的分类名称 #}
<p>我们的推荐分类：{{% categoryDetail with name="Title" id="10" %}}</p>

{# 获取ID为10的分类链接 #}
<a href="{{% categoryDetail with name="Link" id="10" %}}">进入推荐分类</a>

Similarly, if you know the category's URL alias (such asabout-us), you can also usetokenParameters:

{# 通过URL别名获取分类名称 #}
<p>关于我们分类名称：{{% categoryDetail with name="Title" token="about-us" %}}</p>

Build a category list: Display multiple categories in a loop

In many scenarios, besides obtaining the details of a single category, we need to display a list of categories, such as the navigation menu of a website, the subcategories in the sidebar, or the category block on the homepage. At this time,categoryListLabels come in handy.

categoryListTags are usually withforUse in a loop to traverse and display multiple categories.

{# 获取所有顶级分类（moduleId="1"代表文章模型，parentId="0"代表顶级分类） #}
<ul>
    {{% categoryList categories with moduleId="1" parentId="0" %}}
        {{% for item in categories %}}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                <p>{{ item.Description|truncatechars:50 }}</p> {# 截取描述前50个字符 #}
            </li>
        {{% endfor %}}
    {{% endcategoryList %}}
</ul>

In this example, we define a variable namedcategoriesto receive the top-level categories under all article models.forin the loop,itemrepresented the current category object being cycled through, we can useitem.Link/item.Titleanditem.Descriptionto dynamically display this information. It also uses|truncatechars:50Filter to limit the display length of descriptions, avoiding overly long text that affects layout.

Display multi-level categories

Anqi CMS'scategoryListLabels also support displaying multi-level categories through nested loops. This is very useful when building complex navigation menus or hierarchical structures.

Assume you want to display the top-level categories under the article model, as well as their respective second-level subcategories:

<nav>
    <ul>
        {{% categoryList topCategories with moduleId="1" parentId="0" %}}
            {{% for topCat in topCategories %}}
                <li>
                    <a href="{{ topCat.Link }}">{{ topCat.Title }}</a>
                    {# 判断是否有子分类，然后进行嵌套循环 #}
                    {{% if topCat.HasChildren %}}
                        <ul class="sub-category">
                            {{% categoryList subCategories with parentId=topCat.Id %}}
                                {{% for subCat in subCategories %}}
                                    <li><a href="{{ subCat.Link }}">{{ subCat.Title }}</a></li>
                                {{% endfor %}}
                            {{% endcategoryList %}}
                        </ul>
                    {{% endif %}}
                </li>
            {{% endfor %}}
        {{% endcategoryList %}}
    </ul>
</nav>

In the above code,topCat.HasChildrenis a very useful boolean value that tells us whether the current category has subcategories, thereby deciding whether to render nested onesulLists. In this way, you can build a classification hierarchy structure of any depth.

Practical Application Scenarios

  1. Website Main Navigation Menu:UtilizecategoryListTags, you can easily build a main navigation bar that automatically updates based on the backend categories.When the backend adds or modifies a category, the frontend navigation will automatically synchronize and update, without the need to manually modify the code.
  2. Top Information on Category Page:Inarticle/list.htmlorproduct/list.htmlIn the template of the classification list, usecategoryDetailthe label to dynamically display the name of the current category as<h1>[en]Title, and place the category description below the title, which is very helpful for page SEO and user understanding.
  3. [en]Sidebar category tree:CombinecategoryListofparentIdParameters, you can create a dynamic sidebar category tree that displays the subcategories under the current category, or all top-level categories and some of their subcategories, making it convenient for users to switch between different categories quickly.
  4. Home Page Content Block:On the website homepage, you can usecategoryListTag rotation displays several core categories, and through each category,archiveListFurther display the latest articles or recommended products under this category, forming a content aggregation block.

Precautions

  • HTML content escaping:Again, emphasize that when you output fields that may contain HTML tags (such asDescription/Content), you must use|safeFilter to ensure that HTML content can be rendered correctly, rather than being escaped as plain text.
  • **Field