The main navigation menu of the website is an important entry for users to understand the content and structure of the website. Anqi CMS provides powerful and flexiblenavListTags, help us easily create and manage multi-level dropdown navigation menus, thereby improving the user experience and clarity of the information architecture of the website.

The first step: configure the navigation menu in the Anqi CMS backend

Before starting to write the template code, we need to set up the structure of the navigation menu in the Anqi CMS backend management system.

  1. Enter the navigation settings interfaceLog in to the AnQi CMS backend, find 'Backend Settings' in the left menu, click 'Navigation Settings' to enter the management page.
  2. Create or select a navigation category: The system will have a default "default navigation" category, you can use it directly, or click the "navigation category management" button to create new navigation categories as needed, such as "top main navigation", "footer navigation", and so on.Different navigation categories can be applied to different areas of the website.
  3. Add a first-level navigation link:
    • Click the 'Add Navigation Link' button.
    • In the pop-up form, first select 'Parent Navigation' as 'Top-Level Navigation', which means you are creating a main menu item.
    • Enter the "Display Name", this is the text displayed on the website front-end for the menu item.
    • Select the "Link Type", AnQi CMS supports various types of links:
      • Built-in linkFor example, home page, article model home page, product model home page, etc., these are the system predefined common links.
      • Category page linkYou can choose existing article categories, product categories, or individual pages as navigation links.
      • External linkAllow you to customize any URL, whether it is an internal page or an external website.
    • As needed, you can also fill in the 'subheading name' or 'navigation description' to display more rich information on the front end.
    • Set the "Display Order", the smaller the number, the earlier it appears, used to control the arrangement order of menu items.
  4. Add a secondary dropdown navigation link:
    • Click the "Add Navigation Link" button again.
    • A key stepIn the "Parent Navigation", select the primary navigation menu item you just created.
    • Enter information such as "Display Name", "Link Type", etc., similar to the primary navigation item.
    • In this way, you can add multiple secondary sub-menu items for each first-level navigation item. Anqi CMS'snavListThe tag supports the display of two-level dropdown menus by default.

After completing the backend configuration, remember to click the 'Update Cache' button to ensure your changes take effect immediately.

Step two: Apply in the frontend template.navListTag

Once the backend navigation menu structure is set up, the next step is how to call and display these navigation in the website's frontend template.The AnqiCMS template follows the Django template engine syntax, which makes the content structure clear and easy to understand.

通常，你的网站模板文件存放在/templatethe directory and use.htmlas a file extension.

Below is an example of usingnavListTag creates an example code structure that supports two-level dropdown menus:

<nav class="main-navigation">
    <ul class="nav-list-level1">
        {% navList navs with typeId=1 %} {# 这里的typeId=1假设是你的主导航类别ID #}
            {%- for item in navs %} {# 遍历所有一级导航项 #}
            <li class="nav-item-level1 {% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}" class="nav-link-level1">{{item.Title}}</a>

                {%- if item.NavList %} {# 判断当前一级导航项是否有二级子导航 #}
                <ul class="nav-list-level2">
                    {%- for inner in item.NavList %} {# 遍历所有二级导航项 #}
                    <li class="nav-item-level2 {% if inner.IsCurrent %}active{% endif %}">
                        <a href="{{ inner.Link }}" class="nav-link-level2">{{inner.Title}}</a>
                        {# 如果需要更多层级的下拉菜单，可以在这里继续嵌套，
                           但需要自定义逻辑或CSS支持，navList标签默认支持两级。
                           这里可以结合其他标签丰富内容，如显示该分类下的文章列表或子分类。 #}
                        {% if inner.PageId > 0 %} {# 假设该二级导航是某个分类或页面链接 #}
                            {% categoryList categories with parentId=inner.PageId %} {# 获取该分类的子分类 #}
                            {% if categories %}
                            <ul class="nav-list-level3">
                                {% 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>
</nav>

Code explanation:

  • {% navList navs with typeId=1 %}: This is the core tag for calling the navigation list.navsIt is a variable defined to carry all the navigation data of the background configuration.typeId=1Specified the navigation category ID to be called, if you have created multiple navigation categories, please replace it with the corresponding ID.
  • {%- for item in navs %}: This isforLoop, used for iterationnavsEach first-level navigation item in the variable.itemThe variable represents the data of the current navigated first-level navigation item.{%-Its use is to avoid extra blank lines, making the generated HTML cleaner.
  • {{ item.Link }}and{{ item.Title }}: The link address and display name of the current navigation item were output.itemalso includesSubTitle(Subheading),Description(Description) fields, etc., you can call according to your design needs.
  • {% if item.IsCurrent %}:IsCurrentIs a boolean value, if the current navigation item is the page being accessed by the user, it will betrue. This is usually used to add to the current active menu itemactiveA class to highlight through CSS.
  • {%- if item.NavList %}This is the key to determine whether the current first-level navigation item contains sub-navigation.item.NavListIt is an array. If there is data in it, it means there is a second-level navigation, and we will enter the next level of loop.
  • {%- for inner in item.NavList %}: This is nested.forThe loop is used to traverse all the second-level navigation items under the current first-level navigation item.innerThe variable represents the data of the current second-level navigation item being traversed. Its structure isitemsimilar, and also includesLink/Title/IsCurrentfields.
  • {% if inner.PageId > 0 %}This is an advanced usage, demonstrating how to display more rich content in a secondary menu.inner.PageIdIt will return the ID of the navigation item if linked to a category or a single page. By judgingPageIdDoes it exist, we can nest furthercategoryListorarchiveListLabel, to dynamically load the subcategories or article lists under the category, achieving a more powerful dropdown menu function, rather than just simple links.

Advanced techniques and precautions

  1. CSS styles are crucialThe above code only provides the HTML structure. To achieve a beautiful two-level dropdown effect, you need to write the corresponding CSS styles to control the menu layout, display/hide, and animation effects.
  2. Dynamic content fillingWithin the secondary navigation items, if the link type is "category page link", you can utilizeinner.PageIdCombine{% archiveList %}(Document list tag) or{% categoryList %}(Category list label), the associated article list or next-level category will be directly displayed in the drop-down menu