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 navigation menus that support multi-level dropdowns, thereby enhancing the user experience and clarity of the information architecture of the website.

第一步：In the security CMS backend, configure the navigation menu.

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

  1. Enter the navigation settings interfaceLogin to the Anqi CMS backend, find 'Backend Settings' in the left menu, and click 'Navigation Settings' to enter the management page.
  2. Create or select a navigation category：System has a default "Default NavigationDifferent navigation categories can be applied to different areas of the website.
  3. Add a primary 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 "Display Name", this is the text that the menu item will be displayed on the website front-end.
    • Select "Link Type", Anqi CMS supports multiple link types:
      • Built-in linkFor example, the home page, article model home page, product model home page, etc., these are the commonly used links preset by the system.
      • Category page linkYou can choose existing article categories, product categories, or individual pages on the website as navigation links.
      • External Link：Allows you to customize any URL, whether it is another page within the site or an external website.
    • According to the need, you can also fill in "Subheading Name" or "Navigation Description" to display more rich information on the front end.
    • Set the "Display Order", the smaller the number, the closer to the front, 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 top-level navigation item you just created.
    • Enter information such as "Display Name
    • By this method, you can add multiple secondary submenu items for each primary navigation item. The Anqi CMSnavListsupports the display of two-level dropdown menus by default.

Complete the background configuration and remember to click the "Update Cache" button to ensure your changes take effect immediately.

Step 2: Apply in the frontend templatenavListtags

Once the background navigation menu structure is set, the next step is how to call and display these navigation in the website's front-end template.The template of Anqi CMS follows the Django template engine syntax, which makes the content structure clear and easy to understand.

Typically, your website template files are stored in/templatedirectory, and use.htmlas the file extension.

Below is an example of usingnavListTag creation supports a two-level dropdown menu example code structure:

<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.navsIs defined as a variable, which will carry all the navigation data of the background configuration.typeId=1Specified the ID of the navigation category to be called. If you have created multiple navigation categories, please replace it with the corresponding ID.
  • {%- for item in navs %}This is a colonforloop used for iteratingnavsEach first-level navigation item in the variable.itemThe variable represents the data of the current navigational item being traversed.{%-The use of this is to avoid outputting extra blank lines, making the generated HTML cleaner.
  • {{ item.Link }}and{{ item.Title }}：English output for the current navigation item's link address and display name.itemAlso includesSubTitle(Subheading),Description(Description) and other fields, you can call them 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 addactiveClass, so that it can be highlighted through CSS.
  • {%- if item.NavList %}: This is the key to determine whether the current level of navigation item contains a sub-navigation.item.NavListIt is an array, if there is data, it means there is a secondary navigation, and we will enter the next level loop.
  • {%- for inner in item.NavList %}This is a nested one.forLoop, used to traverse all secondary navigation items under the current primary navigation item.innerThe variable represents the data of the current traversed second-level navigation item. Its structure is.itemSimilar, it also includes.Link/Title/IsCurrentand other fields.
  • {% if inner.PageId > 0 %}: This is an advanced usage that demonstrates how to display more rich content in the second-level menu.inner.PageIdIt will return the ID of the navigation item if linked to a category or a single page. By judgingPageIdwhether it exists, we can further nestcategoryListorarchiveListLabels, to dynamically load the subcategories or article lists under the category, realizing a more powerful dropdown menu function, rather than just simple links.

Advanced techniques and precautions.

  1. CSS styles are crucial
  2. Dynamic content fillingIn the secondary navigation items, if the link type is 'Category Page Link', you can useinner.PageIdCombine{% archiveList %}(Document List Tag) or{% categoryList %}(Category list label), the associated article list or next-level category of this secondary navigation item will be directly displayed in the drop-down menu