How to manage website navigation links and display them on the front page in AnQiCMS?

When building and managing a website, a clear and intuitive navigation system is the foundation of user experience and search engine optimization.AnQiCMS provides a flexible and powerful navigation management mechanism, allowing you to easily organize the website structure and elegantly present it to users.

1. Backend navigation management: Build the skeleton of your website

The navigation management feature of AnQiCMS is located in the "Background SettingsHere, you can build a clear navigation system for the website like stacking building blocks.

1. Create and manage navigation categories

AnQiCMS defaults to have a "default navigation" category, which is usually used for the main navigation bar of the website.But websites often have more than one navigation location, for example, the footer may need an auxiliary navigation composed of "About UsTo meet these diverse needs, AnQiCMS allows you to create multiple navigation categories.

You can name each navigation category according to actual use, such as "Footer Navigation", "Sidebar Product Navigation", and so on.This allows you to group and manage navigation links at different locations without interference, greatly improving management efficiency and flexibility.

2. Fine-tune navigation link configuration

After selecting or creating a navigation category, the next step is to add specific navigation links to the category. AnQiCMS offers a variety of configuration options to ensure each navigation item meets your needs:

• Hierarchical relationship: Build multi-level menusAnQiCMS supports two-level navigation links. When adding links, you can specify their 'parent navigation'.If you select 'Top-level navigation', it will be as a first-level menu item;If you select an existing top-level menu item, it will become a second-level submenu under the top-level menu.This makes creating common dropdown menus very simple.

• Display information: Make the menu richer

  • display name: This is the text directly presented on the front page navigation link, you can freely modify it as needed.
  • Subheading name: Some designs may require navigation items to display bilingual titles or additional information, this field can meet such needs.
  • Navigation description: Add a brief description for the navigation item, which can be used as a prompt in some template designs.

• Link type: Connect all content.This is the core function of the navigation link, AnQiCMS provides three flexible link types:

  • Built-in linkIncluding "Home link","Article model home page","Product model home page" and other custom model home pages.Choose this type of link, AnQiCMS will automatically generate the corresponding URL, convenient and fast.
  • Category page linkYou can directly select a navigation target from the existing categories on the website (such as article categories, product categories) or a single page.This means that there is no need to manually enter complex URLs; the system will automatically associate them.
  • External linkIf you need to link to a custom URL within the site, a page on another website, or any address that conforms to URL standards, you can use this option.It provides the greatest flexibility.

• Display order: adjust the position at willBy setting a number to determine the order of navigation links, the smaller the number, the earlier it is displayed. This allows you to easily adjust the relative position of navigation items without deleting and adding again.

Second, the front-end page display: usingnavListTags to light up your menu

How to display the navigation after it is configured in the background on the website front page? AnQiCMS uses its powerful template engine andnavListLabel, making this process intuitive and efficient.

navListThe tag is a core component of the AnQiCMS template language, which is specifically used to retrieve and render the navigation data of the website. Its basic usage is{% navList navs %} ... {% endnavList %}of whichnavsIs the variable name you define for navigation data.

1.navListThe core parameter of the tag

• typeId: Associated with the background navigation categoryThis isnavListThe most important parameter of the tag.It allows you to specify which background configuration's 'navigation category' to call.{% navList footerNavs with typeId="2" %}. If omittedtypeIdIt will call the default navigation with ID 1 by default.

• siteId: Multi-site data callIf you are using the AnQiCMS multi-site management feature and want to call navigation data from another site in one site, you can do so bysiteIdThe parameter specifies the target site ID.

2. Loop output: Traverse the navigation items

navListThe data obtained from the tag is an array object containing multiple navigation items. You need to useforLoop through these navigation items and display them. Each navigation item is usually named in the loop.itemIt has the following important fields:

• item.Title: The display name of the navigation item.
• item.LinkThe target link address of the navigation item.
• item.IsCurrentA boolean value, which is true if the current page is the page pointed to by the navigation item.true. This is very useful for adding a highlight style to the currently active menu item.
• item.NavList: If the current navigation item has a submenu (i.e., the secondary navigation configured in the background), this field will contain a reference to thenavsAn array with a similar structure. This allows you to easily implement nested dropdown menus.
• item.PageIdIf the navigation item links to a category or a single page, this field will return the ID of the category or single page. This is very useful when you need to further retrieve the content under the category.

3. Practical Example: Create Your Navigation Menu

• Basic Single-Level Navigation Menu

  {% navList mainNavs %}
  <ul>
      {% for item in mainNavs %}
      <li {% if item.IsCurrent %}class="active"{% endif %}>
          <a href="{{ item.Link }}">{{ item.Title }}</a>
      </li>
      {% endfor %}
  </ul>
  {% endnavList %}
  

• Navigation with Secondary Dropdown Menu

  {% navList mainNavs %}
  <nav class="main-navigation">
      <ul>
          {% for item in mainNavs %}
          <li {% if item.IsCurrent %}class="active"{% endif %}>
              <a href="{{ item.Link }}">{{ item.Title }}</a>
              {% if item.NavList %} {# 判断是否有子菜单 #}
              <ul class="sub-menu">
                  {% for subItem in item.NavList %}
                  <li {% if subItem.IsCurrent %}class="active"{% endif %}>
                      <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                  </li>
                  {% endfor %}
              </ul>
              {% endif %}
          </li>
          {% endfor %}
      </ul>
  </nav>
  {% endnavList %}
  

• Combine Other Tags: Display the Latest Articles Under Categories in the Dropdown Menu

  This example demonstrates the powerful combination ability of AnQiCMS template tags.Under the second-level navigation item, we not only displayed the subcategory links but also further called the latest articles under the category.

  ”`twig {% navList mainNavs %}