Add custom images as navigation item backgrounds in AnQiCMS navigation menu: Create a more visually striking website navigation

As a senior website operation expert, I know the importance of an attractive navigation menu for user experience and brand image.AnQiCMS (English) with its flexible template mechanism and powerful content management capabilities, provides a solid foundation for us to realize these creative ideas.Today, we will delve into how to add a custom image background to specific navigation items in the AnQiCMS navigation menu, making your website navigation no longer monotonous and more visually striking.

Understanding the navigation menu working mechanism of AnQiCMS

AnQiCMS's navigation menu function is powerful and flexible, it is managed uniformly through the "Navigation Settings" in the background.Here, we can create multi-level navigation links and choose the type of the link: it can be an internal link (such as the homepage), a category page link (pointing to specific article categories or single pages), or an external link.navListUse tags to retrieve and render these navigation data.

However, a careful operator may notice that the editing interface of the navigation menu itself does not directly provide an 'Upload Image' option for each navigation item.This means we cannot upload a background image for a navigation link directly, like we do for uploading article thumbnails.How can this visual effect be achieved?

The core idea lies in cleverly utilizing the content association mechanism of AnQiCMS.

Core idea: Skillfully use associated data to implement navigation background images

The strength of AnQiCMS lies in its content model and flexible tag system.Although the navigation item itself does not directly store images, when a navigation item is set to 'Category Page Link', it will be associated with a specific 'Document Category' or 'Single Page'.And these content types (document classification, single page) support image upload in the AnQiCMS backend, for example, "Banner image" or "thumbnail.

Therefore, our strategy is:

  1. Upload images for associated content:Upload the background image required for your article category or single page on the AnQiCMS backend.
  2. Get the associated ID through the navigation label: navListWhen obtaining navigation data, the tag will include aPageIdField. When the navigation item links to a category or a single page, thisPageIdis the corresponding ID of the category or single page.
  3. Using the ID to get image information:In the template, throughPageIdfield, we can further usecategoryDetailorpageDetailLabel, dynamically obtain the detailed information of the category or single page, including the uploaded image address.
  4. Apply the image address to the navigation item:After obtaining the image address, through CSS'sbackground-imageProperty, apply it to the HTML element of the navigation item.

By this 'roundabout' method, we can achieve the purpose of adding a custom image background to the navigation item.

实战演练：逐步实现导航项图片背景

现在，让我们一步步来完成这个功能。

第一步：准备图片资源与关联数据

First, log in to your AnQiCMS backend:

  1. Upload images to categories or pages:
    • If it is a category navigation:Enter "Content Management" -u003e "Document Categories", select the category you wish to edit for adding a background image.Find the "Banner image" or "Thumbnail" area on the editing page and upload the image you have prepared.Suggest choosing "Banner Image" as it is usually used for larger displays.
    • If it is a single page navigation:Enter "Page Resources" -> "Page Management", select the single page you want to add a background image to for editing.Similarly, upload an image to the "Banner image" or "Thumbnail" area.
  2. Configure navigation menu item association: