In website navigation, Breadcrumb navigation is a very practical auxiliary tool.It clearly shows the user's current position on the website, provides a convenient return path, thereby significantly improving the user experience, and also has a positive effect on search engine optimization (SEO), helping search engines understand the structural hierarchy of the website.

AnQiCMS has fully considered this point, providing a simple and powerful way to display breadcrumb navigation on the page.With built-in template tags, even without complex programming knowledge, this feature can be easily implemented.

Breadcrumbs navigation label in AnQiCMS

AnQiCMS provides a dedicated template tagbreadcrumbTo handle the generation and display of breadcrumb navigation. This tag will automatically build a complete navigation path based on the URL structure of the current page.

UsebreadcrumbThe basic syntax of the tag is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 您的面包屑导航渲染代码 #}
{% endbreadcrumb %}

here,crumbsIs the variable name you define for the breadcrumb list, you can name it according to your own preference.indexandtitleAre two commonly used parameters for customizing the breadcrumb navigation:

  • indexThis parameter is used to set the display text of the "Home" in the breadcrumb navigation.By default, it will display as "Home Page". If you want to change it to "Website Homepage" or "Home", just setindex="网站主页"Pass in as is.
  • titleThis parameter controls the display method of the current page title in the breadcrumb navigation.
    • When set totrueBy default, the breadcrumbs will display the full title of the current page.
    • When set tofalseIf it is, the title of the current page will not be displayed.
    • You can also pass a custom string, such astitle="文章详情", and the part of the current page will be displayed as the text you specified.
  • siteIdThis is an advanced parameter for multi-site users, usually you do not need to set it.If you manage multiple sites in the background and need to call data for a specific site, you can specify the site ID through this parameter.

WhenbreadcrumbAfter the tag is executed, it will store the generated breadcrumb path to the one you definecrumbsthe variable.crumbsis an array containing multiple objects, each representing a navigation path segment, they have two key fields:

  • Name: indicates the display name of the segment.
  • LinkIndicates the URL address of the corresponding link.

How to display breadcrumb navigation on the page

It is usually recommended to place the breadcrumb navigation in the public template file of the website (for examplebase.htmlOr create a separate template snippet (such aspartial/breadcrumb.htmlThen proceedincludeTag it to the page where it needs to be displayed. The benefit of this is that once the breadcrumb display logic or style is modified, all pages that refer to it will be updated synchronously, greatly improving maintenance efficiency.

Here is an example of code that displays breadcrumb navigation in a template:

<nav class="breadcrumb-nav">
    {% breadcrumb breadcrumbs with index="首页" title=true %}
    <ol class="breadcrumb-list">
        {% for item in breadcrumbs %}
            <li class="breadcrumb-item">
                <a href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
        {% endfor %}
    </ol>
    {% endbreadcrumb %}
</nav>

In this code block:

  1. We usenavThe tag wraps the entire breadcrumb navigation and assignsbreadcrumb-navClass name, convenient for subsequent style control.
  2. {% breadcrumb breadcrumbs ... %}Defined the breadcrumb data source and assigned it tobreadcrumbsVariable.
  3. {% for item in breadcrumbs %}Loop throughbreadcrumbsEach navigation item in the array.
  4. Inside the loop,{{ item.Link }}Will output the current navigation item link,{{ item.Name }}Then output its display name. We place it in<li>Presented within the tag in list form.
  5. Finally, remember to use{% endbreadcrumb %}tag to end the breadcrumb tag block.

If you wish to make more personalized settings, you can adjust it like this.breadcrumbLabel's parameters:

  • Modify the home page text and disable the current page title:

    {% breadcrumb breadcrumbs with index="网站主页" title=false %}

    In this way, the first link of the breadcrumb will display as "Home Page" of the website, and the title of the current page itself will not appear at the end of the breadcrumb.

  • Customize the current page title display text:

    {% breadcrumb breadcrumbs with index="首页" title="当前页面信息" %}

    At this time, the last link of the breadcrumb will display as "Current Page Information", rather than the actual title of the page.

Summary

AnQiCMS'breadcrumbLabels make the website's breadcrumb navigation feature accessible.With just a few lines of simple template code, you can provide users with a clear navigation path and optimize the website's hierarchy structure.At the same time, with the help of CSS styles, you can easily integrate breadcrumb navigation into the overall design of the website, providing a beautiful and functional user experience.

Frequently Asked Questions (FAQ)

Q1: Does breadcrumb navigation automatically recognize the hierarchical structure of the website?A1: Yes, it is of AnQiCMS.breadcrumbThe label will intelligently parse and generate the corresponding hierarchical path based on the current page URL path and content (such as articles, categories, single pages, etc.) and the association with the system data.You do not need to manually specify each level.

Q2: How to modify the display style of breadcrumb navigation?A2: breadcrumbThe tag outputs a standard HTML list structure (usually<ol>or<ul>enclosed<li>element). Therefore, you can completely customize its style using CSS. Simply add an appropriate class name to the breadcrumb container or list item, as shown in the example.breadcrumb-nav,breadcrumb-list,breadcrumb-item)，Then write the corresponding CSS rules.

Q3: Can I disable breadcrumbs navigation on specific pages or only show them on certain pages?A3: Of course you can. You can use conditional judgment in the template file of the page.breadcrumbRendering of tags. For example, do not place breadcrumbs in the page template where they are not needed.{% breadcrumb ... %}Code, or use{% if 当前页面不需要面包屑 %}{% else %}{% breadcrumb ... %}{% endif %}Such logic to selectively display.