In website operation, the top and bottom navigation menus play a crucial role. They are not only guides for users to explore the website content but also key for search engines to understand the website structure.An elegantly designed, dynamically generated navigation menu that greatly enhances user experience and website maintainability.AutoCMS (AutoCMS) provides a set of intuitive and powerful features, allowing you to easily achieve this goal.
Backend configuration: Bring your menu to life
To dynamically generate and display the navigation menu in the AnQi CMS, you first need to configure the menu content in the backend.This is like drawing a map for your website, planning out all the destinations.
You can find " in the backendBackend settingsModule, click to enter and select “English”Website navigation settings. This is the centralized management area of all navigation menus.
Firstly, you can define different “English”navigation categoriesEnglishThe system usually provides a default navigation, but if your website needs multiple independent navigation areas, such as one at the top, one at the bottom, or different menus in the sidebar, you can create new navigation categories here.For example, you can create a new category named "Footer Navigation" specifically for the bottom of the website.Thus, different navigation areas can be managed independently, without interference.
Next is “English”Navigation Link SettingsThis is the step to fill in the menu content. When you add a new navigation link, you will see the following important configuration items:
- Parent NavigationThis option allows you to easily build multi-level dropdown menus.If you want the current link to be a top-level menu item, select 'Top Navigation'; if it should be a submenu of an existing menu item, select the corresponding parent menu.The current autoCMS supports two-level navigation, which is enough to meet the needs of most websites.
- Display NameThis is the navigation link text displayed on the front page. You can set it flexibly and it does not have to be exactly the same as the name of the content pointed to by the link.
- Subheading name and navigation descriptionThese two fields provide additional display space.If your navigation requires more rich text information, such as English subtitles or brief descriptions, you can enter them here for easy frontend template calls.
- Link TypeThis is the core definition of where the navigation link points. Safe CMS provides multiple choices:
- Built-in link：Include the home page, content model home pages (such as article model home pages, product model home pages, etc.), which are the system-predefined commonly used links.
- Category page linkYou can directly select any created article category, product category, or single page as a navigation link.
- External LinkIf you need to link to external resources or other custom URLs, you can select this option and enter the complete link address.
- Display OrderThrough adjusting the size of the numbers, you can control the order of the menu items, with smaller numbers appearing earlier.
Through these flexible configurations, you can intuitively build various complex navigation menus in the background without touching any code.
Front-end template: Convert configuration to visible menu
When you have configured the navigation content in the background, the next step is to display these data on the front page of the website.The template system of AnQi CMS adopts syntax similar to Django template engine, which is concise and efficient, making technical information easy to understand and apply.
In the template file, we mainly usenavListthis tag to obtain navigation data. The function of this tag is to dynamically extract the navigation list you have configured from the background database.
通常，You will place the navigation menu code in a public template file (such asbase.htmlorpartial/header.html/partial/footer.html), and then through{% include %}Tags are referenced on each page.
The template code for a basic single-level navigation menu is roughly as follows:
{# 假设这是您的顶部导航区域 #}
<nav class="main-navigation">
<ul>
{% navList navs with typeId=1 %} {# typeId=1 通常指代默认导航类别 #}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
This code first uses{% navList navs with typeId=1 %}Tag to gaintypeIdFor 1 (i.e., the default navigation category) all navigation data, and assign it tonavsto a variable. Then, through{% for item in navs %}Loop through each navigation item. Eachitemcontains such asTitle(Display Name),Link[Link address],IsCurrent(Whether it is a link on the current page) and other properties, you can call them as needed.{% if item.IsCurrent %}This code is very useful, it can help you add a highlight style to the navigation menu item corresponding to the current page, enhancing the user experience.
If your navigation menu includes a secondary dropdown menu, the code will be a bit more complex, but the core logic is still nested loops:
{# 包含二级下拉菜单的顶部导航 #}
<nav class="main-navigation">
<ul>
{% navList navs with typeId=1 %}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">
{{ item.Title }}
{% if item.NavList %}<i class="arrow-down"></i>{% endif %} {# 如果有子菜单，显示一个小图标 #}
</a>
{% if item.NavList %} {# 判断是否有下级导航 #}
<ul class="submenu">
{% for sub_item in item.NavList %}
<li {% if sub_item.IsCurrent %}class="active"{% endif %}>
<a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
Here, we use{% if item.NavList %}To determine whether the current main menu item has a submenu. If it does, use another{% for sub_item in item.NavList %}loop to render the submenu items,sub_itemthey also haveTitle/Link/IsCurrentsuch properties.
Through such a template structure, any modification you make in the background configuration will be immediately reflected on the website front-end, realizing the true meaning of dynamic menus.
Practical Tips and **Practice
- SEO friendlyEnsure meaningful text is used as the 'display name' when setting navigation links, which helps search engines understand your website content. For links to external websites, you can manually add them in the frontend code.
rel="nofollow"Properties, prevent unnecessary weight loss, or select links during background configurationNofollow. - Enhance user experience:
- Clear hierarchyAvoid deep navigation levels, usually two to three levels are enough for users to quickly find the information they need.
- Responsive DesignEnsure that your navigation menu displays and operates well on various devices (such as mobile phones, tablets).Auto CMS supports adaptive, code adaptation, and PC+mobile independent site mode, which provides a foundation for responsive navigation.
- Highlight the current page: Utilizing
item.IsCurrentAttribute to add prominent style to the navigation item of the user's page, helping the user maintain a sense of direction.
- Maintain convenience.All navigation content's addition, deletion, modification, and query are completed in the background, without the need to modify template code, which greatly reduces the maintenance cost and error rate of daily operation.
- Multi-site applicability：The multi-site management feature of AnQi CMS allows each site to have independent navigation configuration, even if you manage multiple websites, you can maintain their flexibility and customization.
The Anqi CMS makes it exceptionally simple and efficient to dynamically generate and display the top or bottom navigation menu of a website through its friendly backend management interface and flexible template tags.You can easily handle both small and medium-sized enterprise websites, personal blogs, and content marketing platforms, making the website menu a powerful assistant to guide users to explore in-depth.
Common Questions (FAQ)
Q1：I modified the navigation settings on the backend, but the front-end page did not update. Why is that?A1：The Secure CMS usually enables caching to enhance website performance.If you have modified the navigation settings in the background but they do not take effect on the front end immediately, you can try clearing the system cache.In the background management interface, there is usually an 'Update Cache' function entry. After clicking, wait for a few seconds, and then refresh the front-end page to see the update.
Q2：How to set different content for different navigation areas (such as top menu and bottom menu)?A2：In the "Website Navigation SettingsFor example, you can create one named "Top Main Navigation", and then create one named "Footer Auxiliary Navigation".navListwhen labeling,typeIdParameters specify calling different navigation categories, for example{% navList topNavs with typeId=1 %}(Assuming 1 is the top navigation ID) and{% navList footerNavs with typeId=2 %}(Assuming 2 is the footer navigation ID).
Q3: Can the navigation menu link to external websites or a specific URL I custom?A3：Of course.In the background "Website Navigation Settings" add or edit navigation links, set the "Link Type" to "External Link", and then directly fill in the external URL or custom path you want to link to in the "Link Address" field.