As an experienced website operations expert, I know how important a flexible and variable website navigation system is for user experience and search engine optimization.Navigation is not only a map for users to explore the website, but also a direct representation of the website's structure and content hierarchy.AnQiCMS excels in this aspect, it not only supports but also provides a very intuitive and powerful custom navigation feature, allowing you to easily build navigation structures that meet various business needs, whether it's the main navigation, sidebar navigation, or the footer navigation that we are going to delve into today.
AnQiCMS: Custom Navigation, Create a Flexible and Variable Website Structure
The core design philosophy of AnQiCMS is 'customizable' and 'easy to extend', which runs through all its functions.We can see from the update log of the initial version that the 'Custom Navigation Configuration feature' was clearly provided as early as the v1.0.0-alpha version, indicating its emphasis on the flexibility of the website structure.As an enterprise-level content management system developed based on the Go language, AnQiCMS is committed to providing efficient and highly customizable content management solutions for small and medium-sized enterprises, independent media operators, and multi-site management needs. Among them, the free configuration of navigation is a reflection of its powerful customization capabilities.
A comprehensive custom navigation feature that can help a website achieve several key goals: optimize user experience, allowing visitors to quickly find the information they need; enhance search engines' understanding of the website structure, beneficial for content crawling and ranking; and flexibly respond to business changes, adjusting the website content layout at any time.AnQiCMS is exactly providing such capabilities.
How to create a custom navigation category, such as footer navigation?
Creating a custom navigation in AnQiCMS is a very intuitive process. Let's take the creation of 'Footer Navigation' as an example to understand the operation steps in detail.
Step 1: Enter navigation settings in the backgroundFirstly, you need to log in to the AnQiCMS admin dashboard.In the left menu, find the main category "Background Settings" and then click on "Navigation SettingsThis is where you manage all the navigation of your website.
Step 2: Manage navigation categoriesAfter entering the navigation settings page, you will see an area called "Navigation Category Management".AnQiCMS will have a default 'default navigation' category, which is usually used for the main menu of the website.To create an independent footer navigation, you need to add a navigation category here.Click the 'Add Navigation Category' button, then give your new category a clear name, such as 'Footer Navigation'.After saving, AnQiCMS will allocate a dedicated navigation menu slot for the footer area.
Step 3: Add links to footer navigationNow, you have created the category "Footer Navigation", the next step is to add specific links inside it.In the navigation settings page, you can select the 'Footer Navigation' category created just now, and then start adding links.
- Display Name:This is the navigation text displayed on the website's front end, such as 'About Us', 'Contact Us', 'Privacy Policy', and so on.
- Link type:AnQiCMS supports multiple link types, which greatly enhances flexibility:
- Built-in Links:Contains the 'Home link' and your customized 'Content Model Home Page' (such as Article Model Home Page, Product Model Home Page).
- Category page link:You can select an existing article category, product category, or single page as a navigation link.For example, you can choose the single page "Company Profile" as the "About Us" link in the footer.
- External links:This type allows you to input any custom URL, whether it is an internal or external link, which is very useful for linking to partner websites or specific landing pages.
- Parent Navigation:If you want the footer navigation to have a multi-level structure (although footer navigation is usually flat), you can achieve this by setting the parent navigation.
- Display Order:You can control the display order of navigation links in the footer area by adjusting the numbers, the smaller the number, the closer to the front.
By following these steps, you can add all the links you want to appear in the footer area to the 'Footer Navigation' category one by one.
Present custom navigation on the website's front end
Completed the backend configuration, next is to present these navigation on the website frontend.AnQiCMS uses a syntax similar to Django template engine, which makes template development and modification very flexible.
To display the "Footer Navigation" you just created at the bottom of the website, you need to use the template file (usually)partial/footer.htmlorbash.htmletc. common footer template files) provided by AnQiCMS.navListLabel.
Assuming you create a "Footer Navigation" category in the background, the system assigns to ittypeIdYes2(You can find this ID in the navigation category list on the background navigation setting page), then you can call it like this in the template:
{# 假设“页脚导航”的typeId为2 #}
{% navList footNavs with typeId=2 %}
<ul class="footer-nav">
{%- for item in footNavs %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endnavList %}
In this code block:
{% navList footNavs with typeId=2 %}: To callnavListTag to gaintypeIdresponse for2All links of the footer navigation, and assign them to a variable.footNavs.{% for item in footNavs %}: Iterate overfootNavsEach navigation link in it.{{ item.Link }}: Output the URL of the navigation link.{{ item.Title }}: Output the display name of the navigation link.
If your footer navigation includes multi-level menus (although not common, but AnQiCMS also supports it), you can utilizeitem.NavListProperty performs nested loops to present more complex structures. For example:
{# 如果页脚导航也需要多级，虽然不常见 #}
{% navList footNavs with typeId=2 %}
<ul class="footer-primary-nav">
{%- for item in footNavs %}
<li>
<a href="{{ item.Link }}">{{ item.Title }}</a>
{%- if item.NavList %} {# 判断是否有下级导航 #}
<ul class="footer-sub-nav">
{%- for subItem in item.NavList %}
<li><a href="{{ subItem.Link }}">{{ subItem.Title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
By following these steps, you can see the strength and flexibility of AnQiCMS in navigation management.It not only provides a clear backend operation interface, but also makes the front-end display effortless with concise template tags.This high degree of customization is an important tool that AnQiCMS helps you efficiently operate your website and enhance your brand competitiveness.
Common Questions (FAQ)
Q1: I created a custom navigation category, how do I know itstypeIdWhat is it?
A1:In the AnQiCMS admin panel, under 'Admin Settings' -> 'Navigation Settings' page, when you click on 'Navigation Category Management', you will see a list.Each navigation category in the list will have a unique ID.typeIdThe value that needs to be filled in when setting a parameter. In most cases, the system will automatically assign an incremental ID to the newly created category.
Q2: What types of custom navigation can AnQiCMS create besides the footer navigation?
A2:AnQiCMS supports creating any navigation category you need.In addition to the main navigation and footer navigation, you can also create navigations such as "sidebar navigation", "product category navigation", "article tag cloud navigation", and even "mobile-specific navigation".typeIdJust call it at different positions in the template.
Q3: If I need to create a multi-level dropdown menu, does AnQiCMS support it?
A3:Yes, AnQiCMS navigation link settings support creating a maximum of two-level navigation menus.When adding navigation links, you can choose the 'parent navigation' for the link.Set it as 'Top-level Navigation' makes it a top-level menu, selecting other existing top-level navigation will become a secondary menu underneath.item.NavListUse properties to determine whether the current navigation item has a submenu and perform the corresponding nested loop display.