How to display breadcrumb navigation in AnQiCMS template to optimize user experience?

Have you ever felt lost while browsing a website?On an information-rich website, users sometimes feel overwhelmed, not knowing their current location, and it is also difficult to quickly backtrack to the upper page.At this time, the breadcrumb navigation (Breadcrumb Navigation) is like a guiding light, providing users with clear path guidance and greatly optimizing their website experience.

Breadcrumb navigation is usually displayed in the form of "Home > Category > Subcategory > Current Page", it not only helps users clearly understand their position in the website structure, but also makes it convenient to click back to the upper-level page, thereby improving navigation efficiency and reducing user confusion and exit rate.From the perspective of search engine optimization, breadcrumb navigation also helps search engines better understand and crawl website content by providing a clear internal link structure.

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

Get to know AnQiCMS.breadcrumbTag

The AnQiCMS template system is based on Go language, adopting syntax similar to the Django template engine, simple and efficient.breadcrumbLabels are one of the core features, specifically used to generate breadcrumb navigation for websites.

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 the complete navigation path based on the current page URL and AnQiCMS backend settings.

Core parameter parsing: Flexibly control the displayed content.

breadcrumbThe tag provides several practical parameters that allow you to finely control the display content of the breadcrumb navigation:

• indexParameter: Customize the home page nameThis parameter allows you to customize the display text of the 'Home' in the breadcrumb navigation.By default, it will display as 'Home'. But if you want it to show as 'My Blog', 'Company Website', or any other name, just setindex="你的自定义名称"it is. For example,index="我的网站主页".

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

  • title=true(Default): The last element of the breadcrumb will display the full title of the current page.
  • title=falseThe last element of the breadcrumb will not display the title of the current page, usually only up to the parent category. This can avoid poor display due to overly long titles in some designs.
  • title="文章详情": 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 unified display.

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

Hands-on practice: Add breadcrumbs to your template

Generally, breadcrumb navigation is placed at the top of the page, below the main navigation, or above the article title. In the AnQiCMS template structure, we recommend storing the breadcrumb navigation code snippet intemplate/你的模板名/partial/For example, in an independent file under the directorybreadcrumb.html.

First, create a folder named under your template directorypartialfolder, and 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 label, which generates an array variable namedcrumbscontaining each level of information that constitutes the breadcrumb path.index="首页"ensuring that the navigation starting point is displayed as "Home",title=trueIt indicates 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, each element representing a level, havingName(display name) andLink(Link address) attribute.
• {% for item in crumbs %}We use aforto loop throughcrumbsArray, output each navigation level individually.
• {% if loop.last %}This is a built-in judgment in the template, 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 without adding hyperlinks.
• {{ item.Name }}and{{ item.Link }}: Used to output the display name and link address of the current level.

Donebreadcrumb.htmlAfter creating the file, you need to add it in your main layout file (for examplebase.html) or in any other template file where you want to display breadcrumbs, byincludeLabel it to introduce:

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

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

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

This will dynamically display a clear breadcrumb navigation on your website.

Advanced: Custom Styles and SEO Considerations

To make the breadcrumb navigation look more in line with your website design, you 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 created 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'sbreadcrumbLabel, you can easily add a feature-rich and SEO-friendly breadcrumb navigation to your website, providing a better browsing experience for users and laying a solid foundation for the long-term development of the website.

Frequently Asked Questions (FAQ)

1. How can the breadcrumb navigation style be made 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, and even use CSS pseudo-classes such as::beforeor::after）to add a custom separator icon or text, making it consistent with your website's overall style.

2. Why is my breadcrumb navigation not displaying the article title on the article detail page but only the category?

This is usually becausebreadcrumbin the labeltitlethe parameter is set tofalseOr a custom string. 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 callingbreadcrumbthe tag totitle=trueFor example:{% breadcrumb crumbs with index="首页" title=true %}.

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

Yes, you can do it bybreadcrumblabel'sindexjust changing the parameters. Just need toindexParameter is set to any text you want, for example:{% breadcrumb crumbs with index="我的网站主页" %}Thus, the starting point of the breadcrumb navigation will be displayed as the name you customize.