How to obtain and traverse the name and URL of each level link in the AnQiCMS breadcrumb navigation?

As an experienced website operations expert, I deeply understand the importance of breadcrumb navigation for website user experience and Search Engine Optimization (SEO).It not only helps users clearly understand their position on the website, but also guides search engines to better crawl and understand the website's hierarchy structure.AnQiCMS (AnQiCMS) took this into consideration from the beginning of its design, providing a powerful and flexible breadcrumb navigation feature.Today, let's delve deeply into how to easily obtain and traverse each level of the breadcrumb navigation link names and URLs in AnQiCMS.

How does AnQiCMS provide breadcrumb navigation?

In AnQiCMS, the implementation of breadcrumb navigation benefits from its powerful and flexible template tag system. The core lies in a namedbreadcrumbThe tag is designed specifically for generating breadcrumb navigation. With a simple call, this tag can intelligently identify the current page position and automatically build the complete path from the homepage to the current page, organizing each level's name and corresponding URL into a data collection available for template calls.This design greatly simplifies the work of front-end developers, allowing website operators to easily display and customize breadcrumb navigation in templates.

Understand the breadcrumbs navigation tag in depth:breadcrumb

breadcrumbThe tag is a universal tool in the AnQiCMS template, which can automatically generate an array containing all hierarchical information based on the context of the current page. Its basic usage is:

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

here,变量名称This is the name you customize for the breadcrumb data set, for example, we usually usecrumbsThis name represents the term “breadcrumb”.

breadcrumbThe tag also provides some practical parameters, allowing you to flexibly configure according to your specific needs:

• indexThis parameter is used to set the display name of the 'Home' page in the breadcrumb navigation.By default, it will display as "Home". But if you want the home link to display as "My Blog" or another name, just set it toindex="我的博客"Just do it.
• titleThis parameter determines whether the current page title is displayed in the breadcrumb navigation. When set totitle=trueWhen (this is the default value), the title of the current page will be displayed as the last breadcrumb item. If set totitle=falseIf the current page title will not appear in the breadcrumb, this may be more in line with certain design expectations. In addition, you can also pass a string directly, for example,title="文章详情"Replace the default current page title with this.
• siteIdFor users using the AnQiCMS multi-site management function,siteIdThe parameter allows you to specify which site to retrieve breadcrumb data from. However, in most single-site scenarios, this parameter is usually not manually set, as the system automatically identifies the current site.

Traverse the breadcrumb level: Get the 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 defined in the tag变量名称for examplecrumbs). Each element of this array represents a breadcrumb level, and each element contains two core fields:

• Name: Represents the display name of the current breadcrumb level, such as "News Update", "Product Details", etc.
• **Link: Indicates the URL address corresponding to the current breadcrumb level, clicking it will jump to the page.

To obtain and iterate over this information, we can combine the AnQiCMS template engine'sforLoop tag.forloop to access each one by onecrumbseach element in the array, allowing us to access each element'sNameandLinkProperty.

In addition,forIn the loop, we can also take advantage offorloop.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 when rendering breadcrumb navigation, because usually the last breadcrumb item is the current page, which should not be rendered as a clickable link, but displayed as plain text, and may even containactiveStyle.

Practical code examples and analysis

Here is a complete code example of obtaining and rendering breadcrumb navigation in the AnQiCMS template, which considers the customization of the home page name, the display of 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 tocrumbsVariable.
   • index="安企CMS主页": Set the display name of the first breadcrumb link (i.e., the home page) to 'AnQi CMS Home Page.'
   • title=true: Indicates that the last item in the breadcrumb will display the full title of the current page.
3. {% for item in crumbs %}: This isforIt loops, it iterates one by onecrumbsEach 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 in the current loop it is the last item in the array astrueOtherwisefalse. We use this feature to distinguish between the current page and the historical path page.
5. <li class="breadcrumb-item active" aria-current="page">{{ item.Name }}</li>:
   • Whenforloop.lastWithtrueit indicates that this is the current page. We render it as<li>Label, and addactiveand classesaria-current="page"Attribute, which is very important for accessibility and style display
   • {{ 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.lastWithfalseAt the time, it indicates that this is a page in the history path. We render it as a linked<li>.
   • href="{{ item.Link }}": Assign the URL of the breadcrumb item to<a>label'shrefProperty.
   • {{ item.Name }}：Output the display name of the breadcrumb item as link text.
7. {% endfor %}and{% endbreadcrumb %}：These two tags areforloop andbreadcrumbThe closing tag of the label ensures the integrity of the template structure.

By this code, you can flexibly and standardizedly 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

The breadcrumb navigation feature of AnQiCMS, through concisebreadcrumbThe flexible parameters of the tag make it extremely simple to retrieve and traverse the hierarchical information of a website. Whether it's customizing the home page name, controlling the display of the current page title, or adjusting the link style according to UI/UX requirements