In website operation, clear navigation paths are crucial for user experience and search engine optimization (SEO).Breadcrumb navigation is a kind of auxiliary tool that can significantly improve the usability of a website. It can intuitively tell the user their current page location and provide a convenient way to quickly return to the parent page.In AnQiCMS, implementing breadcrumb navigation is very simple and flexible.

AnQiCMS provides a dedicated breadcrumb navigation tag for usbreadcrumbThrough it, we can easily display the complete path from the homepage to the current page on any page of the website.This label automatically recognizes the hierarchical structure of the current page and generates the corresponding path data, greatly reducing the manual maintenance work of navigation.

Learn more about the breadcrumb navigation tag of AnQiCMS

UsebreadcrumbThe core of using this tag to display the page path lies in understanding its basic structure and supported parameters. The usage form of this tag is usually:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里循环输出面包屑路径 #}
{% endbreadcrumb %}

Here,crumbsis a variable name we define, used to receivebreadcrumbAll path information generated by the label, it is an array object. Within the label, we can traverse thiscrumbsarray to display the paths.

breadcrumbThe label also provides several practical parameters, allowing us to make refined settings according to our needs:

  • indexParameters:This parameter allows you to customize the display text of 'Home' in the breadcrumb navigation.It will display as “Home” by default.index="您的位置".
  • titleParameters:Used to control the display method of the current page (the last item in the path) in the breadcrumb navigation.
    • When set totitle=trueWhen the (default value) is used, the full title of the current page will be displayed.
    • When set totitle=falseWhen, the title of the current page will not be displayed. This may be very useful in some design scenarios.
    • If you want the current page to display a specific custom text instead of its original title, you can directly settitleto the text you want, for exampletitle="文章详情".
  • siteIdParameters:This parameter is mainly applied to multi-site management environments.If you only operate one website, you usually do not need to fill in this parameter.In a multi-site scenario, it can be used to specify which site's breadcrumb data to retrieve.

crumbsEach element in the array (usually we refer to it in loops)itemcontains two key fields to build a complete navigation path:

  • Name:Represents the display name of the path segment, such as 'Product Center', 'News Dynamics', or a specific article title.
  • Link:Represents the URL address of the corresponding path segment, which the user can click to jump to the corresponding page.

Practice: Display breadcrumb navigation on the page

Now, let's look at how to implement breadcrumb navigation in your AnQiCMS template through a practical code example.We usually place it at the top of the page, below the title, so that users can see it at a glance.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb pathItems with index="您的位置" title=true %}
        {% for item in pathItems %}
            <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
                {% if forloop.Last %}
                    {# 路径的最后一项（当前页面）通常不作为链接，或只显示文本 #}
                    {{ item.Name }}
                {% else %}
                    {# 其他层级作为可点击的链接 #}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Code analysis:

  1. <nav aria-label="breadcrumb">...</nav>and<ol class="breadcrumb">...</ol>:This is a semantic structure commonly used when working with HTML5 and Bootstrap framework, which helps improve accessibility and makes it convenient to apply styles.
  2. {% breadcrumb pathItems with index="您的位置" title=true %}:This is the beginning part of the breadcrumb label in AnQiCMS. We store the generated path data in a name calledpathItemsThe variable is located here. We customized the home page display to 'Your location', and ensured that the current page title would be displayed.
  3. {% for item in pathItems %}:We go throughforto iteratepathItemsEach path item in the array.
  4. <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">:Create a list item for each path item.forloop.Lastis a loop variable provided by the AnQiCMS template engine, used to determine if the current loop is the last item. If it is the last item, we usually addactiveClass, so that it can be highlighted on the current page with CSS.
  5. {% if forloop.Last %} {{ item.Name }} {% else %} <a href="{{ item.Link }}">{{ item.Name }}</a> {% endif %}:This is a very critical conditional judgment.
    • For the last item in the path (forloop.Last[for true), we usually only show its name ({{ item.Name }})[, without setting it as a clickable link because it is the current page.
    • for other path items (forloop.Last[If the value is false), we then wrap it in<a>tags, usingitem.Linkas the link address,item.Nameas the link text, to ensure that the user can click to return to the upper page.
  6. {% endfor %}and{% endbreadcrumb %}:which areforloop andbreadcrumbThe end mark of a tag.

By the above code, your AnQiCMS website can have a dynamically generated, well-structured breadcrumb navigation, such as:您的位置 > 新闻动态 > 行业新闻 > AnQiCMS 发布 v2.1.1 版本

The value of breadcrumb navigation needs to be emphasized again

In AnQiCMS, a content management system that emphasizes efficiency and SEO optimization, fully utilizing the breadcrumb navigation tags can bring multiple benefits to your website:

  • Enhance user experience:Users can clearly know their position on the website and can quickly return to the previous level or any level of page, reducing a sense of disorientation.
  • Optimize the website structure:Breadcrumb navigation displays page relationships in a hierarchical structure, which helps users and search engines understand the overall layout of the website.
  • Enhance SEO performance:Search engines (such as Baidu, Google) like websites with clear structure very much.Breadcrumb navigation provides a series of internal links, enhancing the correlation between pages, which is helpful for transmitting page authority.In addition, structured breadcrumb information is sometimes displayed as rich text snippets in search results, increasing the click-through rate of the website.

In summary, AnQiCMS providesbreadcrumbA tag is a powerful and flexible tool that can help you easily build excellent breadcrumb navigation on your website, thereby enhancing user experience and the overall performance of the site.

Common Questions (FAQ)

  1. Why did I add something, but the breadcrumb navigation didn't appear on the page?breadcrumbWhat is the reason for adding tags, but the page does not display the breadcrumb navigation?Answer: If the breadcrumb navigation does not display correctly, please first check if the tags are spelled correctly, and ensure that your template file includes the loop forcrumbsarraysforLoop.Secondly, please confirm whether the page you are currently visiting is at a level that can generate breadcrumbs (such as article detail pages, product category list pages, etc.).For a pure website homepage, there is usually no upper path, so the breadcrumb may only display 'Home' as an item.

  2. Ask: Does AnQiCMS's breadcrumb navigation automatically include the title of the current page?Answer: Yes, by default, when you do not settitlethe parameter or set it totitle=truewhen, the title of AnQiCMS isbreadcrumbthe tag will automatically display the title of the current page as the last item in the breadcrumb path. If you do not want to display the title of the current page, you can settitle=falseIf you want to display a custom text, such as “Learn more”, you can settitle="了解详情".

  3. Question: What are the benefits of breadcrumb navigation for website SEO?Answer: The benefits of breadcrumb navigation for SEO are mainly reflected in several aspects: it provides clear hierarchical structure information for search engines, helping spiders better understand and crawl your website content; in the form of internal links, breadcrumb navigation can effectively pass page authority, improving the ranking of relevant pages within the website; in addition, well-structured breadcrumb navigation has the opportunity to be displayed as rich text snippets in search engine results pages (SERP), which can significantly improve the visibility and click-through rate of your search results.