How to set up secondary navigation and deeper level navigation structure in AnQiCMS, and call it in the template?

As an experienced security CMS website operations person, I fully understand the extreme importance of a clear and efficient navigation system for website user experience and content organization.In AnQiCMS, establishing a multi-level navigation structure, whether it is the basic two-level navigation or the "deeper level" achieved through clever combination, is a key link in website content management.Here we will elaborate on how to set up and call these navigation in AnQiCMS.

AnQiCMS navigation structure overview

AnQiCMS provides a直观且强大的navigation management module, allowing operators to flexibly define the menu structure of the website.The system itself is designed to support up to two levels of navigation links, that is, a main navigation item can contain a sub-navigation level.This is enough to meet the basic needs of most corporate websites and content sites.On this basis, by combining other template tags, we can also achieve a visual effect that looks like a 'deeper level' of navigation, further enriching the hierarchy of the website.

The configuration of navigation is mainly completed through the "Navigation Settings" feature in the background, while the display on the front-end page depends on specific template tags for calling.

Set secondary navigation in AnQiCMS backend

Set the secondary navigation first, you need to log in to your AnQiCMS background management interface.In the left menu of the background, you can find the 'Navigation Settings' option under 'Background Settings'.

After entering the 'Navigation Settings', you will see the 'Navigation Category Management' and 'Navigation Link Settings' two areas.In most cases, the system will provide a default 'default navigation' category by default.If you need to create independent navigation menus for different areas of the website (such as the footer, sidebar, etc.), you can click "Add New Category" to customize more navigation categories.

Now, let's create navigation links. Click the 'Add New Link' button next to 'Navigation Link Settings'.

First, create a first-level navigation link. In the pop-up "Add Navigation Link" window:

• Parent navigationSelect "Top-level Navigation", which means you are creating a main menu item.
• display nameEnter the text to be displayed on the navigation menu, for example, 'Products and Services', 'News Center', etc.
• Link TypeSelect according to your needs.
  • Built-in linkFor example, it points to the home page of a website or the home page of a model (such as an article or product).
  • Category page link: You can choose an existing article category or product category, or even a single page as the navigation target.
  • External link: Applicable to any URL pointing to other pages within the site or external websites.
• Display order: Set a number to control the arrangement position of the navigation item in the menu, the smaller the number, the closer to the front.

After completing the creation of the first-level navigation, repeat the steps of 'Add new link' to create the second-level navigation. The key is the selection of the 'Parent navigation' field.

• Parent navigation: This time you need to select the top-level navigation item you just created from the drop-down list, for example, if your top-level navigation is 'Products & Services', then select 'Products & Services'.
• display name/Link Type/Display orderThe setting method of the field is the same as the first-level navigation, but its scope of action is limited to the sub-menu under the selected parent navigation.

In this way, you can add multiple second-level navigation links to each first-level navigation item, thus building a clear second-level menu structure.

Call the navigation list in the template

In the AnQiCMS template files, usenavListtags to call the navigation menu configured in the background. Template files are usually stored in/templateUnder the directory, and use syntax similar to the Django template engine.

