In website navigation, Breadcrumb navigation is a very practical auxiliary tool.It can clearly show the current position of the user on the website, provide a convenient return path, thereby significantly improving the user experience, and also has a positive effect on search engine optimization (SEO), helping search engines understand the structure hierarchy of the website.

Breadcrumbs navigation tag in AnQiCMS

AnQiCMS provides a dedicated template tagbreadcrumbThis tag will automatically build a complete navigation path based on the URL structure of the current page.

UsebreadcrumbThe basic syntax of the tag is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 您的面包屑导航渲染代码 #}
{% endbreadcrumb %}

Here,crumbsThe variable name you define for the breadcrumb list, you can name it according to your preference.indexandtitleTwo commonly used parameters for personalizing the breadcrumb navigation:

  • indexThis parameter is used to set the display text of "Home" in the breadcrumb navigation.By default, it will display as “Home Page”.index="网站主页"Pass in to use.
  • titleThis parameter controls the display style of the current page title in the breadcrumb navigation.
    • When set totrueAt (the default value), the breadcrumb will display the full current page title.
    • When set tofalseIf set, the title of the current page will not be displayed.
    • You can also pass a custom string, for exampletitle="文章详情"This will display the part of the current page as specified by you.
  • siteIdThis is an advanced parameter for multi-site users, usually you do not need to set it.If you manage multiple sites in the background and need to call data from specific sites, you can specify the site ID with this parameter.

WhenbreadcrumbLabel execution will store the generated breadcrumb path to the one you definecrumbsthe variable.crumbsis an array containing multiple objects, each representing a link in the navigation path, they have two key fields:

  • Name: indicates the display name of the link.
  • Link：Represents the URL address corresponding to this step.

How to display breadcrumb navigation on the page

It is generally recommended to implement breadcrumb navigation by placing it in the public template file of the website (for examplebase.html）in, or create a separate template fragment (such aspartial/breadcrumb.html), then throughincludeLabel it to bring it into the page that needs to be displayed.The benefits of doing this are that once the breadcrumb display logic or style is modified, all the pages that reference it will be updated synchronously, which greatly improves maintenance efficiency.

Here is an example of code that displays breadcrumb navigation in a template:

<nav class="breadcrumb-nav">
    {% breadcrumb breadcrumbs with index="首页" title=true %}
    <ol class="breadcrumb-list">
        {% for item in breadcrumbs %}
            <li class="breadcrumb-item">
                <a href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

In this code block:

  1. We usenavtag wraps the entire breadcrumb navigation and assignsbreadcrumb-navClass name, convenient for subsequent style control.
  2. {% breadcrumb breadcrumbs ... %}Defined the breadcrumb data source and assigned it tobreadcrumbsa variable.
  3. {% for item in breadcrumbs %}to iteratebreadcrumbseach navigation item in the array.
  4. Inside the loop,{{ item.Link }}It will output the link of the current navigation item,{{ item.Name }}Then output its display name. We place it in<li>Tags within, presented in a list form.
  5. Finally, remember to use{% endbreadcrumb %}tags to end the breadcrumb tag block.

If you want to make more personalized settings, you can adjust it like thisbreadcrumbThe parameters of the tag:

  • Modify the home page text and disable the current page title:

    {% breadcrumb breadcrumbs with index="网站主页" title=false %}

    In this way, the first link of the breadcrumb will display as “Home Page”, and the title of the current page itself will not appear at the end of the breadcrumb.

  • Customize the current page title display text：

    {% breadcrumb breadcrumbs with index="首页" title="当前页面信息" %}

    At this moment, the last link of the breadcrumb will display as “Current Page Information”, rather than the actual title of the page itself.

Summary

AnQiCMSbreadcrumbLabels make the breadcrumb navigation feature of the website accessible.With just a few lines of simple template code, you can provide users with a clear navigation path and optimize the website's hierarchy.At the same time, with the help of CSS styles, you can easily integrate breadcrumb navigation into the overall design of the website, providing a beautiful and feature-rich user experience.

Common Questions (FAQ)

Q1：面包屑导航会自动识别网站的层级结构吗？A1：是的，AnQiCMS 的breadcrumbLabels are intelligently parsed and generated according to the URL path of the current page and the content (such as articles, categories, single pages, etc.) in association with the data within the system.You do not need to specify each level manually.

Q2：如何修改面包屑导航的显示样式？A2：breadcrumb标签输出的是标准的 HTML 列表结构（通常是 English）}]<ol>or<ul>wrapped<li>Element). Therefore, you can use CSS to fully customize its style. Just add a suitable class name (such as in the example, the}]}breadcrumb-nav,breadcrumb-list,breadcrumb-item），then write the corresponding CSS rules.

Q3: Can I disable the breadcrumb navigation on specific pages or only display it on certain pages?A3: Of course. You can use conditional judgments in the template files of the page to controlbreadcrumbthe rendering of labels. For example, do not place breadcrumbs in the page template where they are not needed{% breadcrumb ... %}code, or use{% if 当前页面不需要面包屑 %}{% else %}{% breadcrumb ... %}{% endif %}such logic to selectively display.