How to create and manage different types of website navigation in AnQiCMS (such as top, footer navigation)?
As an experienced security CMS website operator, I know that clear and intuitive website navigation is crucial for improving user experience and search engine optimization.AnQiCMS offers a powerful and flexible navigation management feature, allowing you to easily create menus for the top, bottom, or sidebar of your website.This article will elaborate on how to create and manage different types of website navigation in AnQiCMS.
Understand the core concept of AnQiCMS navigation
In AnQiCMS, the construction of website navigation is mainly based on two core concepts: Navigation Categories and Navigation Links.The navigation category is used to distinguish different navigation areas on a website, such as "top navigation", "footer navigation", or "sidebar navigation".Each category includes one or more navigation links, which make up the menu items that users actually click, pointing to different pages or external resources on the website.
Create and manage navigation categories
First, you need to enter the AnQiCMS backend management interface, and go to the 'Navigation Settings' page through the 'Backend Settings' menu.Here, you will see the 'Navigation Category Management' section. The system provides a default 'Default Navigation' category by default, but it is recommended to create new navigation categories according to your actual needs.
To add a new navigation category, just click the "Add New Navigation Category" button.For example, if you plan to create a menu at the bottom of the website, you can add a new category named "footer navigation".After creating the category, you can independently configure navigation links for the category to ensure that the menu content in different areas of the website does not interfere with each other and is managed in order.
Configure the detailed steps of navigation links
In the "Navigation Settings" page, in the "Navigation Link Settings" section, you can add and edit specific menu items for the navigation categories you have created. Each navigation link provides a rich set of configuration options to meet the diverse navigation needs of websites:
- Parent navigation:AnQiCMS supports up to two levels of navigation links. If you want to create a main menu item, please select 'Top-level navigation' as its parent.If the link is a secondary menu item, select the parent primary menu from the dropdown list.This makes creating a structured multi-level menu simple and intuitive.
- Display name:This is the menu text that the user sees on the website front-end. You can freely modify it as needed, without having to match the title of the page linked, to optimize user experience and conciseness.
- Subtitle name:Some designs may need to display a subtitle or auxiliary text below the main title. By filling in this item, double title navigation styles can be realized in the frontend template.
- Navigation Description:This is an optional field that can provide a brief description or hint for navigation links, usually used to display tooltips or more detailed introductions when hovering over the mouse.
- Link Type:AnQiCMS provides three flexible link types:
- Built-in links:This type allows you to easily link to fixed built-in pages of the website, such as "Home Link" and "Article Model Home" and "Product Model Home", etc., for custom content models' home pages.
- Category page links:You can directly select any content category or independent single page created on the website as a navigation link. This greatly simplifies the process of integrating website content into navigation.
- External links:If you need to link to external resources or a custom internal URL, you can select this type and enter the complete URL address.
- Display order:By entering a number to control the arrangement order of navigation links. The smaller the number, the earlier the link is displayed in the menu.Currently, AnQiCMS uses numerical sorting, and it may support drag-and-drop sorting in the future to provide a more intuitive operation experience.
Call navigation in the website template
After configuring the background navigation, a key step is to correctly call and display these navigations in the website's front-end template. AnQiCMS provides powerfulnavListTemplate tags to achieve this goal.
You usually find in the website's common header (header) or footer template files (for example/template/您的模板目录/partial/header.htmlor/template/您的模板目录/bash.htmlUsed innavListtag. When using it, you need to specifytypeIdParameters to call a specific navigation category.typeIdThe value corresponds to the ID of each category you create in the "Navigation Category Management" section in the backend. If not specified, the default will be called.typeId=1(i.e. "default navigation").
The following is an example of calling two-level navigation in a template:
{% navList navs with typeId=1 %} {# 假设1是您的顶部导航类别ID #}
<ul>
{%- for item in navs %} {# 循环遍历一级导航项 #}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
{%- if item.NavList %} {# 判断是否存在二级导航 #}
<dl> {# 二级导航通常用dl/dd或ul/li结构 #}
{%- 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 %}
This code snippet will first call all first-level navigation links under the navigation category with ID 1. Then, for each first-level navigation link, it will check if there is a sub-navigation (item.NavListIf there is, then further loop to display the second-level navigation links.By CSS styles, you can render these structures into beautiful dropdown menus, top classification menus, or footer link groups.
AnQiCMS template mechanism also supportsincludeandextendsAuxiliary tags, you can break down the complex navigation structure into smaller reusable template fragments, and then throughincludeLabel it to introduce it to the main template, thus maintaining the cleanliness and maintainability of the template code.
Optimize navigation display and user experience.
High-quality website navigation can not only help users quickly find the information they need, but also effectively guide search engine spiders to crawl website content, improving SEO effectiveness.AnQiCMS' navigation management feature supports multi-template switching, including adaptive, code adaptation, and PC+mobile independent site mode. This means that you can design different layouts and styles for navigation according to different devices and display requirements, ensuring a** user experience on any device.By rational planning and detailed configuration of navigation, you can significantly improve the usability and discoverability of the website.
In summary, AnQiCMS provides a set of intuitive and powerful navigation creation and management tools.From defining different navigation categories, to finely configuring each navigation link's display name, link type, and order, to the flexible template calling mechanism, every step aims to help website operators efficiently build a website navigation system that is both beautiful and practical, thereby enhancing user satisfaction and the overall performance of the website.
Frequently Asked Questions (FAQ)
Does AnQiCMS support creating navigation menus with more than two levels?
The AnQiCMS backend navigation link settings currently support up to two levels of navigation (i.e., one-level main menu and its sub-menus). If you need a deeper navigation structure, you may need to use custom templates and combine other content list tags such ascategoryList) Generate more content links within the secondary menu items, but this will require more complex template logic to achieve the visual effects of three or more levels.
Can I adjust the order of navigation links by dragging?
The display order of navigation links in the current version of AnQiCMS is controlled by numerical values. The smaller the number, the earlier the sorting. You need to