In AnQiCMS template, build flexible multi-level category navigation and content display

The effective organization of website content is a key factor in providing a good user experience and improving search engine visibility.Whether it is a corporate website, product showcase, or self-media blog, a clear multi-level navigation helps users quickly find the information they need, and is also beneficial for search engines to understand the structure of the website.AnQiCMS as an efficient and customizable content management system, provides flexible template tags, allowing us to easily implement complex multi-level classification navigation and content display.

Next, we will discuss how to create multi-level category navigation in AnQiCMS templates and display their subcategories or related documents cleverly.

一、Background category structure planning and setting

Before starting template development, it is first necessary to ensure that the background category structure is clear and logical.AnQiCMS allows you to create infinite-level categories and associate them with different content models (such as articles, products).

  1. Create content model:If you have not created one, you can define your content type, such as the 'Article' model or the 'Product' model, under 'Content Management' -> 'Content Model'.Each model can have its own unique custom fields.
  2. Build category hierarchy:
    • Enter the 'Content Management' under 'Document Categories', start creating your top-level category.When adding a new category, select the corresponding "document model", and set the "parent category" to "top category".
    • Then, create subcategories for these top-level categories.When adding a subcategory, select the corresponding "document model" and point the "parent category" to the top-level category you just created.You can repeat this process to build a multi-level classification structure.
    • In the "Other Parameters" category, you can set custom URLs, category templates, SEO titles, etc. for each category, which will provide more flexibility and optimization space for the front-end display.

In the template, implement multi-level classification navigation

AnQiCMS provides powerful template tags, allowing you to easily call and display the multi-level categories set in the backend on the front end. The most commonly used tag iscategoryListandnavList.

1. UsecategoryListBuild dynamic category navigation

categoryListLabels are the core tools for obtaining the list of article or product categories. They can dynamically list categories according to your needs and support multi-level nesting.

To build a multi-level classification navigation, we usually combineforloop andifto recursively display the categories.

Firstly, we can get all the top-level categories:

{% categoryList categories with moduleId="1" parentId="0" %}
<ul>
    {% for item in categories %}
    <li>
        <a href="{{ item.Link }}">{{ item.Title }}</a>
        {# 判断当前分类是否有子分类，如果有，则继续嵌套显示 #}
        {% if item.HasChildren %}
            {# 在这里再次调用 categoryList 获取当前分类的子分类 #}
            {% categoryList subCategories with parentId=item.Id %}
            <ul>
                {% for inner1 in subCategories %}
                <li>
                    <a href="{{ inner1.Link }}">{{ inner1.Title }}</a>
                    {# 可以继续嵌套第三级，甚至更多层级 #}
                    {% if inner1.HasChildren %}
                        {% categoryList subCategories2 with parentId=inner1.Id %}
                        <ul>
                            {% for inner2 in subCategories2 %}
                            <li>
                                <a href="{{ inner2.Link }}">{{ inner2.Title }}</a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endcategoryList %}
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% endcategoryList %}
        {% endif %}
    </li>
    {% endfor %}
</ul>
{% endcategoryList %}

In this code block:

  • the outermost{% categoryList categories with moduleId="1" parentId="0" %}GottenmoduleIdFor all top-level categories of 1 (assuming it is an article model).
  • item.Linkanditem.TitleUsed to output the link and name of the category.
  • {% if item.HasChildren %}It is a key judgment that checks whether the current category has subcategories.
  • If there is a subcategory, we will use it again internally{% categoryList subCategories with parentId=item.Id %}for the current category,IdasparentIdPass in, so that it can fetch and display its subcategories. This method can be nested indefinitely to match the category depth you have set in the backend.

2. UtilizenavListImplement multi-level navigation that can be configured in the backend.

If you want the navigation structure to be flexible and adjustable in the background "Navigation Settings" instead of being automatically generated based on categories only, that isnavLista better choice with tags.navListSupports two-level navigation configuration in the background.

{% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
            {# 判断是否有二级导航 #}
            {%- if item.NavList %}
            <dl>
                {%- for inner in item.NavList %}
                    <dd class="{% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}">{{inner.Title}}</a>
                    </dd>
                {% endfor %}
            </dl>
            {% endif %}
        </li>
    {% endfor %}
</ul>
{% endnavList %}

navListTags directly return the preset multi-level navigation structure.item.NavListProperties are its sub-navigation list.item.IsCurrentThis can help you highlight the current navigation item on the page, enhancing user experience.

Three, display subcategories or related documents in the navigation.

Whether usingcategoryListOrnavListBuild the multi-level navigation, we can further obtain and display the documents under the sub-categories within its internal loop.

Assuming we want to display some articles under the second-level category:

<ul>
    {% navList navList with typeId=1 %}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {%- if item.NavList %}
        <ul class="nav-menu-child">
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {# 这里我们假定inner.PageId是这个二级导航对应的分类ID #}
                {% if inner.PageId > 0 %}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %}
                    <ul class="nav-menu-child-child">
                        {% for doc in products %}
                        <li><a href="{{doc.Link}}">{{doc.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

In the above example, we loop through the second-level navigation:{% for inner in item.NavList %}Internally,archiveListThe label obtained the documents under the category associated with the current second-level navigation.

  • archiveListoftype="list"Indicates obtaining the normal list.
  • categoryId=inner.PageIdIt is crucial, as it passes the child category ID of the current loop to the document list tag, thereby only displaying documents under the child category.
  • limit="8"It limits the number of documents displayed.

Four, Optimize User Experience and SEO

Building multi-level category navigation is not just about display, it also requires considering user experience and search engine optimization:

  • Breadcrumbs navigation:On the detail page or list page, throughbreadcrumbThe tag displays the breadcrumb navigation of the current position, which helps users understand their position in the website structure and facilitates returning to the parent page.
    
{% breadcrumb crumbs with index="首页" title=true %}
<nav class="breadcrumb">
    {% for item in crumbs %}
        {% if not forloop.Last %}
        <a href="{{item.Link}}">{{item.Name}}</a> &gt;
        {% else %}
        <span>{{item.Name}}</span>
        {% endif %}
    {% endfor %}
</nav>
{% endbreadcrumb %}
  • Friendly URL structure:In the "Function Management" -> "URL Rewrite Rule" in the background, select or customize a SEO-friendly URL pattern, such as a pattern including category names or model names, which is very beneficial for search engine crawling and user memorization.
  • TDK (Title, Description, Keywords):Ensure each category page has a unique SEO title, keywords, and description. You can set these information separately for each category on the "Document Category" editing page in the background. In the template,