During the operation of a website, a clear and efficient navigation menu is the core of user experience.A well-designed navigation can not only help visitors find the content they need quickly, but also effectively guide search engines to crawl, enhancing 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.
Backstage management: Create and organize navigation menus
To manage website navigation in AnQiCMS, you first need to log in to the admin panel, find the 'Admin Settings' menu under the 'Website Navigation Settings' entry.This is the starting point for building your website navigation system.
The AnQiCMS navigation system is very flexible, allowing you to create different 'navigation categories' based on the layout needs of the website.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.By 'Navigation Category Management', you can easily add these different navigation sets, allowing them to perform their respective 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 the needs of various content directions:
- 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 articles, products, and other content models.Choose this type of link, the system will automatically generate the correct address for you, very convenient.
- Category page links: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 choose from, ensuring that the links point to the accuracy of the content.
- External links:In cases 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, 'external links' come into play.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 navigation, you can set it flexibly, and it does not necessarily need to be consistent with the link content.
- Subtitle name:If your navigation design requires dual titles, such as a Chinese main title with an English subtitle, you can enter it here.
- Navigation Description:Add a brief introduction text for the navigation item, which can be displayed as a prompt in some template designs.
Control 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, just select the corresponding top-level navigation in the 'Parent Navigation' option.The current link will automatically become its sub-level menu. AnQiCMS currently supports up to two levels of navigation display, which is sufficient for most corporate websites and content sites.
Adjust navigation order: Precisely control display arrangement
To arrange the navigation items as you wish, the "Display Order" field plays a key 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" page to always be at the top, you can set it to a smaller number, such as "1";“About Us” is ranked second and can be set to “2”, and so on.The current system does not support drag-and-drop sorting, but you can adjust the numbers to precisely control the order, ensuring the logic and aesthetics of the navigation menu.
Front-end display: Integrate navigation menu in template
How to display the front-end after setting up the navigation in the background?This requires us to use the specific tags provided by AnQiCMS in the template file.Generally, the navigation menu is placed in the public header of the website (for examplebash.html) or as an independent code snippet (inpartial/directory).
The core isnavListThe tag, it is the main tool used by AnQiCMS to call the background navigation list.
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 %}
HeretypeIdParameters are very important, they determine which menu of 'navigation category' you want to call. For exampletypeId=1It might be the main navigation,typeId=2It may be a bottom navigation, depending on the ID you create in the background "Navigation Category Management".
Display two-level menu
For two-level navigation menus,navListEach main navigation item returned by the tag (itemone each)NavListThe property itself is also an array containing 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 a code structure, when a user visits a 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 layered website navigation in AnQiCMS. From defining navigation categories, adding links, setting levels and sequences in the "website navigation settings" in the backend, to using in the front-end templatenavListThe tag is called and rendered, the whole process is smooth and easy to master.The flexibility of AnQiCMS allows you to create a beautiful and practical navigation system according to the actual website design requirements, thereby enhancing the user experience and the professionalism of the website.
Frequently Asked Questions (FAQ)
1. Can AnQiCMS navigation menu create multi-level navigation beyond two levels?Currently, the navigation system of AnQiCMS natively supports up to two-level navigation.If your website design has strict requirements for three-level or more navigation, you can consider using custom template tags combined with category list tags to achieve more complex display, but this usually requires certain knowledge of template development and front-end logic processing ability.
2. Why did I set the navigation display order, but the front-end order did not change?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 is.If multiple navigation items have the same number, 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.
How to display different navigation menus in different areas of a website (such as the top, bottom, sidebar)?In the "Website Navigation Settings", you can create multiple "Navigation Categories" (such as "Top Navigation", "Bottom Navigation", "Sidebar Navigation"). In your template file, through in thenavListtags.typeIdParameters, to call and display navigation for the corresponding category