In website operation, a clear navigation path is crucial for user experience and Search Engine Optimization (SEO).A breadcrumb navigation is a kind of auxiliary tool that can significantly improve the usability of a website, allowing users to intuitively understand the position of the current page and providing 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 usbreadcrumbIt allows us to easily display the complete path from the homepage to the current page on any page of the website.This tag automatically identifies 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 tags to display page paths lies in understanding their 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 to receivebreadcrumbAll path information generated by the tag, it is an array object. Inside the tag, we can traverse thiscrumbsarray to display the path.

breadcrumbThe tag provides several practical parameters that allow for fine-grained settings according to needs:

  • indexparameters:This parameter allows you to customize the display text of the 'Home' in the breadcrumb navigation.By default, it will display as 'Home'. If you want to display it as 'Your Location' or any other more personalized name, just set it toindex="您的位置"Just do it.
  • titleparameters:Used to control the display method of the current page in the breadcrumb navigation (i.e., the last item in the path).
    • When set totitle=trueWhen (the default value) is used, it will display the full title of the current page.
    • When set totitle=falseIf it is, the title of the current page will not be displayed. This may be very useful in some design scenarios.
    • If you want to display a specific custom text on the current page instead of its original title, you can directly settitleto the text you want, for exampletitle="文章详情".
  • siteIdparameters:This parameter is mainly used in environments for multi-site management. If you only operate one website, you usually do not need to fill in this parameter.Under a multi-site scenario, it can be used to specify which site's breadcrumb data to retrieve.

crumbsEach element in the array (usually referred to asitem) contains two key fields that are used to build the complete navigation path:

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

Practical: Display breadcrumb navigation on the page.

Now, let's look at an actual code example to see how to implement breadcrumb navigation in your AnQiCMS template.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 frameworks, which helps improve accessibility and facilitate the application of styles.
  2. {% breadcrumb pathItems with index="您的位置" title=true %}:This is the beginning part of the AnQiCMS breadcrumb tag. We will store the generated path data in a namedpathItemsIn the variable. Here we customized the home page display as "Your location", and ensured that the current page title will be displayed.
  3. {% for item in pathItems %}:We passforLoop throughpathItemsEach item in the array of paths.
  4. <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">:Create a list item for each path item.forloop.LastIs the loop variable provided by the AnQiCMS template engine, used to determine whether the current loop is the last item. If it is the last item, we will usually addactiveA class to highlight the current page through 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.LastFor true, we usually only display its name ({{ item.Name }}), without making it a clickable link because it is the current page.
    • For other path items (forloop.LastIf it is false, we then wrap it in<a>tag, usingitem.LinkAs a link address,item.NameAs link text, make sure the user can click to return to the upper page.
  6. {% endfor %}and{% endbreadcrumb %}:They areforloop andbreadcrumbThe end tag of the tag.

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

The value of breadcrumb navigation is emphasized again

In an AnQiCMS content management system that focuses on 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 backtrack to the previous level or any level page, reducing a sense of disorientation.
  • Optimize the website structure:Breadcrumb navigation displays the page relationship in a hierarchical structure, which helps users and search engines understand the overall layout of the website.
  • Improve SEO performance:Search engines (such as Baidu, Google) like websites with clear structure very much.Breadcrumbs navigation provides a series of internal links, strengthens the correlation between pages, and helps pass the page weight.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 providesbreadcrumbTags are 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 website.

Frequently Asked Questions (FAQ)

  1. Ask: Why did I addbreadcrumbthe tag, but the breadcrumb navigation did not appear on the page?Answer: If the breadcrumb navigation does not display normally, please first check if the tags are spelled correctly, and make sure that your template file includes the code for traversingcrumbsthe array.forLoop. Next, please confirm that 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 show one item, "Home".

  2. Ask: Does AnQiCMS's breadcrumb navigation automatically include the title of the current page?Yes, by default, when you do not settitlethe parameter or set it totitle=trueWhen, AnQiCMS'sbreadcrumbThe 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=false; If you want to display a custom text, such as "Learn more", you can settitle="了解详情".

  3. What benefits does breadcrumb navigation have for the SEO of a website?Answer: The benefits of breadcrumb navigation for SEO are mainly reflected in several aspects: it provides clear website hierarchy information for search engines, helping spiders better understand and crawl your website content; through the form of internal links, breadcrumb navigation can effectively pass page authority and improve 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.