As an experienced website operations expert, I fully understand the importance of breadcrumb navigation for website user experience and search engine optimization (SEO).It can not only help users clearly understand their location on the website, but also guide search engines to better crawl and understand the hierarchical structure of the website.The AnQiCMS (AnQiCMS) took this into full consideration from the beginning of its design and provided a powerful and flexible breadcrumb navigation feature.Today, let's delve into how to easily retrieve and traverse each level of breadcrumb navigation link name and URL in AnQiCMS.

How does AnQi CMS provide breadcrumb navigation?

The implementation of breadcrumb navigation in AnQi CMS is due to its powerful and flexible template tag system. The core lies in a tag namedbreadcrumbThe label, it is designed specifically for generating breadcrumb navigation.Through simple calls, this tag can intelligently identify the location of the current page and automatically build a complete path from the homepage to the current page, and organize the names and corresponding URLs of each level into a data set that can be called by the template.This design greatly simplifies the work of front-end developers, allowing website operators to easily display and customize breadcrumb navigation in templates.

Deep understanding of breadcrumb navigation tags: Englishbreadcrumb

breadcrumb标签是AnQiCMS模板中的一个万能工具，它能够根据当前页面的上下文，自动生成一个包含所有层级信息的数组。它的基本使用方式是：

{% breadcrumb 变量名称 with index="首页" title=true %}
    {# 遍历生成的面包屑数据 #}
{% endbreadcrumb %}

Here,变量名称This is a name you customize for the breadcrumb dataset, for example, we usually usecrumbsthis name to represent “breadcrumb”.

breadcrumbLabels also provide some practical parameters, allowing you to flexibly configure according to your specific needs:

  • indexThis parameter is used to set the display name of "Home" in the breadcrumb navigation.By default, it will be displayed as 'Home Page'.index="我的博客".
  • titleThis parameter determines whether the title of the current page is displayed in the breadcrumb navigation. When set totitle=trueauto, this is the default value), the title of the current page will be displayed as the last breadcrumb item. If set totitle=falseIf so, the current page title will not appear in the breadcrumb, which may be more in line with some design expectations. In addition, you can also pass a string directly, such astitle="文章详情"，to replace the default current page title.
  • siteId：For users who use the AnQiCMS multi-site management function,siteIdThe parameter allows you to specify from which site to obtain breadcrumb data. However, in most single-site scenarios, this parameter usually does not need to be manually set, as the system will automatically identify the current site.

Traverse breadcrumb level: Get name and URL

WhenbreadcrumbAfter the tag is executed, it will encapsulate all levels of breadcrumb information into an array object and assign it to the one you define in the tag变量名称[for example]crumbsThis array contains each element representing a breadcrumb level, and each element includes two core fields:

  • Name：Represents the display name of the current breadcrumb level, such as "News and Dynamics
  • **Link：Represents the URL address corresponding to the current breadcrumb level, click to jump to the page.

To obtain and traverse this information, we can combine the AnQiCMS template engine'sforloop tags.forLoops can access each one individually.crumbsElements in the array, and let us be able to access each elementNameandLinkproperties.

In addition, inforWe can also make use of the loopforloop.lastThis built-in variable is used to determine whether the current item being traversed is the last one in the array. This is very useful in rendering breadcrumb navigation, as the last breadcrumb item is usually the current page, and it often should not be rendered as a clickable link but displayed as plain text, possibly withactivestyles can be added.

Useful Code Examples and Analysis

Below is a complete code example of how to retrieve and render breadcrumb navigation in AnQiCMS templates, considering the customization of the home page name, whether to display the current page title, and the common requirement that the last level not be a link.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {# 使用 breadcrumb 标签获取面包屑数据，并命名为 crumbs #}
        {# 这里我们设置首页名称为“安企CMS主页”，并默认显示当前页面标题 #}
        {% breadcrumb crumbs with index="安企CMS主页" title=true %}
            {% for item in crumbs %}
                {# 判断是否是最后一个面包屑项 #}
                {% if forloop.last %}
                    {# 如果是最后一个，通常不作为链接，并添加active样式 #}
                    <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>

Code analysis:

  1. <nav aria-label="breadcrumb">and<ol class="breadcrumb">This is the standard HTML5 structure used to declare the semantic and style container for breadcrumb navigation.
  2. {% breadcrumb crumbs with index="安企CMS主页" title=true %}:
    • We calledbreadcrumbtag, and assigned the generated breadcrumb data tocrumbsa variable.
    • index="安企CMS主页"：Set the display name of the first breadcrumb link (i.e., home page) to 'AnQi CMS Home Page'.
    • title=true：Indicates that the last item of the breadcrumb will display the complete title of the current page.
  3. {% for item in crumbs %}This is a colonforLoop, it will iterate one by onecrumbsEach breadcrumb item in the array. In each iteration, the data of the current item will be stored initemthe variable.
  4. {% if forloop.last %}: This is a special variable provided by the template engine,forloop.lastWhen the current loop is the last item in the array.trueotherwise,falseWe use this feature to distinguish the current page from the history path page.
  5. <li class="breadcrumb-item active" aria-current="page">{{ item.Name }}</li>:
    • Whenforloop.lastresponse fortrueThis indicates that it is the current page. We render it as.<li>Label, and addactiveClass andaria-current="page"Properties, which are very important for accessibility and style presentation.
    • {{ item.Name }}: Directly output the display name of the current breadcrumb item.
  6. <li class="breadcrumb-item"><a href="{{ item.Link }}">{{ item.Name }}</a></li>:
    • Whenforloop.lastresponse forfalseWhen, it indicates that this is a page in the history path. We render it as a page with links.<li>Label.
    • href="{{ item.Link }}": Assign the URL of the breadcrumb item to<a>Tagshrefproperties.
    • {{ item.Name }}：Output the display name of the breadcrumb item as link text.
  7. {% endfor %}and{% endbreadcrumb %}：These two tags areforloop andbreadcrumbThe end tag of the label, ensuring the integrity of the template structure.

With this code, you can flexibly and standardly display the breadcrumb navigation on any page of the AnQiCMS website, which not only improves the user experience but also lays a solid foundation for the website's SEO.

Summary

AnQiCMS's breadcrumb navigation feature, through a concisebreadcrumbTags and their flexible parameters make it exceptionally simple to retrieve and traverse website hierarchical information. Whether it is to customize the homepage name, control the display of the current page title, or adjust the link style according to UI/UX requirements