In website operation, a clear navigation structure is crucial for improving user experience and search engine optimization (SEO).Imagine, when visitors delve into the depths of your website, wouldn't it be reassuring and convenient if there was a path to guide them and tell them 'You are here'?This is the function of Breadcrumb Navigation.It is like breadcrumbs scattered in fairy tales, helping users easily backtrack in the website and understand the position of the current page in the overall website structure.

In AnQiCMS, due to its flexible template mechanism and SEO-friendly design, adding breadcrumb navigation to the website becomes extremely simple and efficient.This article will guide you step by step on how to generate and display this practical navigation element in AnQiCMS templates.

Understanding the core mechanism of breadcrumb navigation in AnQiCMS

AnQiCMS provides a namedbreadcrumbThe exclusive template tag, it can automatically generate a set of navigation path data based on the URL structure of the current page.The use of this tag is very intuitive, it is usually placed at the top of the page, providing visitors with a clear 'return path'.

When usingbreadcrumbWhen labeling, you need to define a variable name to receive the generated breadcrumb data, for examplecrumbs. ThiscrumbsThe variable will be an array object containing multiple navigation items, each withName(link name) andLinkThese two key properties. By traversing this array, we can dynamically build out the complete breadcrumb navigation on the page.

详细步骤：在 AnQiCMS 模板中实现面包屑导航

第一步：准备面包屑代码片段文件

In order to make the breadcrumb navigation easily accessible on all pages and maintain code cleanliness and modularity, we strongly recommend placing the breadcrumb code in a separate template snippet file. According to the template conventions of AnQiCMS, such snippet files are usually placed intemplate/你的模板目录/partial/the directory.

You can create a file namedbreadcrumb.html, the path is similar to:/template/你的模板目录/partial/breadcrumb.html.

Second step: write the breadcrumb navigation template code

in the newly createdbreadcrumb.htmlfile, we will usebreadcrumbTags andforLoop to build the HTML structure of breadcrumb navigation.

The following is a commonly used breadcrumb navigation code example, which not only generates the navigation path but also considers the highlight display of the current page.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {%- breadcrumb crumbs with index="首页" 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>

In this code snippet:

  • {%- breadcrumb crumbs ... %}The breadcrumb data is defined to be assigned tocrumbsa variable.
  • {%- for item in crumbs %}Translate the content of the value from [auto] to [English].
  • forloop.LastIt is a very useful built-in variable used to determine if the current loop is the last item.We use it to distinguish the current page (usually non-clickable) from other clickable parent pages.
  • item.NameDisplay the text of the navigation item.item.LinkProvide the link address of the navigation item.
  • {%-and-}Used to remove the whitespace characters of the line where the tag is located, making the final output HTML code more tidy.

Step 3: Customize the display behavior of breadcrumb navigation.

breadcrumbThe label provides several parameters that allow you to flexibly control the display of breadcrumbs:

  1. indexParameter: Set the name of the home pageBy default,breadcrumbThe label will display the navigation starting point as "HomeindexThe parameter is enough. For example:{% breadcrumb crumbs with index="我的网站主页" %}

  2. titleParameter: Controls the display of the current page titleFor document detail pages or single pages, you may want the last item of the breadcrumb to be the title of the current page.titlethe parameter comes into play.

    • title=true（Default Value）：The current page's title will be automatically displayed (such as article title, product name, etc.).
    • title=false: The current page's title will not be displayed.
    • title="自定义文本"If you want to display a fixed word uniformly, for example, on the article detail pagetitle='文章内容'it will display this custom text.

    You can flexibly set it according to the page type or design requirementstitleParameter.

  3. siteIdParameters (multi-site scenario)If you have enabled the multi-site management feature in AnQiCMS and want to call data from other sites on a specific sitebreadcrumbLabels are supportedsiteIdParameters. However, in most single-site scenarios, you usually do not need to care about this parameter.

Step 4: Introduce breadcrumb navigation in the page.

With an independentbreadcrumb.htmlAfter the file, you only need to place it in the template file where you want to display the breadcrumbs (for exampledetail.htmlorlist.html)includeLabel it to include. Usually, breadcrumbs are placed above the main content area of the page or right after the website header navigation.

`twig {% extends ‘base.html’ %} {# Assume your page extends base.html #}

{% block header %}

{# 你的网站头部导航代码 #}

{% endblock %}

{% block main_content %}

{# 在这里引入面包屑导航 #}
{% include "partial/breadcrumb.html" %}

{# 页面主内容区域 #}
<div class="page-content">
    <h1>欢迎来到 {{ pageTitle }}</h1>
    <p>这是页面的详细内容...</p>
</div>

{%