How to display breadcrumb navigation in AnQi CMS and customize the homepage name?

When using AnQiCMS to manage website content, breadcrumb navigation is an important component for improving user experience and SEO (Search Engine Optimization) effectiveness.It clearly shows the current page's position in the website structure, helping users understand the website hierarchy and easily backtrack to the parent page.Benefiting from AnqiCMS's flexible template engine and rich built-in tags, it is very simple to implement breadcrumb navigation and personalized customization.

What is breadcrumb navigation?

Breadcrumb Navigation is usually displayed in the form of "Your current location: Home > Category > Subcategory > Current page", vividly like the breadcrumbs scattered in fairy tales, guiding users to find their way back.It not only provides auxiliary navigation functions, but also effectively reduces the bounce rate of websites, and provides structured information to search engines, which helps improve the inclusion and ranking of website content.

How to display breadcrumb navigation in AnqiCMS?

AnqiCMS is built-in with a special breadcrumb navigation tag, making it easy to add this feature to a website template. We usually place the breadcrumb navigation code in the public header file of the website template, such aspartial/breadcrumb.htmlorbash.htmlIn the file, then proceed through{% include %}Tag it to include it in the page layout where breadcrumbs need to be displayed.

To display breadcrumb navigation in the template, you can usebreadcrumbLabel. This label will automatically generate a navigation chain containing hierarchical relationships based on the current page URL.

The following is the basic implementation code for breadcrumb navigation.

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

In this code block:

{% breadcrumb crumbs %}The tag is used to obtain breadcrumb data. The system calculates the path of the current page and stores each level of data (including link nameNameand link addressLink) in a namedcrumbsin the array variable.
{% for item in crumbs %}Loop throughcrumbsarray, output each navigation item one by one.
{{item.Link}}and{{item.Name}}are used to output the link address and display name of each navigation item.

You can adjust the CSS style of your own website<nav>/<ol>and<li>The class name of the tag to match the overall design style of the website

How to customize the home page name?

By default, the first item in the breadcrumb navigation is usually displayed as "Home". If you want to change it to a more personalized or brand-specific name, such as "My Website Homepage" or your company name, you can do so bybreadcrumblabel'sindexSet the parameters.

Just inbreadcrumbthe tag withindexParameter, and specify the home page name you want:

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="我的网站主页" %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

In this way, the first link in the breadcrumb navigation will display as the custom "My website homepage".

Control the display of the page title at the end

In addition to customizing the home page name, we may also need to control the display method of the current page title at the end of the breadcrumb navigation.breadcrumbTags providedtitleTo achieve this purpose with parameters.

title=true(default):Display the full title of the current page. For example, when visiting an article, the breadcrumb will display the full title of the article.
title=false:Do not display the title of the current page, the breadcrumb navigation will end after displaying to the previous level of the current page.
title="自定义标题":Display the title of the current page with the specified string.

For example, if you do not want to display the title of the current page, or want to统一 display as "Detail Page", you can modify it in this way:

<nav class="breadcrumb-nav">
    {# 不显示当前页面标题，面包屑到上一级止 #}
    {% breadcrumb crumbs with index="我的网站主页" title=false %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}

    {# 或者统一显示为“详情页面” #}
    {% breadcrumb crumbs_alt with index="我的网站主页" title="详情页面" %}
    <ol class="breadcrumb">
        {% for item in crumbs_alt %}
            <li class="breadcrumb-item">
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

By using these flexible parameters, you can easily implement a complete and style-compatible breadcrumb navigation in the AnqiCMS website.

Frequently Asked Questions (FAQ)

Is the breadcrumb navigation effective for all pages?Breadcrumbs navigation is mainly aimed at content pages with hierarchical relationships (such as category list pages, article detail pages, product detail pages, etc.) and provides navigation assistance.For the homepage of a website itself, as it is usually the highest level of a website, the display of breadcrumb navigation is not very meaningful, or only a 'homepage' link is displayed.In practice, you usually introduce breadcrumb code in the general page template, except for the home page.
What is the actual homepage of the website after customizing the homepage name?<title>Will the tags change?No.breadcrumbin the labelindexThe parameter only affects the display name of the home link in the breadcrumb navigation and does not change the display of the home page in the browser tab<title>label content. The home page of the<title>/<keywords>and<description>It is usually configured in the 'Home TDK Settings' on the AnqiCMS backend.
What if I don't want to display breadcrumb navigation on a specific page?You can use it in the template file where you need to display breadcrumb navigation{% include "partial/breadcrumb.html" %}(Assuming your breadcrumb code is stored in this file). For pages where you do not want to display breadcrumbs, they are not included in the corresponding template file.includeLabel it. If the breadcrumb code is written directlybash.htmlin such a general layout file, you can use it in a specific page template by{% set noBreadcrumb = true %}such a variable, then inbash.htmluse it in{% if not noBreadcrumb %}To determine whether to display the breadcrumb navigation.

How to display breadcrumbs navigation and customize the homepage name in Anqi CMS?

What is breadcrumb navigation?