In website operation, a clear navigation path is crucial for user experience and Search Engine Optimization (SEO).Breadcrumb Navigation as a type of auxiliary navigation can intuitively tell users the position of the current page in the website structure, effectively reduce the bounce rate, and help search engines better understand the website hierarchy.

AnqiCMS as a flexible content management system, provides a very convenient way to implement breadcrumb navigation in templates and can finely control the display of home page names and document titles as needed.

Implement breadcrumb navigation in AnqiCMS template

The core of implementing breadcrumb navigation in AnqiCMS is to use built-inbreadcrumbThe tag is very smart, it automatically generates the corresponding navigation path according to the type of the current page (home page, category page, document detail page, single page, etc.) and the level.

Generally, we would place the breadcrumb navigation code in the public part of the website, such aspartial/header.htmlorpartial/breadcrumb.htmlin such code snippet files, and then through{% include "partial/breadcrumb.html" %}introduce it to the pages that need to be displayed.

The basic usage of breadcrumb tags is as follows:

{% breadcrumb crumbs %}
    <ul class="breadcrumb-nav">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code block:

  • {% breadcrumb crumbs %}Declared acrumbsvariable, which is an array object containing each item in the breadcrumb navigation.
  • {% for item in crumbs %}Loop through thiscrumbsarray.
  • item.NameRepresents the name of the navigation item (for example, "Home", "Company News", "Article Title").
  • item.LinkRepresents the link address of the navigation item.
  • forloop.Lastis a special loop variable used to determine the current iteration ofitemIs it the last item in the array. For breadcrumb navigation, the last item is usually the current page, which should not have a link, so we use<span>tag wrapping.

Control the display of the home page name

AnqiCMS ofbreadcrumbTags allow us to customize the display name of the home page in the breadcrumb navigation.By default, the home page will display as "home page".indexSet the parameters.

Just inbreadcrumbthe tag withindexThe parameter, and set its value to the homepage name you want.

{% breadcrumb crumbs with index="我的站点主页" %}
    <ul class="breadcrumb-nav">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

This will make the starting item of your breadcrumb navigation display as "My site homepage", instead of the default "Home".

Control the display of the document title.

On the document detail page, the last item of the breadcrumb navigation is usually the title of the current document. AnqiCMS providestitleparameters, allowing you to flexibly control the display of this section.

titleThere are several ways to use the parameter:

  • title=true(Default behavior):This will display the full document title as the last item in the breadcrumb. If you do not settitlethe parameter, this is the default effect.
  • title=false:If you want to hide the current document title in the breadcrumb navigation on the document detail page and keep it at the level of the parent category, you cantitlethe parameter tofalseThis may help simplify navigation in some designs
  • title="自定义标题":If you want to display a fixed text for the last item of the breadcrumb navigation on the document detail page, such as "Article Details", "Product Details", etc., instead of the specific document title, you can settitleThe parameter is set to a string.

Below is a combinationtitleExample of parameter usage:

{# 显示完整文档标题 (默认效果) #}
{% breadcrumb crumbs with title=true %}
    <ul class="breadcrumb-nav">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

{# 不显示文档标题 #}
{% breadcrumb crumbs with title=false %}
    <ul class="breadcrumb-nav">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

{# 显示自定义文本作为文档标题 #}
{% breadcrumb crumbs with title="当前产品详情" %}
    <ul class="breadcrumb-nav">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

By reasonable applicationindexandtitleYou can flexibly control the display of breadcrumbs to make it more consistent with your website design and user needs.

Summary

AnqiCMS ofbreadcrumbThe tag provides a simple and powerful breadcrumb navigation implementation solution for website administrators and developers.No matter whether you need to customize the homepage name or want to finely control the display of document titles, AnqiCMS makes it easy for you to achieve this through intuitive template tag parameters.This not only improves the user experience of the website, but also provides convenience for search engines to crawl and understand the website structure, which is greatly beneficial to the overall SEO performance of the website.

Frequently Asked Questions (FAQ)

  1. Ask: How to add a custom separator between each item in the breadcrumb navigation, for example>or/?Answer: AnqiCMS'sbreadcrumbThe tag itself does not provide a parameter to directly set the separator, but you can do so in the template's HTML structure through CSS or directly in<li>Add text between elements to achieve this. For example, you can<li>insert directly between>symbols, or use CSS's::afterpseudo-elements to add stylized separators.

  2. Ask: What is the use of breadcrumb navigation?siteIdWhat parameters are used? Do I need to set them on my single-site website?Answer:siteIdThe parameter is mainly used for the multi-site management feature of AnqiCMS. If you have created multiple independent sites in the background and want to call data from other sites in a template of a certain site, you need to go throughsiteIdSpecify. For most single-site websites, this parameter is usually not required to be manually set, as the system will automatically identify the context of the current site.

  3. Ask: Why does the breadcrumb navigation display the document's default title instead of the 'SEO title' I set in the backend? Can it be changed?Answer: The breadcrumb tags of AnqiCMS are displayed by default as the general title of the page (or category name, single page name), which is to provide the most intuitive and user-friendly navigation path.The purpose of breadcrumbs is to inform the user “where are you now”, usually using display names that users can recognize directly.If you really need to display the SEO title, this usually involves advanced template customization, may require manually obtaining the current page's SEO title, and assigning it to the last item of the breadcrumb, but this is not the default and recommended behavior as it may affect the intuitiveness of the user experience.