In AnQiCMS, the website's navigation menu is not only an important entry for users to explore content and understand the website structure, but also a key for search engines to crawl and understand the hierarchical relationship of the website.By utilizing the powerful template tag function of AnQiCMS, we can easily display categories and documents dynamically in the navigation menu, thereby constructing a navigation that is both beautiful and efficient.

1. Preparation work on the back-end: building the navigation skeleton

Before delving into the template code, we need to make some basic configurations in the AnQiCMS backend.In the end, the data that front-end tags can obtain and display is carefully organized by the backend.

  1. Create and manage navigation categoriesFirst, enter the AnQiCMS backend, find“Background Settings”below“Navigation Settings”. The system will have a default "default navigation" category, but you can also customize more navigation categories as needed, such as "footer navigation", "sidebar navigation", etc.Each category represents a set of independent navigation menus, convenient for you to call at different locations on the website.

  2. Add navigation links, associate categories and documentsAfter selecting or creating a navigation category, the next step is to add specific navigation links.Click the "Add new navigation" or edit an existing navigation item, and you will see the "Link type" option.This is the key point:

    • “Built-in links”: Suitable for pointing to the homepage, various models (such as article models, product models) and other homepages.
    • “Category page link”This is mainly used to display categories and documents in navigation.When you select this type, the system will allow you to select an existing category or a single page as the navigation target.After you select a category as a navigation link, AnQiCMS will allocate one internally for itPageId, this ID will be very useful in the template.
    • “External link”If you need to link to an external site or a custom URL, you can use this option.

    By selecting your article category, product category, or specific single page through the "Category Page Link" and setting the "Display Name", a solid foundation for front-end navigation is laid.You can set up a primary navigation and also create a secondary dropdown menu by selecting "parent navigation".AnQiCMS currently supports up to two levels of navigation links.

Secondly, at the template level: use tags to flexibly present content.

After the background configuration is completed, we will need to use AnQiCMS tags in the template file to dynamically display these navigation items. The AnQiCMS template syntax is similar to Django, and variables are enclosed in double curly braces{{变量}}Using single curly braces and percentage signs for logical control{% 标签 %}.

In your template file (usuallybash.htmlIn a specific navigation header file) we can usenavList/categoryListandarchiveListThese core tags.

  1. Basic navigation menu: Only shows first-level navigation linksThe simplest navigation menu only contains top-level navigation items set in the background. We can use them directly.navListtags to get them.

    {% navList navs %}
<ul>
    {%- for item in navs %}
        <li class="{% if item.IsCurrent %}active{% endif %}">
            <a href="{{ item.Link }}">{{item.Title}}</a>
        </li>
    {% endfor %}
</ul>
{% endnavList %}

    here,navsis fornavListVariables defined by tags, throughforLoop throughnavsarray,item.LinkProvide link addresses,item.TitleDisplay navigation names.item.IsCurrentIt can help us determine whether the current page is the navigation item, thereby addingactiveThe class name is highlighted.

  2. Advanced navigation menu: drop down to display subcategoriesIf your navigation design needs to implement a secondary dropdown menu, and the content of the secondary menu is a subcategory under a primary category, then you cannavListnested in the loopcategoryList.

    Assuming your background navigation has a primary navigation called "Product Center" that links to a main product category, and the secondary navigation links to several subcategories under that main category. When the primary navigation'sitem.NavListWhen it exists, we can further traverse these secondary navigation items. If the secondary navigation item is a "category page link", theninner.PageIdit will correspond to the ID of the category.

    <ul>
    {% navList navList with typeId=1 %} {# 假设您的主导航类别ID是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>
                {% if inner.PageId > 0 %} {# 检查是否关联了分类/页面 #}
                    {% categoryList categories with parentId=inner.PageId %} {# 获取二级分类下的子分类 #}
                    {% if categories %}
                    <ul>
                        {% for subCategory in categories %}
                        <li>
                            <a href="{{ subCategory.Link }}">{{subCategory.Title}}</a>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endcategoryList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

    In this code,item.NavListUsed to loop the secondary navigation of the background configuration. If a secondaryinnernavigation item is associated with a category (inner.PageId > 0), we can utilizecategoryListtags, throughparentId=inner.PageIdDynamically retrieve the subcategories under the category, thereby achieving a deeper level of dropdown menu display.

  3. Advanced navigation menu: dropdown to display document listIn addition to displaying subcategories, you may also want to directly display a document list under a certain category in the dropdown menu, for example, displaying the latest news under the "News Center" dropdown. This can also be achieved bynavListNested in ChinesearchiveListto achieve.

    <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>
                {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 获取该分类下的最新8篇文档 #}
                {% if products %}
                <ul class="nav-menu-child-child">
                    {% for product in products %}
                    <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endarchiveList %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>