In website operation, clear navigation is a key factor in improving user experience and helping search engines understand the website structure.Breadcrumb Navigation is a kind of intuitive auxiliary tool that can clearly show the hierarchical path of the current page, allowing visitors to always know where they are and where they can go.For users who use AnQiCMS to build and manage websites, implementing such navigation is simple and efficient, thanks to its built-inbreadcrumb.

Skillfully usebreadcrumbTag, build a clear navigation path

Of Security CMSbreadcrumbThe tag is used specifically for dynamically generating the breadcrumb navigation path of a website.It requires no complex configuration and can automatically derive the complete access path according to the current page classification, model, or single-page structure.This is crucial for any content-rich website, whether it is an article detail page, a product list page, or a multi-level category page, users can easily backtrack to the upper-level page through breadcrumb navigation, which greatly reduces the possibility of getting lost.

This tag is very direct, you just need to insert a code snippet like this at the location where you need to display the breadcrumb navigation template:

{% breadcrumb crumbs with index="首页" title=true %}
    <ul class="breadcrumb">
        {% for item in crumbs %}
            <li{% if loop.last %} class="active"{% endif %}>
                {% if loop.last %}
                    {{ item.Name }}
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
            {% if not loop.last %}
                <li class="separator">/</li>
            {% endif %}
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code block,breadcrumbThe tag will automatically collect and process the path information of the current page, and then pass it as an array object namedcrumbsto the template. You can access it usingforLoop through thiscrumbsArray, take each node one by one from the path (item) Each node containsName(link name) andLink(Link address) two key fields, convenient for building clickable navigation links.

Flexible customization to meet different display needs

breadcrumbThe tags provide several practical parameters, allowing you to adjust according to the specific design and content operation strategy of the website:

  1. indexParameters: define the navigation starting pointBy default, the first element of the breadcrumb navigation is usually "Home". If you want to display this starting point as other text, such as "Website Home" or your brand name, you can do so byindexSet the parameters. For example,index="我的博客"It can make the navigation path start from “My Blog”.

  2. titleParameter: Controls the display of the current page titleIn many cases, the last element of the breadcrumb navigation is the title of the current page.titleThe parameter allows you to finely control the display of this section:

    • When set totitle=trueWhen this is the default value, it will display the full title of the current page.
    • If set totitle=false, Breadcrumbs will not display the title of the current page, but use the last element of the parent category instead.
    • You can also specifytitlea custom string for the parameter, for exampletitle="文章详情". No matter what the actual title of the current page is, the last element of the breadcrumb will display the custom text you set.

  3. siteIdParameter: Data call under multiple sites.AnQi CMS supports multi-site management,siteIdThe parameter is mainly used in a multi-site environment, if you need to specify the target site when calling the breadcrumb data from other sites.But in most single-site or general usage scenarios, this parameter usually does not need to be manually set.

By combining these parameters, you can easily create breadcrumb navigation that is both user-friendly and aesthetically pleasing. For example, if you want the breadcrumbs to start with "My Blog" and not display the current article title, but end with "Read Article", you can set it up like this:

{% breadcrumb crumbs with index="我的博客" title="阅读文章" %}
    <ol class="breadcrumb">
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if loop.last %}
                    {{ item.Name }}
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
{% endbreadcrumb %}

We used hereloop.lastTo determine whether it is the last element, in order to decide whether to display plain text or linked text, which is very commonly used to beautify breadcrumbs.

Why is breadcrumb navigation so important?

  • Enhance user experience (UX): Users can quickly understand the website hierarchy through breadcrumb navigation and easily return to any parent category, reducing unnecessary clicks and page jumps, significantly improving the usability of the website.
  • Optimize Search Engine Optimization (SEO)The search engine likes websites with clear and layered structures.Breadcrumb navigation provides internal link structure, which helps search engines better crawl and index website content, and can also improve the display effect of website search results (may be displayed as rich media summary).
  • Reduce Bounce RateWhen users get lost, they usually choose to leave the website.A clear breadcrumb navigation can provide immediate direction, making users more willing to explore other content on the website, thereby reducing the bounce rate.

Of Security CMSbreadcrumbThe tag, with its concise syntax and powerful flexibility, allows website administrators and content operators to easily integrate this important navigation element into the website, thereby laying a solid foundation for the success of the website.

Frequently Asked Questions (FAQ)

1. Why did I add in the template?breadcrumbthe tag, but the breadcrumb navigation did not appear on the page?

There may be several reasons:

  • The template position is incorrect:Ensure that you havebreadcrumbThe tag is placed in a visible area of the template, such as the header, above the content area, etc.
  • Content structure issue:Breadcrumbs navigation is automatically generated based on the content structure of the page (such as categories, models, single pages).If your article is not associated with a category or the single page does not have a clear hierarchy, the breadcrumbs may not generate the correct path.Please check the settings of your content on the Anqi CMS backend.
  • CSS hiding:Although the possibility is small, it could also be that the page CSS style has accidentally hidden the breadcrumb navigation element.You can try to check the browser developer tools to see if the related HTML elements exist.

2. How to add styles to the breadcrumb navigation to make it look more beautiful?

breadcrumbThe tag itself is responsible for outputting the original navigation data (link name and link address), and the specific style needs to be implemented through CSS. In the above example code, we used<ul>and<li>Labels to wrap navigation elements and addbreadcrumbandbreadcrumb-itemClass names. You can write style rules for these class names in the CSS file of the website, such as setting font size, color, spacing, background color, and separator between list items, etc., to match the overall design style of your website.

3.breadcrumbLabels whether they support all types of pages, such as articles, products, and single-page?

Yes, the Anqi CMS'sbreadcrumbThe label was designed with multiple content types in mind. It can intelligently identify the type of the current page (whether it is an article, product, or a standalone single page) and automatically build the correct breadcrumb navigation path based on the hierarchical relationship set in the Anqi CMS backend.If your content is clearly categorized or layered in the background,breadcrumbLabels can work normally.