Hello everyone, as an experienced website operations expert, I know that every detail of a website is crucial for user experience and search engine optimization.Breadcrumb Navigation is a design element that appears to be small, but is actually of great significance.It not only clearly informs users of their current location, effectively enhancing the website's usability, but also optimizes the website structure, helping with SEO.

Today, let's delve into how to flexibly use the breadcrumb navigation tags in AnQiCMS templates, making your website path clear at a glance.

Core Grammar: Unveiling AnQiCMS Breadcrumbs Tag

The core of calling breadcrumbs navigation in AnQiCMS isbreadcrumbTags. Its basic syntax structure is concise and intuitive, resembling a set of instructions that inform the system where we want to display the breadcrumbs and what content to display.

The basic calling format is like this:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里放置遍历面包屑路径的代码 #}
{% endbreadcrumb %}

You can see that this tag starts with{% breadcrumb ... %}and ends with{% endbreadcrumb %}. The logic code used to display the breadcrumb path is between them.crumbsis the variable name we specify for the breadcrumb path data, you can name it according to your own habits, but it is usually usedcrumbsThis word means 'crumbs', it carries all the path information from the current page to the homepage.

Deeply understand parameters: customize your breadcrumb path

To better serve your website design and user needs with breadcrumb navigation,breadcrumbtags provide some practical parameters for detailed customization.

  1. indexParameter: Defines the entrance of 'home' indexThe function of the parameter is to define the first 'home' in the breadcrumb path, which is what we usually call the 'home page' link text.AnQiCMS defaults to displaying it as 'Home', but you can completely modify it according to your brand or website positioning.

    • If you want to change 'home page' to 'my blog', you can set it like this:index="我的博客".

  2. titleParameter: Controls the display of the current pageThis parameter determines how the last element of the breadcrumb path—i.e., the title of the current page—is displayed.This is particularly important for pages that need to highlight the current content, such as document detail pages, product detail pages, etc.

    • When set totitle=trueAt (this is the default value), the breadcrumbs will display the full title of the current page, for example: "Home > Product Center > Details of a Specific Product".
    • If you do not want the title of the current page to be displayed in the breadcrumbs, you can choosetitle=falseAt this point, the breadcrumb path will stop at the parent category of the current page, for example: "Home > Product Center".
    • In addition, you can also specify a specific string, for example:title="文章详情"This is very useful when it is necessary to display a unified title on certain specific pages.

  3. siteIdParameter: flexible invocation under multiple sitesAnQiCMS supports multi-site management. If you manage multiple sites in the background and want to call the breadcrumb path of another site in a specific template,siteIdParameters can be put to use. Usually, we do not need to manually set this parameter, the system will automatically identify the ID of the current site.

Traversal and Display: The actual steps to build breadcrumbs

Now we have understoodbreadcrumbthe tags and their parameters, next we will see how tocrumbstraverse the path information in this variable and display it on the web page.

crumbsVariables are actually an array that contains multiple path objects (item). Each path object has two key properties:

  • NameThe display name of the path, which is the text the user sees.
  • LinkThe URL address corresponding to the path.

So, we need to use aforIterate over these path objects one by one, and construct the corresponding HTML structure. A common practice is to use an unordered list<ul>and list items<li>to carry, and through<a>Label each path with clickable links.

For example, a typical breadcrumb navigation code snippet would look like this:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if forloop.last %}
                        {{ item.Name }} {# 最后一个元素通常不加链接 #}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In the above example,forloop.lastIt is a very useful judgment that can help us identify the last element in a loop.The last element of breadcrumb navigation (i.e., the current page) usually does not need to be linked because it represents the destination where the user has already arrived.

Practice Exercise: Several Common Calling Methods of Breadcrumb Navigation

Let's experience the flexible application of breadcrumb tags through several specific examples:

  1. Standard Usage: Display 'Home' and the current page titleThis is the most common and recommended usage, which starts with 'Home' and displays the full title of the current page.

    <nav class="my-breadcrumb">
    <ul>
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li>
                    {% if forloop.last %}
                        {{ item.Name }}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a> &gt;
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

  2. Custom homepage text and not displaying the current page title:In certain design scenarios, you may want to change the "Home" text to another description, and not display the current page title, stopping the breadcrumbs at the previous level category.

    <nav class="my-breadcrumb">
    <ul>
        {% breadcrumb crumbs with index="我的站点" title=false %}
            {% for item in crumbs %}
                <li>
                    {% if forloop.last %}
                        {{ item.Name }}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a> /
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

Tip: Make breadcrumbs navigation more outstanding

  • Placement:Breadcrumbs navigation is usually placed on the websitesbase.htmlmain template file orpartial/header.html[en] In common code snippets. This ensures that the code is automatically loaded on all pages that need to be displayed, without the need to write it repeatedly.
  • [en] Style beautification:Don't forget to add CSS styles to your breadcrumb navigation to keep it consistent with the overall design style of the website.By adjusting the style of the font, color, spacing, and separator, the visual effect can be greatly enhanced.
  • [en] Dynamic generation:The breadcrumb navigation of AnQiCMS is completely dynamically generated.This means that no matter which page the user visits, the system will automatically construct the correct breadcrumb path based on the current page's category hierarchy or single page path, greatly reducing the cost of manual maintenance.

Through these features, AnQiCMS makes the implementation of breadcrumb navigation both simple and powerful, whether it is to provide clear path guidance to users or to optimize the website structure for search engines, it can easily cope with it.

Common Questions (FAQ)

Q1: Why is my breadcrumb navigation not displaying the title of the current page? A1:This is usually due tobreadcrumbthe tag intitleparameter settings. Please check your template code to ensuretitleThe parameter has been set totrueor it has not been setfalseor some specific string. For example,{% breadcrumb crumbs with title=true %}can ensure the display of the current page title.

Q2: How do I change the text of 'Home' in the breadcrumb navigation? A2:You can modifybreadcrumbthe tag inindexthe parameter to achieve this. By default,indexThe value of the parameter is "Home page". You can change it to any text you want, such as{% breadcrumb crumbs with index="网站主页" %}.

Q3: How to adjust the style of the breadcrumb navigation, such as changing the separator or font color? A3:The template tags of AnQiCMS are mainly responsible for outputting the HTML structure and content of breadcrumb navigation.You need to use CSS to adjust its style.<nav>or<div>Labels inside, the content is<ul>/<li>and<a>such elements. You can write CSS rules for these HTML elements to control font, color, background, spacing, and custom separators (for example, using)::beforeor::afterpseudo-elements, etc., to fit your website design.