In website operation, a clear navigation structure is crucial for improving user experience and search engine optimization (SEO).Imagine if, as a visitor delves deep into your website, there were a path guide that told them 'You are here', wouldn't it make them feel secure and convenient?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 the AnQiCMS template.

Understand the core mechanism of breadcrumb navigation in AnQiCMS

AnQiCMS provides a namedbreadcrumbA dedicated template tag, it can automatically generate a navigation path data according to the URL structure of the current page.The use of this tag is very intuitive, we usually place it at the top of the page to provide visitors with a clear 'home path'.

While 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) andLink(Link address) These two key properties. By traversing this array, we can dynamically build a complete breadcrumb navigation on the page.

Detailed steps: Implement breadcrumb navigation in AnQiCMS template

Step 1: Prepare the breadcrumb code snippet file

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

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

Step two: write the breadcrumb navigation template code

in the newly createdbreadcrumb.htmlin the file, we will utilizebreadcrumbTags andforLoop to build the HTML structure for breadcrumb navigation.

This is a commonly used breadcrumb navigation code example, which not only generates the navigation path but also considers the highlight 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 assigned tocrumbsVariable.
  • {%- for item in crumbs %}Loop through each breadcrumb navigation item.
  • forloop.LastIt is a very useful built-in variable, used to determine whether 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-}Remove the whitespace from the line where the tag is located, making the final output HTML more tidy.

Step 3: Customize the display behavior of the breadcrumb navigation.

breadcrumbThe tag provides several parameters to allow flexible control of the breadcrumb display:

  1. indexParameter: Set the home page nameBy default,breadcrumbThe label will display the navigation starting point as "Home". If you want to change this name, for example to "My Blog" or "Homepage", simply adjust itindexParameters can be used. 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 in the breadcrumb to be the title of the current page.titleThe parameters come into play.

    • title=true(Default): It will automatically display the title of the current page (such as the article title, product name, etc.).
    • title=false: The title of the current page will not be displayed.
    • title="自定义文本"If you want to display a fixed word consistently, such as on the article detail pagetitle='文章内容'it will display this customized text.

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

  3. siteIdParameter (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 site,breadcrumbTags also supportsiteIdParameter. However, in most single-site cases, you usually do not need to care about this parameter.

Step 4: Introduce breadcrumb navigation on the page

Having an independentbreadcrumb.htmlAfter the file, you just need to place the breadcrumb in the template file where you need it (for exampledetail.htmlorlist.html), usingincludeLabel it to introduce. Usually, breadcrumbs are placed above the main content area of the page, or immediately after the website header navigation.

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

{% block header %}

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

{% endblock %}

{% block main_content %}

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

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

{%