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

Refine your website navigation: Customize the art of CSS classes and IDs in AnQiCMS templates

The template design principles of AnQiCMS are highly customizable, encouraging 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 'custom CSS class', we can still cleverly assign unique identifiers to them at the template level, using the existing data of navigation items such as titles, links, or their positions in the list.

Understand the working principle of navigation in AnQiCMS deeply

Let's review how AnQiCMS presents navigation in templates. Usually, we would use the built-innavListUse tags to get the navigation list and iterate through 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,navsis an array containing all the navigation items,itemrepresents each individual navigation item. Eachitemobject comes with some useful properties, such asitem.Title(navigation display name),item.Link(Navigation link),item.IsCurrent(whether it is the current page), and as well asitem.NavList[If there is a sub-navigation). These built-in properties are the foundation for our customization.]

Core Strategy: Make good use of template logic and existing data

To add custom CSS classes or IDs to navigation items, we cannot directly input them in the backend. Instead, we need to change our approach and dynamically generate these properties through conditional judgments or data transformations in the template.

Method one: Custom unique identifiers based on navigation titles or links

The most common and flexible method is to utilize the navigation itemsTitleorLinkWe can convert these strings into CSS-friendly formats (for example, remove spaces and special characters, and convert them to lowercase) as their class names or IDs.

Suppose we have a navigation item named “About Us”, we can add it using the following method:about-uswith the class name or ID:

  1. Directly use:item.Titleoritem.Link(Simple but may not be standard):You can directly input{{ item.Title }}or{{ item.Link }}As part of the class name or ID.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 invalid class names or IDs.

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

  2. Use the filter to convert the title or link (recommended method):The template engine of AnQiCMS provides rich filters that can transform strings. For example, we can uselowerfilters to convert strings to lowercase, and cooperate withreplaceThe filter replaces spaces with hyphens-Even removing other unwanted special characters, thus generating a clean, CSS-friendly 'slug' (phrase identifier).

    Let us take the navigation title as an example, generating 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>

    Pass{% set nav_slug = ... %}We created a temporary variable,nav_slugStore the processed title. So, whether the navigation title is 'About Us' or 'Products and Services', it can be intelligently converted toabout-usorproducts-and-servicesAs a prefix for available CSS class or ID.

    If you want to add a custom class only 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: useIsCurrentattribute additionactiveclass

AnQiCMS has already provided us with great care:item.IsCurrentIt is a property 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 a common application of custom CSS classes in itself:

`twig

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