Have you ever felt lost while browsing a website?On an information-rich website, users may sometimes feel confused, not knowing their current location, and it is also difficult to quickly navigate back to the parent page.This Breadcrumb Navigation is like a guiding light, providing clear path guidance to users and greatly optimizing their website experience.

in AnQiCMS, displaying breadcrumb navigation is a very direct and flexible thing, because it has built-in powerfulbreadcrumbTags, allowing you to easily implement this feature without writing complex logic code.

Get to know AnQiCMS.breadcrumbtags

AnQiCMS's template system is based on Go language, adopting syntax similar to Django template engine, which is simple and efficient.breadcrumbLabels are one of the core features, specifically used for generating the breadcrumb navigation of a website.

When you need to render breadcrumb navigation in a website template, just call this tag at the appropriate position on the page.It will automatically build a complete navigation path based on the current page URL and the backend settings of AnQiCMS.

Core parameter parsing: Flexible control of displayed content

breadcrumbThe label provides several practical parameters, allowing you to finely control the display content of the breadcrumb navigation:

  • indexParameter: Customize the name of the home pageThis parameter allows you to customize the display text of "Home" in the breadcrumb navigation.By default, it will display as “Home Page”.index="你的自定义名称"and it is. For example,index="我的网站主页".

  • titleParameter: Controls the display of the current page title.This is a very practical parameter that determines whether the full title of the current page is displayed in the breadcrumb navigation of the detail page (such as article detail page, product detail page).

    • title=true（Default Value）：The last breadcrumb will display the full title of the current page.
    • title=falseThe last breadcrumb element will not display the title of the current page, usually only displaying up to the parent category. This can avoid poor display due to excessively long titles in some designs.
    • title="文章详情"English translation: You can also specify a custom string as the display text for the last element, instead of the actual page title, which is very helpful for a unified display format.

  • siteIdParameters: Data specification under multiple sitesFor users with multiple site management needs,siteIdThe parameter allows you to specify from which site to obtain breadcrumb data.But for most single-site operators, this parameter usually does not need to be set, the system will default to obtaining the data of the current site.

Hands-on Practice: Add breadcrumbs to your template

通常，bread crumb navigation is placed at the top of the page, below the main navigation, or above the article title. In the template structure of AnQiCMS, we recommend storing the bread crumb navigation code snippet intemplate/你的模板名/partial/The content of a separate file under the directory, for examplebreadcrumb.html.

Firstly, create a folder namedpartialand create a newbreadcrumb.htmlfile.

Then, add the following code tobreadcrumb.htmlfile:

{% breadcrumb crumbs with index="首页" title=true %}
    <nav class="breadcrumb-nav" aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if loop.last %} {# 如果是最后一个元素（当前页面），则不加链接 #}
                        <span>{{ item.Name }}</span>
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endbreadcrumb %}

In this code block:

  • {% breadcrumb crumbs with index="首页" title=true %}This is the core tag, it generates an array variable namedcrumbswhich contains each level of information that constitutes the breadcrumb path.index="首页"Ensures that the starting point of navigation is displayed as "Home".title=trueIt means that the title of the current page will be included in the detail page.
  • crumbsVariable: This is an array containing information about each navigation level, where each element represents a level, havingName(Display Name) andLink（Link address）attribute.
  • {% for item in crumbs %}：We use oneforin a loop to iterate overcrumbsarray, output each navigation level individually.
  • {% if loop.last %}This is a built-in template judgment used to check if the current loop element is the last one in the array.In the breadcrumb navigation, the last element is usually the current page, which does not need to be clicked to jump, so we usually only display text and do not add hyperlinks.
  • {{ item.Name }}and{{ item.Link }}：Used to output the display name and link address of the current level.

Completedbreadcrumb.htmlThe creation of the file, you need to in your main layout file (such asbase.html) or other template files you want to display breadcrumbs, byincludetags to include them:

{# 在base.html或其他布局文件中 #}
<body>
    {# 其他页面内容，如头部导航等 #}

    {% include "partial/breadcrumb.html" %}

    {# 页面主体内容 #}
</body>

So, your website page will dynamically display clear breadcrumb navigation.

Advanced: Custom Styles and SEO Considerations

To make the breadcrumb navigation look more consistent with your website design, you also need to add some CSS styles. You can target.breadcrumb-nav/.breadcrumb/.breadcrumb-itemDefine styles for class names, such as adjusting font size, color, spacing, or adding separators (such as using CSS pseudo-classes)::after).

Breadcrumbs navigation can not only help users, but also has a positive effect on Search Engine Optimization (SEO).It creates a clear internal link structure, which helps search engine spiders better understand the hierarchy of the website, thereby potentially improving the ranking of the website in search results.At the same time, the improvement of user experience, such as reducing the bounce rate and increasing the page stay time, is also an important indicator for search engines to evaluate the quality of a website.

Through AnQiCMS'sbreadcrumbTags, you can easily add a functional and SEO-friendly breadcrumb navigation to the website, providing a better browsing experience for users and laying a solid foundation for the long-term development of the website.

Common Questions (FAQ)

1. The style of the breadcrumb navigation looks very basic, how can I make it more beautiful?

The breadcrumb navigation style is completely controlled by the CSS of your website. After adding the breadcrumb code to the template, you need to edit your CSS file (usually located/public/static/你的模板名/css/in the directory), for.breadcrumb-nav/.breadcrumb/.breadcrumb-itemAdd styles to HTML elements. You can adjust the font, color, background, spacing, even using CSS pseudo-classes (such as::beforeor::afterAdd a custom separator icon or text to keep it consistent with your website's overall style.

2. Why doesn't my breadcrumb navigation display the article title on the article detail page but only the category?

This is usually becausebreadcrumbthe tag intitleThe parameter has been set tofalseAn English translation of auto is English. If you want the last element of the breadcrumb navigation (i.e., the current page) to display the full article title, make sure to set it when callingbreadcrumbwhen labelingtitle=true, for example:{% breadcrumb crumbs with index="首页" title=true %}.

3. Can I customize the display name of 'Home' in the breadcrumb navigation?

Yes, you canbreadcrumbTagsindexparameter to easily achieve it. Just set theindexParameter settings can be any text you want, for example:{% breadcrumb crumbs with index="我的网站主页" %}Thus, the starting point of the breadcrumb navigation will be displayed as the custom name you set.