How to build and display the AnqiCMS multi-level website navigation list, and support custom styles and subtitle display?

Building a highly efficient, intuitive, and user-friendly website cannot do without a well-designed navigation system.In AnQiCMS, building a multi-level website navigation list, which supports custom styles and subtitle display, is a powerful and flexible feature.It allows content operators to easily create menu structures that adapt to various complex scenarios based on business needs.

The core advantages of AnQiCMS navigation system

AnQiCMS provides rich options for navigation construction, which is due to its high-performance architecture based on the Go language and flexible template engine.The built-in navigation management function allows users to intuitively configure the navigation structure without writing complex code.At the same time, the powerful Django template engine syntax allows front-end developers to easily convert background configurations into beautiful navigation with custom styles and dynamic effects.It is particularly noteworthy that AnQiCMS supports multi-site management, which means you can independently configure navigation for different sites to achieve fine-grained operation.

Step 1: Configure the navigation menu in the background

The navigation configuration of AnQiCMS is mainly focused on the "Website Navigation Settings" in the background. Here, you can freely combine navigation elements like building blocks.

1. Manage navigation categories:Imagine that your website may not only have a main navigation, but also a footer navigation or sidebar navigation.AnQiCMS allows you to create multiple navigation categories, such as top main navigation, footer navigation, side service, etc.By customizing navigation categories, you can distinguish navigation content at different locations, making it easier to manage and call.
2. Add Navigation Link:After selecting or creating a navigation category, you can start adding specific navigation links.
   • Display Name and Subtitle:Each navigation item has a "display name", which is the main text displayed to the user on the front end.If you need to display a second language, a brief description, or additional information at the same time for a navigation item, you can fully utilize the 'Subheading Name' field.For example, the main title is "Contact Us", and the subtitle can be "Contact Us".
   • Link Type:AnQiCMS provides three flexible link types:
     • Built-in links:Including the homepage, article model homepage, product model homepage, and other commonly used pages, it conveniently and quickly points to the core functions of the system.
     • Category page links:You can choose any article category, product category, or single page created on the website as a navigation target, ensuring that navigation is closely related to the content structure.
     • External links:Allow you to add any URL within or outside the site, which is very useful for linking to external cooperative sites, social media pages, or specific marketing landing pages.
   • Hierarchical relationship:AnQiCMS supports navigation links up to two levels, that is, a main navigation item can contain one level of sub-navigation items.By setting 'parent navigation', you can easily build this parent-child level menu structure.
   • Display order:Each navigation item can be adjusted for its front-end arrangement position via "Display Order". The smaller the number, the closer to the front it appears, allowing you to precisely control the menu layout.

Step two: Call the navigation list in the template

After the background configuration is completed, the next step is to display these data on the website front-end. AnQiCMS template tag system makes this process very intuitive, among whichnavListThe tag is used to call the navigation list core.

In your template file (usuallybase.htmlOr specificheader.htmlFragment) You can use the following method to call navigation data:

{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {%- if item.SubTitle %}
                    <span class="sub-title">{{ item.SubTitle }}</span>
                {%- endif %}
                {# 判断是否有子级导航 #}
                {%- if item.NavList %}
                    <dl class="sub-menu">
                        {%- for subItem in item.NavList %}
                            <dd class="{% if subItem.IsCurrent %}active{% endif %}">
                                <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                {% if subItem.SubTitle %}
                                    <span class="sub-title-child">{{ subItem.SubTitle }}</span>
                                {% endif %}
                            </dd>
                        {%- endfor %}
                    </dl>
                {%- endif %}
            </li>
        {%- endfor %}
    </ul>
{% endnavList %}

In the code above:

• {% navList navs with typeId=1 %}Here is thetypeIdThe parameter corresponds to the ID of the "navigation category" in the background. If you want to call the "top main navigation", make sure the ID of the category in the background is 1.navsThis is the variable name defined for this navigation list data.
• {% for item in navs %}: This is a loop used to iterate through all top-level navigation items.
• item.Titleanditem.Link: Retrieve the main title and link address of each navigation item.
• {% if item.SubTitle %}: Check if the navigation item has set a subtitle, and display it. You can add a specific CSS class, such assub-title.
• {% if item.NavList %}This condition judgment is the key to building the second-level navigation. If the current navigation item has a sub-level list (i.e.,NavListIf not empty, then enter the sub-level loop.
• {% for subItem in item.NavList %}：Again, this time it is to iterate over all the child navigation items under the current top-level navigation item.
• item.IsCurrentandsubItem.IsCurrentThis is a very practical attribute provided by AnQiCMS. When the user visits a page that matches the link of a navigation item,IsCurrentit will automatically be set totrueYou can use it to add for the currently active navigation itemactiveCSS classes to highlight.

Step 3: Implement multi-level navigation and custom styles

AnQiCMS provides all the data needed to generate the navigation HTML structure. Custom styles are mainly implemented through CSS.

• HTML structure with CSS:In the above template code, we have adopted a common<ul><li><a>and<dl><dd><a>nested structure to build two-level navigation. You can add custom class names (such assub-menu,sub-titlewait) then write the corresponding CSS rules to implement from simple text styles to complex dropdown menu animation effects. For example, you can usesub-menuClass to control the display/hide, background color, border, and other settings of the secondary menu.
• Flexible use of subtitles: item.SubTitleThe field is not only used to display the second language, but can also be used as a brief description for navigation items.In CSS, you can define different font sizes, colors, or positions for subheadings to make them auxiliary navigation information and enhance the user experience.

Advanced application scenarios: integrating dynamic content into navigation

The strength of AnQiCMS also lies in the ability to combine the flexibility of the content model with the navigation system. For example, if your needs go further, and you want to directly display a list of products or articles under a specific category in the navigation dropdown menu, you canitem.NavListwithin the nested loop againarchiveListorcategoryList.

For example, display the latest articles of the category under the secondary navigation item:

`twig {# ... top navigation loop ... #}

            {%- if item.NavList %}