Open the public header file in your website template (for example,partial/header.htmlorbase.htmlThe specific structure of your template depends on, at the location where you need to display the navigation menu, you can call it in the following way:

{# 假设您要调用默认导航类别，其 typeId 默认为 1 #}
{% 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 %}

In this code block,navListThe tag assigns the navigation data configured in the background tonavsVariable. We first traversenavsTo display the first-level navigation (item). Inside each first-level navigation item, we judge whether there is a second-level navigation. If it exists, we traverse again{% if item.NavList %}判断是否存在二级导航。如果存在，则再次遍历item.NavListShow all second-level navigation (inner)item.IsCurrentandinner.IsCurrentHelp you addactiveclass to highlight the navigation items of the current visited page.

Implement advanced techniques for "deep-level" navigation (combined with category lists)

Although AnQiCMS'snavListThe tag supports two-level navigation natively, but in actual operation, we may need to display a deeper visual structure, such as directly listing documents under a category in the second-level navigation, or the sub-categories of that category. This can be achieved by cleverly combiningcategoryListthe tag.

The core of this method lies in setting the link type of the secondary navigation item to "Category Page Link", and then using the label in the template, utilizingcategoryListto obtain the subcategories or document lists under the category.

The following is a combinationnavListandcategoryListImplement an example of a "three-level" visual effect navigation. Assume that your secondary navigation item is associated with a product category, and you want to display a list of subcategories under that product category in the dropdown menu of the secondary navigation item:

<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>
                {% if inner.PageId > 0 %} {# 判断这个二级导航项是否关联了某个分类或页面 #}
                    {# 调用 inner.PageId 对应的分类的子分类列表，parentId=inner.PageId #}
                    {% categoryList categories with parentId=inner.PageId %}
                    {% if categories %}
                    <ul class="nav-menu-child-child"> {# 这是第三级视觉效果的列表 #}
                        {% 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 example,inner.PageIdThe variable stores the ID of the category or page associated with the secondary navigation item. We use this ID ascategoryListlabel'sparentIdParameters to dynamically obtain all the subcategories under the category and display them as menu items at the third level.

If your requirement is to directly display a list of documents for a category under the second-level navigation instead of subcategories, you can do it like this:

<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>
                {% if inner.PageId > 0 %}
                    {# 调用 inner.PageId 对应的分类下的文档列表 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}
                    {% if products %}
                    <ul class="nav-menu-child-child">
                        {% for productItem in products %}
                        <li><a href="{{productItem.Link}}">{{productItem.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

Here we usearchiveListLabel, and throughcategoryId=inner.PageIdGet the document list under this category, for example, product list or article list.

Cautionary notes and **practice

• Navigation planningBefore setting up navigation, it is recommended to plan the overall structure and user access path of the website. A clear structure allows users to find the information they need more quickly, enhancing website usability.
• Link type matchesEnsure that the "Link type" you have selected in the background matches the actual content. For example, if the navigation item points to a category, select "Category page link".
• Display orderMake good use of the display order parameter to ensure that navigation items are arranged logically or by importance.
• Cache updateAfter any modifications to navigation in the background, please be sure to go to the "Update Cache" feature to clear the website cache to ensure that the front-end can display the latest configuration in a timely manner.
• Template StyleThe above code only demonstrates the structure, you need to beautify the navigation menu according to the website's CSS style to match the overall design style.
• Performance consideration: AlthoughcategoryListorarchiveListThe use of nested tags can achieve multi-level visual effects, but excessive nesting or loading a large amount of data for each navigation item may affect page performance.Please weigh the actual needs and scale of the website.

By using the above method, you can not only easily set and call the standard second-level navigation in AnQiCMS, but also through the flexible use of other content tags, realize more rich multi-level content display effects, thus building a clear and user-friendly website.

---

Frequently Asked Questions (FAQ)

Q1: Why did the secondary navigation not display on the front-end page that I set up in the background?

This is usually caused by several reasons. First, please make sure that you have correctly selected the corresponding 'parent navigation' for the secondary navigation in the 'navigation link settings', and that the parent navigation itself is also a valid primary navigation item.Secondly, check whether you have used the front-end template file correctlynavListLabel, and traverseditem.NavListTo display the sub-navigation. If all these are correct, please try to clear the AnQiCMS background cache and refresh your browser cache, as sometimes old cache content can cause the front-end not to update.

Q2: AnQiCMS'snavListDoes the tag support native navigation for three levels or more?

According to the design of AnQiCMS,navListThe label supports two-level navigation by default, that is, a main navigation item can have one level of sub-navigation. If you need to visually present more levels of navigation effects, you can combine it in the template.categoryListTags and other content tags, dynamically load the associated subcategories or article lists in the rendering logic of the secondary navigation. This is notnavListIts multi-level expansion, but can achieve a similar multi-level content display effect.

Q3: How to highlight the navigation menu item on the current page?

InnavListEach navigation item in the loop tag.item(Including both primary and secondary navigation of)innerone each)IsCurrentA property that returns a boolean value indicating whether the current navigation item corresponds to the page the user is visiting. You can use this property to add a specific CSS class to the navigation item, for exampleactiveThen define the style of the class in your CSS file to highlight it. For specific usage, refer to the template call example provided in the article.