How to dynamically display the name, description, and link of content categories in a template?

In website operation, 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 (AnQiCMS) with its flexible template engine allows us to easily dynamically retrieve and display the names, descriptions, and links of various content categories in website templates.Today, let's delve deeper into how to achieve this goal in templates, making your website content more vivid and efficient.

Understanding content category 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 displayed on the website front-end through the template tag mechanism of AnQiCMS.

AnQiCMS template system adopts syntax similar to Django, using double curly braces{{变量}}to output variable values, as well as{% 标签 %}A structure is used to call functions or perform logical control. This allows even operators without a deep programming background to achieve highly customized content display by learning simple tag usage.

core tags: dynamically retrieve single category information

To display the name, description, and link of a specific category in a template, the most commonly used tool iscategoryDetaila tag. This tag is specifically used to retrieve the details of a single content category.

Basic usage

When you are on the category list page (for examplecategory/list.htmlorarticle/list-{分类ID}.htmlUsed incategoryDetailWhen labeling, it will intelligently identify the classification ID of the current page and automatically extract the detailed information of the classification. You just need to specify the field name 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"The category name will be output,name="Description"And the category description will be output,name="Link"The link to the category will be output. It should be noted that if your category description may contain HTML rich text content (such as bold, images, etc.), then in the outputDescriptionEnsure that it is added when the field|safeFilter. This is to inform the template engine that this content is safe and does not need to be HTML escaped, so that it can render rich text correctly.

Get 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 current page's category, you can do so byidortokenParameters to specify the category clearly.

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 URL alias of the category (for exampleabout-us), you can also usetokenparameters:

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

Build category list: loop to display multiple categories

In many cases, we need to display a category list, such as the website navigation menu, the subcategories in the sidebar, or the category block on the homepage. At this point,categoryListthe label comes into play.

categoryListTags are usually withforCombine loops to iterate 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 macro namedcategoriesvariable to receive the top-level categories under all article models.forthe loop,itemrepresented by each category object currently being cycled through, we canitem.Link/item.Titleanditem.Descriptionto dynamically display this information. Here, we also used|truncatechars:50A filter to limit the display length of descriptions to avoid overly long text affecting the layout.

Display multi-level classification

Of Security CMScategoryListTags also support displaying multi-level categories through nested loops. This is very useful when building complex navigation menus or hierarchical structures.

Suppose 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 code above,topCat.HasChildrenIt is a very useful boolean value that tells us whether the current category has subordinate subcategories, thus deciding whether to render nested onesulList. In this way, you can build a classification hierarchy of any depth.

Practical application scenarios

1. Website main navigation menu:UtilizecategoryListLabel, you can easily build a primary navigation bar that automatically updates according to the background categories.When the backend adds or modifies categories, the front-end navigation will automatically synchronize the update without the need to manually modify the code.
2. Classification page top information:Inarticle/list.htmlorproduct/list.htmlUse in the classification list template,categoryDetailTag dynamically displays the name of the current classification as,<h1>Title, and place the category description below the title, which is very helpful for page SEO and user understanding.
3. Sidebar category tree: CombinecategoryListofparentIdParameter, you can create a dynamic sidebar category tree, displaying 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 content block:On the homepage, you can usecategoryListTags to display several core categories in a loop, and through each categoryarchiveListTag to further display the latest articles or recommended products under this category, forming a content aggregation block.

Points to note

• HTML content escaping:Again emphasize, when you output fields that may contain HTML tags (such asDescription/ContentPlease use this when}|safeFilters to ensure that HTML content is rendered correctly rather than being escaped as plain text.
• **fields**