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 factor for search engines to crawl and understand the hierarchical relationship of the website.Using the powerful template tag features of AnQiCMS, we can easily display categories and documents dynamically in the navigation menu, thereby building a navigation that is both beautiful and efficient.

1. Background preparation: Build the navigation skeleton

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

  1. Create and manage navigation categoriesFirstly, go to the AnQiCMS background, find“Backend Settings”underNavigation 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", and so on.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 "Add new navigation" or edit an existing navigation item, and you will see the "Link type" option.

    • “Built-in links”：English for pointing to the homepage, various models (such as article models, product models) and homepage-like pages.
    • “Category page link”This is the way we mainly use to display categories and documents in navigation.When you select this type, the system will allow you to choose one from existing categories or a single page as the navigation target.PageId, this ID will be very useful in the template.
    • “External link”If you need to link to an external site or another custom URL, you can use this option.

    Select your article category, product category, or a specific single page through the "Category Page Link" and set the "Display Name" properly, which lays a solid foundation for the frontend navigation.You can set the first-level navigation, or create a second-level dropdown menu by selecting 'Parent Navigation'.AnQiCMS currently supports up to two-level navigation links.

II. Template Level: Use tags flexibly to 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 template syntax of AnQiCMS is similar to Django, and variables are enclosed in double curly braces{{变量}}Logic control uses single curly braces and percentages{% 标签 %}.

In your template file (usually)bash.htmlor 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 the first-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 what we provide fornavListvariables defined by tags, throughforto iteratenavsArray,item.Linkproviding link addresses,item.TitleShow navigation name.item.IsCurrentCan help us judge whether the current page is the navigation item, thus addingactiveHighlight the class name.

  2. Advanced navigation menu: Drop down to display subcategoriesIf your navigation design needs to implement a second-level dropdown menu, and the content of the second-level menu is a subcategory under a first-level category, then you can in the loop nestednavListcategoryList.

    Assuming your backend navigation has a top-level navigation item called "Product Center" that links to a main product category, and its sub-navigation links to several subcategories of that main product category. When the top-level navigation itemitem.NavListWhen it exists, we can further traverse these secondary navigation items. If the secondary navigation item is a "category page link",inner.PageIdit will correspond to the ID of that 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 block,item.NavListUsed to loop the secondary navigation of the background configuration. If a secondary navigation iteminneris associated with a category (inner.PageId > 0), we can use it tocategoryListTags, throughparentId=inner.PageIdAutomatically retrieve the subcategories under the current category, thus 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 the document list under a certain category in the dropdown menu, for example, the "News Center" dropdown displays the latest news. This can also be achieved bynavListEnglisharchiveListto 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>