How to build and display the navigation path of the current page in the website using the `breadcrumb` tag?

In website construction and operation, user experience (UX) is always at the core.When visitors delve into your website, a clear navigation path can effectively prevent them from getting lost and quickly understand their current position.This is the value of 'Breadcrumb Navigation'.It not only improves the user experience, but is also an important part of Search Engine Optimization (SEO), helping search engines understand the hierarchical structure of your website.

The AnQi CMS is well aware of this and therefore provides convenient and easy-to-usebreadcrumbtags, allowing you to easily build and display the navigation path of the current page of the user on the website

core functions and basic usage

breadcrumbThe tag automatically identifies the current page of the user and generates a series of clickable links based on the website's hierarchy (for example: Home > Category > Article).You do not need to manually write the navigation path for each page, Anqi CMS will intelligently complete this task.

UsebreadcrumbThe basic syntax of the tag is very intuitive:

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

In this code block:

• {% breadcrumb crumbs %}: This is the start of the tag,crumbsIt is the variable name you specify for the breadcrumb navigation list.
• {% for item in crumbs %}:crumbsA variable is a container that holds multiple navigation items(item) of an array. You can useforLoop through these navigation items.
• {{item.Link}}: EachitemhasLinkProperty, which contains the URL address of the navigation item.
• {{item.Name}}: EachitemAlso has aNameThe property includes the text displayed for navigation items.
• {% endfor %}and{% endbreadcrumb %}: means loop andbreadcrumbEnd of tag.

In this way, Anqie CMS will output a standard HTML list structure, where each list item is a link pointing to the parent page on the user's current path.

Customize your breadcrumb navigation

breadcrumbTags also provide some parameters for you to customize flexibly according to your actual needs.

1. Customize the homepage link text (indexparameters)By default, the first link of the breadcrumb navigation (i.e., the homepage) will be displayed as "Home". If you want to change this text, you can useindexparameters:

   {% breadcrumb crumbs with index="我的主页" %}
   {# ... 循环显示部分 ... #}
   {% endbreadcrumb %}
   

   This will display the starting point of the navigation path as "My Home Page" instead of "Home Page".

2. Control the display of the current page title (titleparameters)On the detail page of the document or on the end page of a single page, the breadcrumb navigation usually displays the title of the current page.titleThe parameter provides three control methods:

   • title=true(Default): Display the full title of the current page.
   • title=falseDo not display the title of the current page. This may help simplify the visual effects in some designs.
   • title="自定义文本": You can replace the title of the current page with custom text. For example, on a product details page, you may want to display "Product Details" instead of the specific product name.

   {# 示例：不显示当前页面标题 #}
   {% breadcrumb crumbs with title=false %}
   {# ... 循环显示部分 ... #}
   {% endbreadcrumb %}
   
   {# 示例：将当前页面标题显示为“文章详情” #}
   {% breadcrumb crumbs with title="文章详情" %}
   {# ... 循环显示部分 ... #}
   {% endbreadcrumb %}
   

3. Multi-site scenario (siteIdparameters)If you are using the AnQi CMS multi-site management feature and want to reference or display data from other sites in the breadcrumb navigation, you can usesiteIdParameters to specify the site ID. This is usually used for more complex cross-site content integration requirements.

Advanced examples and style suggestions

Combine these parameters to create breadcrumbs that better match the style of your website.In addition, don't forget to add styles for your breadcrumb navigation with CSS to make it more beautiful and readable on the page.

For example, one with a separator (such as>And customize the breadcrumb navigation of the homepage link:

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="网站首页" title=true %}
        <ol class="breadcrumb-list">
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    <a href="{{item.Link}}">{{item.Name}}</a>
                    {% if not forloop.Last %} {# 判断是否是最后一个链接，不是则添加分隔符 #}
                        <span class="separator"> &gt; </span>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    {% endbreadcrumb %}
</nav>

{# 简单的 CSS 样式示例，您可以根据需要进行扩展 #}
<style>
    .breadcrumb-nav {
        font-size: 0.9em;
        padding: 10px 0;
        color: #666;
    }
    .breadcrumb-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex; /* 让列表项横向排列 */
        align-items: center;
    }
    .breadcrumb-item a {
        text-decoration: none;
        color: #337ab7;
    }
    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
    .breadcrumb-item .separator {
        margin: 0 5px;
        color: #999;
    }
</style>

In this example, we utilize:forloop.LastTo determine whether it is the last element in the loop, thus adding a separator only after non-last links, avoiding extra>symbols.

Summary

breadcrumbThe tag is a powerful and practical feature in AnQi CMS, which helps you build clear and intuitive navigation paths on your website through automation and customization.Make good use of this tag, it can not only significantly improve the user's browsing experience, but also lay a solid foundation for better performance of your website in search engines.Mastering its usage will make your website operations more efficient and convenient.

Frequently Asked Questions (FAQ)

How to modify the display text of the 'Home' link in the breadcrumb navigation?You can use it toindexParameters to modify the display text of the 'Home' page. For example, if you want it to display as 'Website Homepage', you can use it in this way:{% breadcrumb crumbs with index="网站主页" %}...{% endbreadcrumb %}.

2. How can I make the breadcrumb navigation not display the specific title of the current page on the article or product detail page, or display a general title?You can usetitleParameters are controlled.

• To completely hide the current page title, settitle=false:{% breadcrumb crumbs with title=false %}...{% endbreadcrumb %}.
• To display a general title, such as “News Details”, settitle="新闻详情":{% breadcrumb crumbs with title="新闻详情" %}...{% endbreadcrumb %}.

3. My breadcrumb navigation has been implemented, but it looks quite ordinary without any visual separators or styles. How can I beautify it? breadcrumbThe tag mainly outputs an HTML structure (usually<ul><li><a>)，it does not contain any style. You need to add style to these HTML elements through CSS. For example, you can add a separator between each navigation item<span> &gt; </span>As a separator, and set the color, font size, spacing, and other properties of the links and separators through CSS, just like the style examples provided in the article.