How to precisely control the display content, level, and selected status of a website navigation menu?

Website navigation, like a website's signpost, a clear and intuitive navigation system can greatly enhance user experience and help visitors quickly find the information they need.At the same time, a good navigation structure is also crucial for search engines to understand the hierarchy of website content, effectively crawl, and rank.In Anqi CMS, we can flexibly and accurately control the display content, level, and current selected state of the website navigation, making it both beautiful and practical.

Core Concept: Separation of backend configuration and frontend template rendering

The AnQi CMS follows the principle of 'backend configuration data, frontend template rendering display' when handling website navigation.This means that you have set up the navigation structure, links, and properties in the background, while the specific style, layout, and interactive logic is determined by the front-end template file.This design separates, allowing you to conveniently manage navigation content and have a high degree of freedom to customize the appearance of navigation.

Step 1: Fine-tune the navigation menu settings in the background

The display content, link type, and approximate hierarchy of all navigation menus are derived from the "Website Navigation Settings" feature in the Anqi CMS background.

1. Manage Navigation Categories: More than one main menuIn the "Website Navigation SettingsBut your website may not only have a top main navigation, but may also need footer navigation, sidebar navigation, and even a user center navigation after login.AnQi CMS supports custom creation of multiple navigation categories, for example, you can add a new category named "Footer Navigation".This way, different navigation areas can be independently managed without interfering with each other.

2. Add and Edit Navigation Links: Control Display Content and HierarchyAfter entering a specific navigation category, you can start adding or editing navigation links. Each navigation link can be set with detailed content:

   • Display name:This is the text displayed on the front page of the navigation, you can flexibly change it, and it does not necessarily have to be consistent with the name of the page linked to.
   • Subtitle name:If your navigation needs to display Chinese and English titles at the same time, you can add the corresponding text here for the template to call.
   • Navigation Description:Add a brief introduction text for the navigation item, which can also be called by the template under a specific layout.
   • Link Type:AnQi CMS provides three flexible link types:
     • Built-in links:Quickly point to the website homepage, article model homepage, product model homepage, or any custom model homepage. No need to manually fill in the URL.
     • Category page links:Directly select the created article category, product category, or individual page as a navigation link, the system will automatically generate the correct path.
     • External links:Allow you to manually input any URL, whether it is a specific path within the site or an external link, it can be easily added.
   • Hierarchical relationship:The AnQi CMS natively supports two-level navigation links.You can set the current link as a top-level navigation through the "Parent Navigation" option, or specify it as belonging to an existing top-level navigation, thereby building a clear secondary menu structure.
   • Display order:By setting the number size, you can adjust the arrangement position of navigation items, with smaller numbers appearing earlier for precise menu sorting convenience.

Step two: use template tags to flexibly display navigation.

After the background configuration is completed, the next step is to display these navigation data on the website front end through template tags. The template engine of Anqi CMS is powerful, and it will be mainly used here.navList.

1. navListBasic usage of tags navListIt is the core tag for obtaining the navigation list. It will obtain all related navigation link data according to the navigation category ID set in the background (typeId)

   {% navList navs %}
   <ul>
       {% for item in navs %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   This code will traversenavsThe variable generates a list item and link for each top-level navigation item.item.LinkIt will automatically output the correct navigation link,item.Titlewhich will display the navigation name you set in the backend.

2. Implement secondary navigation menu navListEach tag returnsitemIn the object, if the navigation item has a child navigation, it will contain oneNavListproperty. You can nest oneforloop to display the second-level menu:

   {% navList navs %}
   <ul>
       {% for item in navs %}
       <li>
           <a href="{{ item.Link }}">{{item.Title}}</a>
           {% if item.NavList %} {# 判断是否有二级导航 #}
           <dl>
               {% for inner in item.NavList %}
                   <dd><a href="{{ inner.Link }}">{{inner.Title}}</a></dd>
               {% endfor %}
           </dl>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   This, a clear two-level navigation menu is presented by a simple nested loop.

3. Dynamic content in navigation: A more advanced level displaySometimes, you may want to directly display the list of articles under a category or its subcategories in the secondary navigation to achieve a deeper content guidance. Anqi CMS allows you to combine it in the navigation template.archiveListorcategoryListImplement tags:

   {% navList navList with typeId=1 %}
   <ul>
       {% 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 %} {# 假设PageId代表分类ID #}
                       {% categoryList subCategories with parentId=inner.PageId %} {# 获取该分类的子分类 #}
                       {% if subCategories %}
                       <ul>
                           {% for subCat in subCategories %}
                           <li><a href="{{ subCat.Link }}">{{subCat.Title}}</a></li>
                           {% endfor %}
                       </ul>
                       {% endif %}
                       {% endcategoryList %}
                       {# 或者，在这里调用 archiveList 来显示文章 #}
                       {% archiveList articles with type="list" categoryId=inner.PageId limit="5" %}
                       {% if articles %}
                       <ul>
                           {% for article in articles %}
                           <li><a href="{{ article.Link }}">{{article.Title}}</a></li>
                           {% endfor %}
                       </ul>
                       {% endif %}
                       {% endarchiveList %}
                   {% endif %}
               </li>
               {% endfor %}
           </ul>
           {% endif %}
       </li>
       {% endfor %}
   </ul>
   {% endnavList %}
   

   In this way, you can make navigation not just rigid links, but also an entry point that can dynamically display website content, theoretically, it can build a deeper hierarchical navigation content in terms of logic.

4. Intelligent recognition of the current selected stateOf Security CMSnavListThe label has a very practicalIsCurrentproperty. When a navigation item is the link of the current visited page,IsCurrentThe value istrueYou can use this property to add a CSS class to highlight the currently selected navigation item:

   {% navList navs %}
   <ul>
       {% for item in navs %}
       <li class="{% if item.IsCurrent %}active{% endif %}"> {# 根据 IsCurrent 属性添加 active 类 #}
           <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 %}
   

   As long as you have defined in your CSS file:.activeClass style (such as background color, text color), the corresponding navigation item on the current page will be automatically highlighted, no manual maintenance is required.

Advanced Techniques and Considerations

• Multi-site and Multilingual Navigation:If your AnQi CMS has deployed multi-site or multi-language functionality, each site/language can have independent navigation settings. InnavListtags, throughsiteIdParameters can specify the retrieval of data from a specific site, realizing a completely independent navigation structure and content.
• Custom navigation style:The visual presentation of navigation is completely dependent on your frontend template file (.html）and CSS style（.css）。You can modify<li>/<a>Modify the structure of tags, add custom class names, and write the corresponding CSS code to create a unique navigation style.
• Static rules and navigation links:Ensure that the URL structure you set in the background "pseudo-static rules" is consistent with the navigation link generation logic. For example, if the article detail page uses/article-{id}.htmlThe naming pattern, then the navigation URL generated through the "category page link" or "built-in link" will also follow this rule, ensuring the uniformity and SEO-friendliness of the website links.

AnQi CMS through its flexible backend configuration and powerful front-end template tags allows you to precisely control every detail of the website navigation