How to determine if the current navigation item is the current page in the `navList` loop?

In website operation, a clear navigation structure is crucial for improving user experience.A good navigation not only helps visitors quickly find the information they need, but also guides users through visual cues (such as highlighting the current page) so that they always know where they are.In AnQi CMS, implementing this feature is quite intuitive and efficient, thanks to its powerful template tag system.

The core feature revelation:navListlabel'sIsCurrentproperty

AnQi CMS provides a powerful and easy-to-use template tag system for developers and operators to dynamically build website content. Among them,navListTags are the core tools for building website navigation. When we usenavListWhen the template loops to output navigation items, the system automatically attaches some useful attributes to each navigation item, and the key to determining the current page state lies in a name calledIsCurrentThe boolean type attribute.

IsCurrentThe attribute will be when the current navigation item is linked to the page the user is visiting, its value istrue; Otherwise, its value isfalseThis means that we do not need to perform complex URL matching or backend logic judgments, we just need to check the template simplyitem.IsCurrentThe value can easily achieve the highlight effect of the current page of the navigation item.

Practice: How to apply in the templateIsCurrent

In the template files of Anqi CMS, usenavListThe navigation label is usually combinedforLoop to traverse all navigation items. Inside the loop, we can useifcondition judgment label to checkIsCurrentProperty, and based on this, add a specific CSS class to the navigation item of the current page (for exampleactiveorcurrent-page), thereby achieving highlighting.

The following is a typical navigation loop code snippet that demonstrates how to judge and highlight the current navigation item:

{% navList navs %}
    <ul class="main-nav">
    {%- for item in navs %}
        <li {% if item.IsCurrent %}class="active-nav"{% endif %}>
            <a href="{{ item.Link }}">{{ item.Title }}</a>
            {%- if item.NavList %} {# 如果有子导航 #}
            <dl class="sub-nav">
                {%- for subItem in item.NavList %}
                    <dd {% if subItem.IsCurrent %}class="active-sub-nav"{% endif %}>
                        <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                    </dd>
                {%- endfor %}
            </dl>
            {%- endif %}
        </li>
    {%- endfor %}
    </ul>
{% endnavList %}

In this code block:

1. {% navList navs %}: Declare a variable namednavsvariable, which contains all the navigation data.
2. {%- for item in navs %}: Loop through.navsEach navigation item. Here,{%-and-%}The usage helps to remove extra blank lines caused by HTML tags, making the final rendered HTML code cleaner.
3. {% if item.IsCurrent %}class="active-nav"{% endif %}: This is the core logic. If the current loop reachesitem(Navigation item) is the page the user is visiting,item.IsCurrentit will betrueat this time, it will be set for the<li>tagsactive-navthis CSS class. You can define your own CSS styles, and replace it withactive-navany class name you want.
4. {% if item.NavList %}This internal loop shows how to handle multi-level navigation. Anqi CMS'snavListtags also support nested structures,item.NavListwill contain sub-navigation items, and each sub-navigation item also hasIsCurrentProperty, making the highlight judgment of sub-navigation equally convenient.

After completing the writing of the template code, you just need to define it in the CSS style sheet of the website..active-navor.active-sub-navThe style of the class, such as changing the background color, text color, or adding underlines, can achieve a visual highlight effect.

Deep understanding:navListMore details about the tag

navListThe tag supports not onlyIsCurrentProperty to determine the current page, it also has more flexible navigation organization capabilities:

• Support for multiple navigation sets:Websites often have more than one set of navigation, such as top main navigation, bottom footer navigation, and so on.navListTags can be used totypeIdParameters to specify the different navigation categories configured on the backend. For example,{% navList footerNavs with typeId=2 %}You can call the navigation category with ID 2, each set of navigation can independently judge itsIsCurrentstatus。“
• Intelligent recognition of the current page:Of Security CMSIsCurrentThe logic is sufficiently intelligent. It can recognize the current page's URL and match it with the navigation item's link.Even if the navigation item links to a category page, and the user is browsing the detail page of an article under that category, AnQi CMS will intelligently mark the category navigation item and its parent navigation items asIsCurrentEnsure the correct highlighting of navigation paths, providing a coherent user experience.

By using correctlyIsCurrentThe attribute not only enhances the visual beauty of the website, but also greatly improves the navigation experience within the website.Visitors can clearly know where they are, which is very beneficial for improving the usability of the website and the user's stay time.

Frequently Asked Questions (FAQ)

1.IsCurrentHow to determine whether an external link is the current page? IsCurrentThe attribute is mainly used to match the URL paths within the AnQi CMS system. For navigation items linking to completely external websites, they are usually not registered internally unless redirected through specific settings or custom logic.IsCurrentIt is directly recognized as the current page. If you need to provide similar highlighting effects for external links, you may need to combine JavaScript or other frontend logic for the judgment.

2. If my navigation item links to a category page, and I am browsing a specific article detail page under that category,IsCurrentwill it take effect?Yes. Anqi CMS'sIsCurrentThe logic is sufficiently intelligent, it will recognize the category of the current page and mark the parent navigation item (if the navigation item links to the category) asIsCurrentThis ensures that when users browse category content, the category entry in the navigation bar also remains highlighted, providing a good user path indication.

3. How do I highlight the parent navigation item of the current navigation item?As mentioned in the previous question, Anqi CMS handles this situation by default. When you are browsing a deep page (such as an article detail page), all parent navigation items related to it (such as the category it belongs to, the main navigation) ofIsCurrentThe properties will be set totrueMake sure your CSS styles respond correctly to these marked items..active-navNested navigation elements of the class can achieve hierarchical highlighting effects.