How are the `categoryList` and `categoryDetail` tags used to build and display the hierarchical structure of the website?

In AnQi CMS, the hierarchical structure of the website's categories is the core of content organization, which not only affects the user's browsing experience but is also an important part of search engine optimization. To effectively build and display these category structures, we mainly rely on two powerful template tags: categoryListandcategoryDetailThey work together, allowing you to flexibly present clear and organized content categories on the website front-end.

Build a category list:categoryListTag

categoryListThe main function of the label isList one or more content categories on the website.. Whether you want to build the main navigation menu, the sidebar category list, or display popular categories at the bottom of the page,categoryListit can be easily achieved.

When you need to use this tag, it usually starts like this:{% categoryList categories with moduleId="1" parentId="0" %}. Here,categoriesThis is the variable name you specify for this group of classification data, you can name it freely.moduleIdParameters are crucial, as they inform the system about which content model you want to retrieve categories from (for example, the article model ID is usually 1, while the product model ID might be 2).parentIdThe parameter is used to control which level of classification you want to obtain: Set to"0"Indicates getting the top-level category; If you want to get the subcategories under a specific category, you can set it to the ID of the parent category; If you are on a category page and want to get the sibling categories of the current category, you can setparentId="parent".

IncategoryListInside the tag, you can useforLoop through each category item obtained and access its various properties to build your list. For example,item.Titlewill display the category name,item.LinkProvide the URL of the category page, anditem.Descriptionthen you can display the introduction of the category.

Display multi-level category structureIscategoryLista highlight. By nesting again internally.categoryListLabel, and utilizeitem.Idas the subcategory'sparentIdYou can easily build an infinite-level navigation menu. At the same time,item.HasChildrenThe property can help you determine if a category has subcategories, thereby deciding whether to render the next-level menu, making your navigation more interactive.

For example, creating a multi-level category menu might look something like this:

<ul class="main-nav">
    {% categoryList topCategories with moduleId="1" parentId="0" %}
        {% for item in topCategories %}
            <li class="nav-item {% if item.HasChildren %}has-dropdown{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.HasChildren %}
                    <ul class="dropdown-menu">
                        {% categoryList subCategories with parentId=item.Id %}
                            {% for subItem in subCategories %}
                                <li class="dropdown-item"><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    {% endcategoryList %}
</ul>

By such a structure, your website navigation can clearly display the hierarchy of content, making it easy for users to quickly find the information they need.

Get category details:categoryDetailTag

categoryDetailused for labelingGet detailed information of a single category.It is usually on the category page (such aslist-{分类id}.htmlUsed in, to display the title, description, content, or illustration of the current category. Moreover, when you need to refer to the detailed data of a specific category at other locations on the website,categoryDetailAlso very convenient.

The usage of this tag is usually:{% categoryDetail with name="Title" %}. If you call it on the category detail page, it will intelligently retrieve the category information of the current page. If you want to get data for a specific category, you can pass inidortokenparameters, for example{% categoryDetail with name="Description" id="5" %}Will get the description of the category with ID 5.

categoryDetailVery rich information can be obtained, including the category of theId/Title/Link/Description/Content(Introductional text of the category),Logo(Large image or Banner image of the category),Thumb(Category thumbnail), even with additional custom fields in the background. This allows you to design unique and informative layouts for each category page.

For example, at the top of the article category page, you may want to display the name of the current category, its detailed description, and a category Banner image:

<div class="category-header">
    <img src="{% categoryDetail with name='Logo' %}" alt="{% categoryDetail with name='Title' %}" class="category-banner">
    <h1>{% categoryDetail with name='Title' %}</h1>
    <p class="category-description">{% categoryDetail with name='Description' %}</p>
    {% categoryDetail categoryContent with name="Content" %}
    <div class="category-full-content">
        {{categoryContent|safe}}
    </div>
</div>

categoryListwithcategoryDetailcollaboration

These tags are not isolated, they often collaborate to achieve more complex functions. For example, when displaying a document list, each document will be associated with a category ID (item.CategoryId). If you want to display the name and link of the category it belongs to in the document card, you can do so byarchiveListcombine within the loopcategoryDetail:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
        <div class="article-card">
            <h3><a href="{{ item.Link }}">{{ item.Title }}</a></h3>
            <p>分类：<a href="{% categoryDetail with name='Link' id=item.CategoryId %}">{% categoryDetail with name='Title' id=item.CategoryId %}</a></p>
            <p>{{ item.Description }}</p>
        </div>
    {% endfor %}
{% endarchiveList %}

This usage greatly enhances the flexibility and richness of content presentation, making the relationship between documents and categories more intuitive.

Summary

categoryListandcategoryDetailThe tag is indispensable for handling the classification hierarchy structure in AnQi CMS template creation. ThroughcategoryListyou can easily build various forms of classification lists and navigation menus; andcategoryDetailIt allows you to delve deeply into the details of each category, providing users with a more personalized browsing experience.Reasonably use these two tags, not only can it make your website content orderly, but also can significantly improve the overall usability and search engine friendliness of the website.

Frequently Asked Questions (FAQ)

How to set up multi-level category relationships when managing categories in the background?In the Anqi CMS backend content management, when you add or edit categories, there will be an option for 'Parent Category'.By selecting different parent categories, you can easily establish a hierarchical structure.For example, create a "News" category, then select "News" as the parent category under it to create "Domestic News" and "International News", and you will have a multi-level category.

2. Why did I usecategoryListNothing is displayed?This usually has several reasons. First, please checkmoduleIdIs the parameter correct, it needs to match the content model ID of the category you want to display. Secondly,parentIdIs the parameter set properly, for example, if you want to display the top-level category, make sureparentIdWith"0". Finally, confirm that you have indeed created the categories in the background, and that these categories all belong to the specified ones.moduleId.

**3. I want to use a custom template style for the specific category page, should I...