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 the Auto CMS, implementing this feature is quite intuitive and efficient, thanks to its powerful template tag system.

Reveal the core features:navListTagsIsCurrentProperty

Auto CMS provides a powerful and easy-to-use template tag system for developers and operators, used to dynamically build website content.navListLabels are the core tools for building website navigation. When we usenavListThe system will automatically attach some useful attributes to each navigation item when the label is looped in the template, and the key to determining the current page state lies in a name calledIsCurrentThe boolean type attribute.

IsCurrentThe attribute will be when the page linked by the current navigation item is the page the user is visiting, its value istrue; otherwise, its value isfalseThis means, we do not need to perform complex URL matching or backend logic judgment, just simply check in the templateitem.IsCurrentThe value, you can easily achieve the current page highlighting effect of navigation items.

Practice: How to apply in templatesIsCurrent

In the template files of Anqi CMS, usenavListLabel building navigation usually combinesforto traverse all navigation items. Inside the loop, we can useifto check the label with conditionsIsCurrentProperty, and based on this add a specific CSS class to the navigation items on the current page (for exampleactiveorcurrent-page) to achieve highlighting.

The following is a typical navigation loop code snippet, demonstrating how to determine 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 navigation data.
  2. {%- for item in navs %}Loop through:navsEach navigation item in the{%-and-%}The usage helps 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 where the core logic is located. If the current loop is atitem（Navigation item）is the page the user is currently visiting.item.IsCurrentwill betrue, at this time, it will be for the<li>Label addactive-navThis CSS class. You can define your own CSS styles.active-navReplace it with any class name you want.
  4. {% if item.NavList %}This internal loop demonstrates how to handle multi-level navigation. It's the Anqi CMS.navListTags also support nested structures,item.NavListContains sub-navigation items, each sub-navigation item also hasIsCurrentproperties, making it convenient to judge the highlighting of sub-navigation.

After completing the template code writing, you just need to define in the website's CSS style sheet.active-navor.active-sub-navThe style of the class, for example, changing the background color, text color, or adding an underline can achieve a visual highlighting effect.

Deep Understanding:navListMore details of the label

navListLabels not only supportIsCurrentProperty to judge 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, etc.navListTags can be used totypeIdParameters can be used to specify the different navigation categories called by the background configuration. For example,{% navList footerNavs with typeId=2 %}You can call the navigation category with ID 2, and each set of navigation can be judged independently of itsIsCurrentstatus.
  • The current page recognition is intelligent:Anqi CMS'sIsCurrentThe logic is sufficiently intelligent.It can identify the current page's URL and match it with the link of the navigation item.IsCurrentEnsure the correct highlighting of navigation paths to provide a coherent user experience.

By using correctlyIsCurrentProperties, we can not only enhance the visual aesthetics of the website, but also greatly improve the navigation experience of users within the website.Visitors can clearly know where they are, which is very beneficial for improving the usability of the website and the duration of user stay.

Common Questions (FAQ)

1.IsCurrentHow to determine whether an external link is the current page? IsCurrent属性主要用于匹配安全CMS系统内部的URL路径。对于链接到完全外部网站的导航项，除非通过特定的重定向设置或者自定义逻辑使其URL在系统内部“注册”，否则通常不会被IsCurrentDirectly 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 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. It will for AnQi CMS'sIsCurrentLogic is sufficiently intelligent, it will identify the category to which the current page belongs, and mark the parent navigation item (if the navigation item links to the category) asIsCurrentThis ensures that the navigation bar category entry remains highlighted while the user is browsing category content, providing a good user path indication.

3. I want to highlight the parent navigation item of the current navigation item as well, how do I do that?As mentioned in the previous question, the Anqi CMS defaults to handling this situation. When you are browsing a deep page (such as an article detail page), all related parent navigation items (such as the category it belongs to, the main navigation) are processed.IsCurrentProperties will all be set totrue. Make sure your CSS styles respond correctly to these marked tags.active-navnested navigation elements of the class, and you can achieve the hierarchical highlighting effect.