How to add a custom image as the navigation item background in AnQiCMS navigation menu?

Add a custom image as the navigation item background in AnQiCMS navigation menu: Create a more visually striking website navigation

As an experienced website operations expert, I know the importance of an attractive navigation menu for user experience and brand image.AnQiCMS (AnQi CMS) provides a solid foundation for us to realize these creative ideas with its flexible template mechanism and powerful content management capabilities.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.

Understand the navigation menu mechanism of AnQiCMS

The navigation menu of AnQiCMS is powerful and flexible, it is managed through the 'Navigation Settings' on the backend.Here, we can create multi-level navigation links and choose the type of link: it can be an internal link (such as the homepage), a category page link (pointing to a specific article category or single page), or an external link.After we configure the navigation items, the front-end template usually usesnavListUse tags to retrieve and render these navigation data.

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

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

Core idea: Use associated data creatively to implement navigation background image

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 as a 'category page link', it will be associated with a specific 'document category' or 'single page'.These content types (document classification, single page) support image uploads 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 tag: navListThe tag will include a when getting navigation data.PageIdfield. When a navigation item links to a category or a single page, thisPageIdis the ID corresponding to the category or single page.
3. Using the ID to get image information:In the template, throughPageIdfield, we can further usecategoryDetailorpageDetailLabel, dynamically obtain the details 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 the CSS ofbackground-imageAttribute, apply it to the HTML element of the navigation item.

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

Practice exercise: Step by step to implement the navigation item image background

Now, let's complete this feature step by step.

Step 1: Prepare image resources and associated data

First, log in to your AnQiCMS backend:

1. Upload images to categories or pages:
   • If it is a category navigation:Enter "Content Management" -> "Document Categories", select the category you want to edit to add a background image.In the editing page, find the 'Banner image' or 'thumbnail' area, and upload the prepared image.Recommend choosing 'Banner Image' as it is usually used for larger size displays.
   • If it is a single page navigation:Enter "Page Resources" -> "Page Management", select the single page you want to edit to add a background image.Similarly, upload images to the "Banner Image" or "Thumbnail" area.
2. Configure the association of navigation menu items: