How to add icons or additional text to breadcrumb navigation items in AnQiCMS template?

As an experienced website operations expert, I am well aware of the importance of breadcrumb navigation in website user experience (UX) and search engine optimization (SEO).It not only clearly tells the user their current location, helping them easily backtrack, but also provides clues to the website structure for search engines.However, many times, the default breadcrumb navigation appears too plain, lacking personality and visual guidance.

Today, let's delve into how to cleverly add icons or additional text to the breadcrumb navigation items in the AnQiCMS template, making your website navigation more vibrant and practical.AnQi CMS with its flexible template engine and powerful features provides a solid foundation for us to realize these creative ideas.

Understanding breadcrumb navigation in AnQiCMS template

In Anqi CMS, the template is the core of building the website interface. It uses a syntax similar to the Django template engine, using{% 标签 %}to perform logical control, using{{ 变量 }}Output content. For breadcrumb navigation, Anqi CMS provides a very convenient built-in tag: breadcrumb.

ThisbreadcrumbThe tag can intelligently parse the URL structure of the current page and automatically generate a list containing all hierarchical navigation items. You can call it in the template in the following basic way:

{% breadcrumb crumbs with index="首页" title=true %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

Here, crumbsIt is an array object that contains information about each navigation item. Inforthe loop,itemthe variable represents each breadcrumb navigation item, and we can useitem.NameGet the display name of the navigation item, throughitem.LinkUnderstand this and we can start to inject new elements into each navigation item.

Practice Exercise One: Add icons to breadcrumb navigation items

Adding icons is a direct way to enhance the visual appeal of breadcrumb navigation. Whether it is a small house icon representing the homepage or a folder icon representing categories, it can make it clear to the user at a glance.

We usually combine to implement this featureifThe statement is to determine which icon code to insert based on the navigation item name or link.Assuming you have introduced a library like Font Awesome, it will be very simple to operate.

Let's see how to add a 🏠 icon for the "home" page and a 📂 icon for other category pages:

<nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.Last %} {# 判断是否为最后一个导航项（当前页面） #}
                        {# 当前页面通常不加链接，直接显示名称 #}
                        {% if item.Name == "首页" %}
                            <i class="fas fa-home"></i> {{ item.Name }}
                        {% elif item.Name == "产品中心" or item.Name == "新闻资讯" %}
                            <i class="fas fa-folder-open"></i> {{ item.Name }}
                        {% else %}
                            {{ item.Name }}
                        {% endif %}
                    {% else %}
                        {# 其他导航项则添加链接 #}
                        <a href="{{ item.Link }}">
                            {% if item.Name == "首页" %}
                                <i class="fas fa-home"></i> {{ item.Name }}
                            {% elif item.Name == "产品中心" or item.Name == "新闻资讯" %}
                                <i class="fas fa-folder"></i> {{ item.Name }}
                            {% else %}
                                {{ item.Name }}
                            {% endif %}
                        </a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In the above example:

1. We first pass through{% if forloop.Last %}Determine whether the current navigation item in the loop is the last one (i.e., the current page).
2. For the homepage, we pass throughitem.Name == "首页"To identify, and insertfas fa-homethe icon.
3. For pages of specific categories such as 'Product Center' or 'News Information', we insertfas fa-folderorfas fa-folder-openicons, which you can choose according to your design.
4. Items that are not specifically specified for navigation will only display names.

This flexible conditional judgment allows you to meet the needs of different page types, specific categories, and even throughitem.IdAdd a unique icon to a specific page.

Practice Scenario Two: Add additional text or custom content to breadcrumb navigation items.

In addition to the icon, we sometimes also want to add some additional text to the breadcrumb navigation items, such as a prefix 'Your location:' or specific tags, or to format the navigation name.The template filter and variable definition function of Anqi CMS can help us elegantly achieve these.

Suppose we want to add 'Current Position: ' before the first navigation item in the breadcrumb and simply modify the name of some navigation item.

<nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% set display_name = item.Name %} {# 定义一个变量来存储最终显示的名称 #}

                    {% if forloop.First %} {# 如果是第一个导航项（通常是首页） #}
                        当前位置：
                    {% endif %}

                    {% if item.Name == "产品中心" %} {# 针对特定导航项添加额外文本 #}
                        {% set display_name = "主营 " ~ display_name %}
                    {% endif %}

                    {% if forloop.Last %} {# 当前页面通常不加链接 #}
                        <span>{{ display_name }}</span>
                    {% else %}
                        <a href="{{ item.Link }}">{{ display_name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this example:

1. We use{% set display_name = item.Name %}Defined a temporary variabledisplay_nameso that we can modifyitem.Namethe original value without changing it.
2. By{% if forloop.First %}Check if it is the first breadcrumb item, then directly output "Current position:."
3. For the navigation item "Product Center", we used a string concatenation symbol~Added the prefix “Main Business”.
4. Finally, according toforloop.LastDetermine whether it is the current page, and decide whether to add a link accordingly.

Template filter of Anqi CMS (for example|add/|replace/|trim)Can also be used to help you handleitem.NamePerform more complex text processing, such as:

{# 假设我们想把名称中的"详情"替换为"概览" #}
{% set modified_name = item.Name|replace:"详情,概览" %}
<a href="{{ item.Link }}">{{ modified_name }}</a>

Advanced techniques: Handle the breadcrumb items on the current page

The last item in the breadcrumb navigation usually represents the current page, it should not be a clickable link but just plain text, and it may need a unique style to highlight. We have already used it in the previous exampleforloop.LastTo judge, let's emphasize its usage again:

<nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item {% if forloop.Last %}active{% endif %}">
                    {% if forloop.Last %}
                        {# 最后一个项不加链接，可以添加特殊样式类，如这里的"active" #}
                        {{ item.Name }}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

By{% if forloop.Last %}We can accurately control the behavior and style of the last navigation item, for example, by adding to itactiveThe class allows CSS to highlight it, further improving the user experience.

Summary

The powerful template engine of AnQi CMS gives us great flexibility, even seemingly simple breadcrumb navigation can be skillfully appliedbreadcrumbtags,forloop,ifConditional judgments and various filters to create a more personalized, guiding user interface. Whether through icons providing intuitive visual clues, or through additional