As an experienced security CMS website operator, I know the importance of a clear and efficient website navigation system for user experience and Search Engine Optimization (SEO).Breadcrumbs navigation is an important part of website auxiliary navigation, which can intuitively show the user's position on the website and provide a convenient return path.AnQi CMS with its flexible template engine makes it easy and efficient to generate breadcrumb navigation in website templates.

Generate breadcrumb navigation path in AnQiCMS template

Integrate breadcrumb navigation in AnQiCMS templates, mainly relying on built-inbreadcrumbLabel.This tag is designed to automatically generate the corresponding navigation path based on the structure of the current page (for example: Home > Category > Article), greatly simplifying the work of template developers.

To usebreadcrumbtags, you need to insert the following structure at the appropriate position in the template:

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

In this code block,breadcrumbThe tag will store the generated breadcrumb path in an array variable namedcrumbsThen, you can use theforLoop throughcrumbsarray to render each path segment (item)Link(link address) andName(Display Name).In general, to maintain the semantics of breadcrumb navigation, only the path segments that are not on the current page should be linked, and the path segments on the current page should be displayed as plain text.loop.lastDetermine whether it is the last element to control.

Detailed explanation of the breadcrumb tag parameters

breadcrumbThe tag provides several practical parameters, allowing you to flexibly configure according to the specific needs of the website:

indexParameter

This parameter is used to customize the display text of the 'home page' link in the breadcrumb navigation.By default, it will display as "Home".indexParameter to achieve.

For example, if you want to display the homepage as "My Blog":

{% breadcrumb crumbs with index="我的博客" %}
    {# ... 循环渲染 crumbs ... #}
{% endbreadcrumb %}

titleParameter

This parameter controls whether the current page title is displayed in the breadcrumb navigation of the document or single page detail page. It accepts three types of values:

  • title=trueThis is the default behavior. On the detail page (such as the article detail page), the last link of the breadcrumb will display the full title of the page.
  • title=falseIf set tofalseThis will not display the current page title in the breadcrumb on the detail page. This may help simplify the visual presentation in some designs, or when you want to manually control the display of the title.
  • title="自定义标题"You can directly pass a string, which will be displayed as the last link of the detail page breadcrumb, for exampletitle="文章详情"This provides greater flexibility for the display of the title.

For example, if you do not want to display the current title on the detail page:

{% breadcrumb crumbs with index="首页" title=false %}
    {# ... 循环渲染 crumbs ... #}
{% endbreadcrumb %}

Or if you want to display a general title:

{% breadcrumb crumbs with index="首页" title="阅读详情" %}
    {# ... 循环渲染 crumbs ... #}
{% endbreadcrumb %}

siteIdParameter

siteIdThe parameter is mainly used for multi-site management scenarios. If you have created multiple sites in the AnQiCMS backend and need to call breadcrumb data from other sites in a template of a particular site (this is not common because breadcrumbs should reflect the navigation structure of the current site), you can specifysiteIdTo implement. For single-site users, this parameter is usually not required.

Actual application examples and **practice

In actual template development, in order to maintain code neatness and maintainability, it is usually to store the breadcrumb navigation code snippet in a separate file, such as/template/您的模板目录/partial/breadcrumb.htmlThen in each page template that needs to display breadcrumbs, useincludetag to include it.

Example: inpartial/breadcrumb.htmldefine the breadcrumbs.

{# /template/您的模板目录/partial/breadcrumb.html #}
{% breadcrumb crumbs with index="首页" title=true %}
    <nav class="breadcrumb">
        <ol itemscope itemtype="https://schema.org/BreadcrumbList">
            {% for item in crumbs %}
                <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                    {% if not loop.last %}
                        <a itemprop="item" href="{{ item.Link }}">
                            <span itemprop="name">{{ item.Name }}</span>
                        </a>
                        <meta itemprop="position" content="{{ loop.index }}" />
                    {% else %}
                        <span itemprop="name">{{ item.Name }}</span>
                        <meta itemprop="position" content="{{ loop.index }}" />
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endbreadcrumb %}

Here, Schema.org microdata tags have been added, which are very beneficial for search engines to understand the structure of websites and improve SEO performance.

Introduce breadcrumbs in the page template

For example, in your article detail pagearchive/detail.htmlIn it, you can introduce it like this:

{# /template/您的模板目录/archive/detail.html #}
{% extends 'base.html' %} {# 假设您有基础模板 #}

{% block content %}
    <div class="main-content">
        {% include 'partial/breadcrumb.html' %} {# 引入面包屑导航 #}
        <h1>{{ archive.Title }}</h1>
        <article>
            {# 文章内容 #}
            {{ archive.Content|safe }}
        </article>
    </div>
{% endblock %}

In this way, you can ensure that the breadcrumb navigation style of the entire website is consistent, and you only need to edit one piece of code when making changes.A unified breadcrumb style and accurate navigation path not only improves the user's browsing experience but also helps search engines better capture and understand the hierarchy of your website, thereby having a positive impact on SEO.

Frequently Asked Questions (FAQ)

1. How to modify the text of 'Home' in the breadcrumb navigation?

You can use it tobreadcrumblabel'sindexParameters to modify the "homepage" text. For example,{% breadcrumb crumbs with index="我的网站主页" %}The homepage will be displayed as "My website homepage."

2. Why is the article title not displayed in the breadcrumb of my article detail page?

This might be because you havetitlethe parameter tofalse. Please check yourbreadcrumbtag, make suretitlethe parameter totrue(default) or a custom string. For example:{% breadcrumb crumbs with title=true %}.

How to adjust the breadcrumb path style?

The breadcrumb path style is completely controlled by your CSS file. In the above example, we used<nav class="breadcrumb">and<ul><li>the structure. You can specify it in the style sheet of your website..breadcrumb/ul/liandaDefine the styles for elements to match your website design.