As an experienced website operations expert, I know that the navigation structure of a website plays a crucial role in user experience and search engine optimization (SEO).A clear breadcrumb navigation (Breadcrumb Navigation) not only helps users understand their position on the website but also provides valuable website structure information for search engines.

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

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

In simple terms,{% breadcrumb %}and{% endbreadcrumb %}The area between, which is the 'canvas' you use to define how breadcrumb navigation is rendered and displayed. When the AnQiCMS template engine parses to{% breadcrumb %}When a tag is used, it dynamically generates an array (or list) containing the complete navigation path information of the current page, and assigns this array to the variable specified in the tag—usually namedcrumbsTherefore, what we mainly place between these tags is the code for traversing and displaying thiscrumbsloop structure of the array content.

ThiscrumbsEach element of the variable represents a link in the navigation path, it at least contains two core attributes:Name(the displayed text of the link) andLink(The target URL of the link). To demonstrate these steps one by one, we will naturally use a template engine'sforLoop tag.

Core structure inside the tag: loops and data rendering

In{% breadcrumb crumbs %}and{% endbreadcrumb %}between, the core content iscrumbsVariable 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 intocrumbsthe array.

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,crumbsIs the name you give to this breadcrumb data array.
  2. UseforLoop through this variable:TargetcrumbsThrough each element in the array, you need to{% for item in crumbs %}to loop.
  3. Render eachitemthe content of:Inforinside the loop,itemThe variable represents the current breadcrumb node being processed. You can accessitem.NameGet the display text of the node throughitem.LinkGet the link address of the node. Usually, we will wrap them in<li><a>Such an HTML structure conforms to the semantic standards 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 basis.
  • {% breadcrumb crumbs %}Tell AnQiCMS to generate breadcrumb data and assign it tocrumbs.
  • {% for item in crumbs %}Loop throughcrumbsarray.
  • forloop.LastIs the 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 the current page usually only displays text without providing links.
  • {{ item.Link }}and{{ item.Name }}Outputted the links and names of the breadcrumb nodes respectively.

{% breadcrumb %}The parameters carried by the tag itself

Although we are concerned with the content inside the tag, but{% breadcrumb %}The parameters carried by the tag itself will directly affectcrumbsThe generation result of the array, thus indirectly affecting the display logic inside the tag pair.

  • 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): Display the actual title of the current page.
    • title=false: Do not display the current page title, the current page will be blank in the breadcrumb.
    • title="自定义文本": Display the custom text you specify as the current page title.
    • Example:{% breadcrumb crumbs with title="当前位置" %}Will display the current page as 'Current Location'.
  • siteIdparameters:Used under the multi-site management mode. If you need to call data from a specific site to generate breadcrumbs, you can do so bysiteId="N"Specify. Usually, this parameter does not need to be set in a single-site environment.

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

Suppose we want to change the homepage name 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 %}Label's parameters:

`twig