AnQi CMS: Skillfully use Django template tags to create intelligent and efficient breadcrumb navigation

As a senior website operations expert, I am well aware that breadcrumb navigation plays an indispensable role in website user experience (UX) and search engine optimization (SEO).It can clearly show the user's current position on the website, guide the user to easily backtrack the path, and also help search engines understand the hierarchical structure of the website, improve crawling efficiency and ranking.

In the efficient and flexible AnQiCMS content management system, we are fortunate to have a powerful and easy-to-use Django template engine. Among them, there is a special design for breadcrumb navigation.breadcrumbTag, it is also withforloop,ifLogical tags for conditional judgments and other logic are combined, which can help us build intelligent and highly customized navigation paths.Today, let's delve into how to cleverly combine these tags in AnQiCMS to create an excellent breadcrumb navigation.

Understand the breadcrumb navigation tag of AnQiCMS:breadcrumb

The core of generating breadcrumb navigation in AnQiCMS isbreadcrumbLabel. It is designed to be very intuitive, able to automatically generate a list containing path information based on the current page URL and content level.

Basic usage is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里处理 crumbs 列表 #}
{% endbreadcrumb %}

Here are some key points to note:

  • crumbs: This is the variable name for the breadcrumb path list you generated. You can name it according to your preference.path/breadcrumbsetc.
  • index="首页"This parameter is used to define the display text of the 'Home' link in the breadcrumb navigation. If omitted, 'Home' will be displayed by default.
  • title=true: This parameter controls whether the last element of the breadcrumb navigation displays the title of the current page. When set totrueit will display the full title of the current page; set tofalseIt will not be displayed; If you want to display a custom short title, you can also directly settitleto specific text, for exampletitle="文章详情".
  • output structure: The most important thing is,breadcrumbThe label will store each node of the breadcrumb path as an objectcrumbsin a variable. Each object containsName(link name) andLink(Link address) two key attributes. This is a list (or array), which combinesforandifthe foundation for tags.

join handsforLooping tags: Build dynamic navigation links

SincebreadcrumbThe tag returns a list containing multiple link information, thenforThe loop tag is naturally a partner for dealing with this list. We can iteratecrumbsover each element in the listitemAnd render it as an HTML element.

A basic oneforA loop structure might look like this:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this example, we define an ordered list(<ol>）as a breadcrumb container and usingforLoop throughcrumbseachitem. EachitemofLinkproperty for<a>label'shrefwhileNameproperty is used as the display text for the link. In this way, a dynamically generated basic breadcrumb navigation is presented.

ifThe wonder of tags: Enhancing the intelligence and experience of breadcrumbs

Simple iteration often cannot meet our pursuit of user experience and design details. At this time,ifLabels can really shine, adding more intelligence and flexibility to breadcrumb navigation.

1. Avoid empty breadcrumbs: display navigation as needed.

Sometimes, on the home page or other special pages, we may not want to display the breadcrumb navigation, or it should only be displayed when the path depth exceeds one level. In this case, you can useifTag checkcrumbsThe length of the list.

{% breadcrumb crumbs with index="首页" title=true %}
    {% if crumbs|length > 1 %} {# 只有当路径深度大于1时才显示面包屑 #}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% for item in crumbs %}
                    <li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
                {% endfor %}
            </ol>
        </nav>
    {% endif %}
{% endbreadcrumb %}

Bycrumbs|length > 1Such conditional judgments ensure that breadcrumb navigation only appears when there are actual levels to backtrack, enhancing the simplicity of the page.

2. Highlight the current page: specify the user's location

The last element of a breadcrumb navigation typically represents the current page the user is on.In order to better indicate this, we usually highlight it and do not add a link (or a link to itself).forThe loop provides a very useful context variableforloop.Last, to determine if the current element is the last in the loop.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                {% if forloop.Last %} {# 如果是最后一个元素，即当前页面 #}
                    <li class="breadcrumb-item active" aria-current="page">{{ item.Name }}</li>
                {% else %}
                    <li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>
                {% endif %}
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Here, whenforloop.LastWithtrueAt the time, we provided for<li>addedactiveand classesaria-current="page"properties (improved accessibility), and displayed text directly instead of links.

3. Flexible addition of separators: Optimized visual presentation

In a breadcrumb path, there is usually a need for a separator (such as>//etc.). We canforin a loopif not forloop.Lastto ensure that the separator does not appear after the last element.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% if not forloop.Last %}
                        <span class="breadcrumb-separator"> / </span>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this way, the separator only appears after the links on non-current pages, maintaining visual neatness.

Comprehensive Practice: Creating a functionally perfect breadcrumb navigation

Now, let's integrate these skills to build an instance of a robust and user-friendly breadcrumb navigation:

”`twig {%- # Try to get the breadcrumb navigation path information # -%} {% breadcrumb path with index=“Home” title=true %}

{%- # 只有当路径深度大于1时（即非主页），才渲染面包屑导航 # -%}
{%- if path|length > 1 %}
<nav class="aq-breadcrumb" aria-label="breadcrumb">
    <ol class="aq-breadcrumb-list">
        {%- # 遍历面包屑路径中的每一个项目 # -%}
        {% for item in path %}
            {%- # 判断是否是最后一个项目（即当前页面） # -%}
            {% if forloop.Last %}
                <li class="aq-breadcrumb-item aq-breadcrumb-active" aria-current="page">
                    {{ item.Name }}
                </li>
            {% else %}
                <li class="aq-breadcrumb-item">
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {#- # 只有在非最后一个项目后才添加分隔符 # -#}
                    <span class="aq-breadcrumb-separator"> / </span>
                </li>