Build flexible multi-level category navigation and content display in AnQiCMS template

Effective organization of website content is the key to 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 classification navigation can help users quickly find the information they need, and it is also conducive to search engines understanding the website structure.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 a multi-level category navigation in the AnQiCMS template and cleverly display its subcategories or related documents.

One, planning and setting of the background category structure

Before starting the template development, it is first necessary to ensure that the backend 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 under "Content Management" -> "Content Model", such as the "Article" model, "Product" model.Each model can have its own unique custom field.
  2. Build category hierarchy:
    • Enter under "Content Management" and "Document Categories" to start creating your top-level category.When adding a new category, select the corresponding "document model" and set the "parent category" to "top category".
    • Continue, create subcategories for these top-level categories. When adding subcategories, also 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 a custom URL, category template, SEO title, etc. for each category, which will provide more flexibility and optimization space for the front-end display.

Level two, implement multi-level category navigation in the template

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

categoryListThe tag is a core tool used to retrieve the list of articles or product categories. It can dynamically list categories according to your needs and supports multi-level nesting.

We usually combine to build a multi-level category navigationforloop 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" %}We have obtainedmoduleIdAll top-level categories for 1 (assuming it is an article model).
  • item.Linkanditem.TitleUsed to output the link and name of the category.
  • {% if item.HasChildren %}Is a critical judgment, checking whether the current category has any subcategories.
  • If there is a subcategory, we will use it again internally{% categoryList subCategories with parentId=item.Id %}to categorize the current category,IdasparentIdPass in, so that you can retrieve and display its subcategories. This method can be nested infinitely to match the category depth set in the background.

2. UsenavListImplement multi-level navigation that is configurable in the background.

If you want the navigation structure to be flexible in the background "Navigation Settings" and not just automatically generated based on categories, thennavListtags are a better choice.navListSupport configuring two-level navigation 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 %}

navListThe tag directly returns the preset multi-level navigation structure.item.NavListThe attribute is the sub-navigation list of it.item.IsCurrentIt can help you highlight the current navigation item on the page, enhancing the user experience.

3. Display subcategories or related documents in the navigation.

Whether it is usingcategoryListOrnavListBuild a multi-level navigation, and 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 are in the loop of the second-level navigation:{% for inner in item.NavList %}Internally, through:archiveListThe label obtained the documents under the category associated with the current second-level navigation.

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

Four, Optimize User Experience and SEO

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

  • Breadcrumbs navigation:On detail pages or list pages, throughbreadcrumbLabel displays the breadcrumb navigation at the current position, helping users understand their position in the website structure and facilitating navigation to the upper-level 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 background "Feature Management" -> "Static Rules" select or customize SEO-friendly URL patterns, such as patterns containing category names or model names, which are 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 this information separately for each category on the 'Document Category' editing page in the backend. In the template.