As an experienced website operation expert, I am well aware that the navigation structure of a website plays a crucial role in user experience and search engine optimization (SEO).The clear breadcrumb navigation (Breadcrumb Navigation) can not only help users understand their location within the website but also provide valuable website structure information to search engines.

AnQiCMS as a powerful and flexible content management system, provides us with{% breadcrumb %}Label to easily build breadcrumb navigation. However, many operators may be confused when first encountering it.{% breadcrumb %}and{% endbreadcrumb %}This tag is puzzled about what content can be placed between these tags. Today, I will deeply interpret the mystery of these tags for everyone.

AnQiCMS Breadcrumb Navigation:{% breadcrumb %}With{% endbreadcrumb %}The connotation and practice

In simple terms,{% breadcrumb %}and{% endbreadcrumb %}The area between, is the "canvas" you use to define how the breadcrumb navigation is rendered and displayed. When AnQiCMS's template engine parses to{% breadcrumb %}When labeling, it will dynamically generate an array (or list) containing the complete navigation path information of the current page, and assign this array to the variable you specify in the label—usually namedcrumbsTherefore, between these tags, we mainly place the loop structure used to traverse and display thiscrumbsthe array content.

ThiscrumbsEach element of the variable represents a link in the navigation path, it at least contains two core attributes:Name(displayed text of the link) andLink（The target URL of the link）。To sequentially demonstrate these steps, we naturally use the template engine'sforloop tags.

core structure inside the tag: loops and data rendering

In{% breadcrumb crumbs %}and{% endbreadcrumb %}between, the most core content is thatcrumbsVariable iteration. AnQiCMS will automatically generate the complete path from the homepage to the current page based on the type of the current page (such as article detail page, category list page, single page, etc.), and encapsulate the information of each path node intocrumbs数组中。

You need to do is：

  1. Declare a variable to receive the breadcrumb data：In{% breadcrumb %}In the tag, you will see{% breadcrumb crumbs %}This kind of writing,crumbswhich is the name you give to this breadcrumb data array.
  2. UseforLoop through this variable:ForcrumbsFor each element in the array, you need to go through:{% for item in crumbs %}to iterate.
  3. Render eachitemcontent:InforInside the loop,itemThe variable represents the current breadcrumb node being processed. You can accessitem.NameTo get the display text of the node, byitem.LinkTo get the link address of the node. Usually, we will wrap them in<li><a>Such HTML structure conforms to the semantic standard of breadcrumb navigation.

Basic structure example:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {# 在这里，我们遍历 crumbs 数组，item 代表每个面包屑节点 #}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {# 判断是否是最后一个元素（当前页面），最后一个通常不带链接 #}
                    {% if forloop.Last %}
                        <span class="active">{{ item.Name }}</span>
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this example:

  • We used<nav>and<ol class="breadcrumb">Tags to provide semantic and style foundation.
  • {% breadcrumb crumbs %}Tell AnQiCMS to generate breadcrumb data and assign it tocrumbs.
  • {% for item in crumbs %}to iteratecrumbsarray.
  • forloop.LastIt is a loop auxiliary variable provided by the AnQiCMS template engine, used to determine whether the current loop is the last element.This is a commonly used logic in breadcrumb navigation, that is, the current page usually only displays text without providing links.
  • {{ item.Link }}and{{ item.Name }}Output the links and names of the breadcrumb nodes respectively.

{% breadcrumb %}Parameters carried by the tag itself

Even though we are concerned with the content inside the tags,{% breadcrumb %}the parameters carried by the tags themselves will directly influencecrumbsthe generation result of the array, thereby indirectly affecting the display logic inside the tag pairs.

  • indexParameters:Used to set the display name of "Home" in the breadcrumb navigation. The default value is "Home".
    • Example:{% breadcrumb crumbs with index="我的博客" %}Will display the home page link as "My Blog".
  • titleParameters:Control the display mode of the current page (the last node of the breadcrumb path).
    • title=true(Default value): Display the actual title of the current page.
    • title=false：Do not display the title of the current page, the current page will be blank in the breadcrumb.
    • title="自定义文本"：Display the custom text you specify as the title of the current page.
    • Example:{% breadcrumb crumbs with title="当前位置" %}The current page will be displayed as “Current Location”.
  • siteIdParameters:Use under multi-site management mode. If you need to call data from a specific site to generate breadcrumbs,siteId="N"Specify it. Usually, it is not necessary to set this parameter in a single-site environment.

Custom display example (home page name and title control):

If we want to change the name of the homepage from the default “Homepage” to “My Blog”, and display a fixed text “Details Page” on the current page, we can adjust it like this{% breadcrumb %}The parameters of the tag:

`twig