Navigation is the core of user experience and website architecture in content management systems like AnQiCMS.It not only guides visitors to browse the content, but is also an important part of the brand image and SEO strategy.As an experienced website operations expert, I know that a refined navigation design can bring great value to the website.Today, let's delve deeply into a seemingly simple but extremely practical skill: how to add custom CSS classes or IDs to navigation items in the AnQiCMS template, making your website navigation more flexible, beautiful, and easy to manage.

Refine your website navigation: Customize CSS classes and IDs in the AnQiCMS template

A well-designed navigation system that can significantly improve the user experience of a website, and also better convey the structure and importance of the website to search engines.In AnQiCMS, we enjoy the high performance brought by Go language and the flexible and convenient Django template engine.Although the navigation settings in the background provide intuitive content management, in order to add a unique CSS class or ID to specific navigation items to achieve personalized styles or JavaScript interactions, we need to rely on the powerful template logic of AnQiCMS.

The template design principle of AnQiCMS is highly customizable, it encourages developers to dynamically generate content and attributes through logical tags and filters.This means that although the backend navigation management interface may not directly provide an input box for a "custom CSS class", we can still assign unique identifiers to them cleverly at the template level, by using the existing data of navigation items, such as titles, links, or their positions in the list.

Understand the navigation principles of AnQiCMS in depth

Let's review how AnQiCMS presents navigation in templates. Usually, we use built-innavListLabel to get the navigation list and iterate over it. For example, you might see a code snippet like this in yourheader.htmlorbash.htmlfile:

{% navList navs %}
    <ul>
        {% for item in navs %}
            <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
        {% endfor %}
    </ul>
{% endnavList %}

Here, navsIt is an array containing all the navigation items,itemRepresents each independent navigation item. EachitemObject has some useful properties, such asitem.Title(Navigation display name),item.Link(navigation link),item.IsCurrent(whether it is the current page), anditem.NavListIf there is a sub-navigation, these built-in properties are the foundation for our personalized customization.

Core Strategy: Skillfully use template logic and existing data.

To add a custom CSS class or ID to the navigation items, we cannot enter them directly in the background, but we need to change our thinking, dynamically generating these properties through conditional judgments or data transformations in the template.

Method one: Customizing a unique identifier based on navigation title or link

The most common and flexible way is to use the navigation items'TitleorLinkWe can convert these strings into CSS-friendly formats (for example, removing spaces and special characters, and converting them to lowercase), as their class names or IDs.

Assuming we have a navigation item named "About Us", we can add aabout-usclass name or ID:

  1. directlyitem.Titleoritem.Link(simple but possibly不规范):You can directly put{{ item.Title }}or{{ item.Link }}As part of the class name or ID. However, it should be noted that HTML IDs and class names have naming conventions and cannot contain spaces or certain special characters. If the navigation title itself contains these characters, it will result in an invalid class name or ID.

    <li id="nav-{{ item.Title }}">...</li> {# 如果标题是“关于 我们”，ID会是“nav-关于 我们”，不符合规范 #}

  2. Use a filter to convert titles or links (recommended method):AnQiCMS's template engine provides a rich set of filters that can convert strings. For example, we can uselowerfilters to convert strings to lowercase and then combinereplaceThe filter replaces spaces with hyphens-Even removes other unwanted special characters, thus generating a clean, CSS-friendly 'slug' (phrase identifier).

    Let us take the navigation title as an example to generate a string suitable for ID or class:

    {% set nav_slug = item.Title|lower|replace:" ","-"|replace:"&","and"|replace:"(",""|replace:")",""|replace:"/","" %}
<li class="nav-item {{ nav_slug }}-item" id="nav-{{ nav_slug }}">
    <a href="{{ item.Link }}" class="nav-link">
        {{ item.Title }}
        {% if item.SubTitle %}<span class="nav-subtitle">{{ item.SubTitle }}</span>{% endif %}
    </a>
</li>

    By{% set nav_slug = ... %}, we created a temporary variablenav_slugTo store the processed title. This way, whether the navigation title is "About Us" or "Products and Services", it can be intelligently converted toabout-usorproducts-and-servicesAs an available CSS class or ID prefix.

    If you want to add a custom class to specific navigation items while others remain default, you can useifConditional judgment:

    <li class="nav-item {% if item.Title == "联系我们" %}contact-us-nav{% endif %}">
    <a href="{{ item.Link }}">{{ item.Title }}</a>
</li>

    or based on the link to make a judgment:

    <li class="nav-item {% if item.Link == "/contact.html" %}contact-us-nav{% endif %}">
    <a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
Method two: useIsCurrentAdd propertiesactiveclass

AnQiCMS has provided us with very considerate servicesitem.IsCurrentAn attribute that returns a boolean value indicating whether the current navigation item corresponds to the page the user is visiting. This is useful for addingactiveClasses are very useful for highlighting, which is itself a common application of custom CSS classes:

`twig

  • <a href="{{ item.Link }}">{{ item.Title }}</a>