How to display breadcrumb navigation on the page to enhance users' understanding of the content structure?

When we browse websites, we often see a line of text at the top of the page or above the content area, clearly indicating the position of the current page in the overall website structure, like "Home > Product Center > Some Product Category > Some Product Details" like this.This is what we commonly refer to as 'Breadcrumb Navigation'.It not only helps users quickly understand the content hierarchy of the website and avoid getting lost, but also plays an important role in user experience and search engine optimization (SEO).

AnQi CMS understands the importance of breadcrumb navigation and therefore built a simple and efficient implementation method from the beginning of the system design, allowing website operators to easily display this navigation element on the page, thereby enhancing users' understanding of the website content structure.

How to implement breadcrumb navigation in AnQi CMS?

The AnQi CMS is built-in with a very convenient breadcrumb navigation tag, which can intelligently generate the corresponding navigation path according to the type of the current page (whether it is the homepage, category page, article detail page, single page, or tag page).This means you don't have to write complex logic code to determine the current page and manually build the path, the system will automatically handle these, greatly simplifying development and maintenance work.

This core tag is{% breadcrumb %}It will automatically collect all parent paths of the current page up to the homepage and organize them into a list for use in the template.

Add breadcrumb navigation to your template.

To display breadcrumb navigation on your website, we usually place it in a common code snippet, such as in the template file directory under yourpartial/folderbreadcrumb.htmlFile, then include it in your main template file (such asbase.htmlor at the top of each page).

First, you can write the code like this inpartial/breadcrumb.htmlthe file:

{# partial/breadcrumb.html 文件内容示例 #}
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Next, you just need to add a line of code in your main website template file (for examplebase.html) at the position where you want to display the breadcrumb navigation.

{# 在您的 base.html 或其他需要显示面包屑的模板文件中 #}
{% include "partial/breadcrumb.html" %}

This will automatically identify and generate breadcrumb navigation that matches the current page path regardless of which page the user visits.

Display of personalized breadcrumb navigation.

The breadcrumb navigation tags of Anqi CMS also provide several parameters, allowing you to have more detailed control and customization according to your actual needs.

1. Customize the "Home" text:By default, the first element of the breadcrumb navigation is "Home". If you want to display other text, such as "My Blog" or your brand name, you can useindexSet the parameter:

   {% breadcrumb crumbs with index="我的博客" %}
       {# ... 您的循环代码 ... #}
   {% endbreadcrumb %}
   

2. Control the display of the current page title:The last item of the breadcrumb navigation is usually the title of the current page. You cantitlecontrol its display in the parameters:

   • title=true(Default): Show the full title of the current page.
   • title=false: Do not show the title of the current page, the breadcrumb navigation will end at the second-to-last level.
   • title="自定义文本": Replace the current page title with custom text.

   {# 显示文章标题 #}
   {% breadcrumb crumbs with title=true %} ... {% endbreadcrumb %}
   
   {# 不显示文章标题 #}
   {% breadcrumb crumbs with title=false %} ... {% endbreadcrumb %}
   
   {# 显示自定义文本作为当前页面的名称 #}
   {% breadcrumb crumbs with title="文章详情页" %} ... {% endbreadcrumb %}
   

3. Data call under multi-site environment (Advanced):If you have configured multiple sites in the Anqi CMS backend and want to call data from other sites in the breadcrumb navigation of a site (which is usually a special requirement), you can usesiteIdThe parameter specifies the site ID. Generally, this parameter does not need to be set, as the system will automatically identify the current site.

Further optimization and usage suggestions

• Maintain consistency:Strongly recommend to use breadcrumb navigation.includePlace the statement globally on the websitebase.htmlIn the template, this ensures consistent navigation experience on all pages
• Visual style:Although AnQi CMS provides functionality, the final visual effect of the breadcrumb navigation depends on your CSS style. You can design it according to the overall style of the website.breadcrumb-nav/breadcrumbandbreadcrumb-itemAdd custom styles to the class to make it better integrate into the page.
• SEO friendly:Breadcrumbs navigation helps search engines better understand your website structure, especially in sites with deep levels.It provides clear internal links, having a positive impact on SEO.Ensure that the link is clickable and uses the correct semantic tags (such as<nav>and<ol>)

By reasonably using the breadcrumb navigation function of AnQi CMS, you can not only provide users with clearer website path guidance and effectively improve the browsing experience, but also lay a solid foundation for the website's search engine optimization.

Frequently Asked Questions (FAQ)

1. Q: Why does my breadcrumb navigation only show the category and not the article title on the article detail page?A: This may be because you are in{% breadcrumb %}put in the tag.titlethe parameter tofalse. Please check your template code to ensuretitlethe parameter is set totrueOr it can be assigned the custom text you want to display, for example{% breadcrumb crumbs with title=true %}.

2. Q: How should I set the breadcrumb navigation's "Home" link to display as "Website Homepage"?A: You can modify the display text of the homepage by using the parameter. For example, you can set it like this:{% breadcrumb %}the tag withindexParameter to modify the display text of "Homepage". For example, you can set it as follows:{% breadcrumb crumbs with index="网站主页" %}.

3. Q: The breadcrumb navigation style does not look very aesthetic, does AnQi CMS provide default styles?A: The template tags of Anqi CMS are mainly responsible for outputting structured data and HTML skeletons, and do not necessarily provide visual styles.The final style of the breadcrumb navigation needs to be beautified by you through custom CSS.You can target in your template CSS file,breadcrumb-nav/breadcrumb/breadcrumb-itemWait for HTML elements and class names to write style code to match the visual design of your website.