During the operation of a website, a clear and efficient navigation menu is the core of user experience.An effectively designed navigation can not only help visitors quickly find the content they need, but also effectively guide search engines to crawl, improving the overall SEO performance of the website.In AnQiCMS, creating and managing website navigation menus, and controlling their display levels, is a straightforward and powerful process.
Backend management: Create and organize navigation menus
To manage the website navigation in AnQiCMS, you first need to log in to the admin backend, find the 'Website Navigation Settings' entry under the 'Admin Settings' menu.This is the starting point for you to build your website navigation system.
The navigation system of AnQiCMS is very flexible, it allows you to create different 'navigation categories' according to the requirements of the website layout.For example, you may need a 'main navigation' located at the top of the page, a 'footer navigation' at the bottom of the page, and even a 'sidebar navigation' for specific feature pages.Through 'Navigation Category Management', you can easily add these different navigation sets, allowing them to perform different roles in different areas of the website.
After selecting or creating a navigation category, the next step is to add specific navigation links. AnQiCMS provides three main types of links to meet various content pointing needs: English
- Built-in Links:These are the commonly used links preset in the AnQiCMS system, such as the homepage of the website, or the homepage of content models such as articles, products, etc.Choose this type of link, the system will automatically generate the correct address for you, which is very convenient.
- Category page link:If your website has published article categories, product categories, or standalone pages (such as 'About Us', 'Contact Us', etc.), you can directly use them as navigation links.The system will list all available categories and pages for you to select, ensuring the accuracy of the link pointing to the content.
- External links:For situations where you need to point to external resources or any specific URL within the website, such as partner websites, social media pages, or even a specific download link, the "external link" comes in handy.You only need to manually enter the complete URL.
Each navigation link has some additional display options to make your navigation more descriptive:
- Display Name:This is the actual text displayed on the front page, which you can set flexibly and it does not necessarily have to be consistent with the link content.
- Subheading Name:If your navigation design requires dual titles, such as a Chinese main title with an English subtitle, you can enter them here.
- Navigation description:Add a brief introduction text for the navigation item, which can be used as a prompt information display in some template designs.
Control the display hierarchy: Build multi-level navigation
AnQiCMS allows you to easily create two-level navigation menus, which is crucial for building a clear website structure. The core of this feature lies in the 'parent navigation' option.
When creating or editing a navigation link, if you want the current link to become a child of an existing top-level navigation, simply select the corresponding top-level navigation in the "Parent Navigation" option.The current link will automatically become its child menu.AnQiCMS currently supports up to two levels of navigation display hierarchy, which is sufficient for the needs of most corporate websites and content sites.
Adjust navigation order: Precisely control display arrangement
To make the navigation items arranged as you wish, the "Display Order" field plays a crucial role.This is a number input box, you can set a number for each navigation link.AnQiCMS will sort these numbers from small to large, the smaller the number, the earlier the navigation item is in the list.
For example, if you want the "home pageThe current system does not support drag-and-drop sorting, but you can adjust the numbers to precisely control the order, ensuring the logicality and aesthetics of the navigation menu.
Front-end display: Integrate navigation menu in the template
How to display the navigation after it is set up in the background?This requires us to use the specific tags provided by AnQiCMS in the template file.bash.html) or as an independent code snippet (inpartial/directory).
The core isnavList标签，它是AnQiCMS用于调用后台导航列表的主要工具。
To display the basic first-level navigation, you can use a similar structure in the template to iterate over the navigation items:
{% navList navs with typeId=1 %} {# typeId=1通常代表默认主导航 #}
<ul>
{% for item in navs %}
<li class="{% if item.IsCurrent %}active{% endif %}">
<a href="{{ item.Link }}">{{item.Title}}</a>
</li>
{% endfor %}
</ul>
{% endnavList %}
HeretypeIdThe parameter is very important, it determines which "navigation category" menu you want to call. For exampletypeId=1It may be the main navigation,typeId=2It may be the bottom navigation, depending on the ID you create in the "Navigation Category Management" in the backend.
Display two-level menus
For two-level navigation menus,navListEach main navigation item returned by the tagitemAll contain aNavListproperty, and this property itself is also an array that contains sub-navigation items. Therefore, you can use nested{% for %}cycles to build a clear second-level menu structure:
{% 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.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 %}
Through such code structure, when the user accesses the page with this template, they will see the two-level navigation menu meticulously set up in the AnQiCMS backend.
Summary
By following these steps, you will be able to create, manage, and display a clear and hierarchical website navigation in AnQiCMS. From defining navigation categories, adding links, setting levels and orders in the "Website Navigation Settings" backend, to using them in the front-end templates.navListLabel calling and rendering, the entire process is smooth and easy to master.The flexibility of AnQiCMS allows you to create a navigation system that is both beautiful and practical according to the actual design requirements of the website, thereby enhancing the user experience and the professionalism of the website.
Common Questions (FAQ)
1. Can AnQiCMS's navigation menu create multi-level navigation beyond two levels?Currently, AnQiCMS's navigation system supports up to two-level navigation natively.If your website design has strict requirements for three-level or more navigation, consider using custom template tags combined with category list tags to achieve more complex displays, but this usually requires certain knowledge of template development and front-end logic processing ability.
2. Why did the order of navigation 'Display Order' not change on the front end?Please first check if you have entered a valid number in the "Display Order" field.AnQiCMS will sort these numbers from small to large, and the smaller the number, the earlier the navigation item.If the numbers of multiple navigation items are the same, their relative order may depend on the creation time or other internal logic.To ensure accurate sorting, it is recommended to set a unique 'display order' number for each navigation item that requires a specific order.
3. How to display different navigation menus in different areas of the website (such as the top, bottom, sidebar)?In the "Website Navigation SettingsnavListin the tags.typeIdParameters, to call and display the corresponding category navigation