When managing website content with AnQiCMS, breadcrumb navigation is an important component for improving user experience and search engine optimization (SEO) 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.Thanks to the flexible template engine and rich built-in tags of AnqiCMS, implementing breadcrumb navigation and customization is very simple.

What is breadcrumb navigation?

How to display breadcrumb navigation in AnqiCMS?

AnqiCMS内置了专门的面包屑导航标签，使得在网站模板中添加这项功能变得轻而易举。我们通常会将面包屑导航代码放置在网站模板的公共头部文件，例如partial/breadcrumb.htmlorbash.htmlIn the files, then through{% include %}label to introduce it to the page layout where you need to display breadcrumbs.

To display breadcrumb navigation in the template, you can usebreadcrumbThis tag will automatically generate a navigation chain containing hierarchy based on the current page URL path.

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 %}Tags are used to obtain breadcrumb data. The system calculates the path of the current page and stores each level of data (including link names and addresses) in a namedNameandLink.crumbs.
  • {% for item in crumbs %}to iteratecrumbsArray, output each navigation item one by one.
  • {{item.Link}}and{{item.Name}}They are used separately to output the link address and display name of each navigation item.

You can adjust them according to the CSS style of your website.<nav>/<ol>and<li>The class name of the label, 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 canbreadcrumbTagsindexParameter settings.

Just need tobreadcrumbtag.indexthe parameter, 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 your customized "My Website Homepage".

Control the display of the page title at the end

In addition to customizing the name of the homepage, we may also need to control the display method of the current page title at the end of the breadcrumb navigation.breadcrumbTags providetitleTo achieve this purpose, use the parameter.

  • title=true(Default Value):Display the full title of the current page. For example, when visiting an article, the breadcrumb will show 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 show it as 'Detail Page' uniformly, you can modify it like this:

<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 flexibly using these parameters, you can easily implement a feature-rich and style-compliant breadcrumb navigation in the AnqiCMS website.

Common Questions (FAQ)

  1. Is breadcrumb navigation effective for all pages?Breadcrumb navigation is mainly provided for content pages with hierarchical relationships (such as category list pages, article detail pages, product detail pages, etc.) to assist with navigation.For the homepage itself, as it is usually the highest level of a website, the display of breadcrumb navigation is not very meaningful, or only a 'Home' link is displayed.In practical applications, you usually introduce breadcrumb code in general page templates other than the homepage.

  2. The actual home page of the website after customizing the home page name<title>Will the tags change?No.breadcrumbthe tag inindexThe parameter only affects the display name of the home link in the breadcrumb navigation, but will not change the display of the website home page in the browser tab.<title>Label content. The home page of the website's<title>/<keywords>and<description>It is usually configured in the 'Homepage TDK Settings' on the AnqiCMS backend.

  3. What if I don't want the breadcrumb navigation to be displayed on a specific page?You can use this 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 breadcrumbs are not desired, they are not included in the corresponding template file.includeLabel it. If the breadcrumb code is written directly inbash.htmlsuch a general layout file, you can use it by inserting such variables in a specific page template.{% set noBreadcrumb = true %}thenbash.htmlin{% if not noBreadcrumb %}To determine whether to display the breadcrumb navigation.