In website operation, a clear navigation path is crucial for user experience and search engine optimization.Imagine browsing your website as if exploring a new city. If users can always see where they are and how they got there, it will greatly enhance their confidence and browsing efficiency.This is where the value of Breadcrumb Navigation lies.It is like a trail of breadcrumbs in your hand, providing a clear path for users from the homepage to the current page.

AnQiCMS as an efficient content management system fully understands this.It provides a powerful and flexible built-in label that allows you to easily dynamically generate and display breadcrumb navigation on your website, without complex coding, and can automatically identify and display the path.

AnQiCMS 中的 breadcrumb navigation: dynamically generated path guidance

The implementation of breadcrumb navigation in AnQiCMS mainly relies on a core template tag:breadcrumb.This label is very intelligent, it can automatically identify the type of page the user is currently visiting (whether it is an article detail page, a category list page, or a single page), and dynamically construct a complete navigation path according to the structure of the website.You only need to call it in the template file, and the system will automatically handle the underlying logic to generate user-friendly navigation chains.

Basic usage method

To add breadcrumb navigation to your website template, you usually place it at the top of the page, above the main content area. The basic usage is very simple:

<div>
    {% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

In this code,{% breadcrumb crumbs %}Labels will dynamically fill in the navigation path data of the current pagecrumbsthis variable.crumbsIt is a list containing multiple navigation items, each withName(Link name, the text displayed on the page) andLink(Link address, the URL to jump to after clicking) these two properties.

Through a simpleforLoop, we can traversecrumbsList each navigation item and present it in the HTML structure.<li><a>This way, a basic breadcrumb navigation will appear on your page.

Customization options

AnQiCMSbreadcrumbLabels are not only intelligent, but also provide flexible customization options, allowing you to adjust according to the specific design requirements of the website.

  1. Customize the home page name (}index)By default, the first item of the breadcrumb navigation is usually displayed as “Home”. If you want to change it to another name, such as “My Blog”, “Website Homepage”, etc., you canindexset the parameter to:

    <div>
    {% breadcrumb crumbs with index="我的博客" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

    So, the starting point of the navigation path will be displayed as the name you customized.

  2. Control the display of the current page title (title)In some cases, you may not want the full title of the current page to be displayed repeatedly at the end of the breadcrumb navigation, or you may want to set a simpler display text for it.title参数就可以帮您实现这一点：

    • title=true：这是默认行为，会显示当前页面的完整标题。
    • title=false：当前页面的标题将不会显示在面包屑导航中。
    • title="自定义文本"：The current page will display the text you specify instead of its original title.

    For example, if you are on an article detail page and do not want to display the article title, you can set it like this:

    <div>
    {% breadcrumb crumbs with title=false %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

    If you want to display a generic “article detail” text:

    <div>
    {% breadcrumb crumbs with title="文章详情" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

  3. Use custom options togetherOf course, you canindexandtitleParameters combined, with personalized control over the homepage name and the current page title: 

    <div>
    {% breadcrumb crumbs with index="站点入口" title="当前内容" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

Actual application scenarios

breadcrumbThe intelligence of the label lies in its context-aware ability. No matter what type of page the user is on, it can automatically adapt and generate the correct navigation path:

  • Article detail page:If the user is reading an article under the "News Center" category, the breadcrumb navigation may display as "Home > News Center > Article Title".
  • Category list page:If the user is browsing the "Product Display" category under "Electronics", the navigation path might be "Home > Product Display > Electronics".
  • Single page:For independent pages such as "About Us" or "Contact Information

AnQiCMS will automatically parse the URL structure and page data, building a complete hierarchy from the root directory of the site to the current page, greatly simplifying your template development work.

**Practical Suggestions

When implementing breadcrumb navigation, in addition to the correct use of labels, some design and placement considerations can also enhance its effect:

  1. Consistent placement:All pages of the website should display breadcrumbs in the same and easily accessible location, usually below the page header and above the main content area.
  2. Visual clarity:By default, the breadcrumb navigation generated by AnQiCMS does not have built-in styles.You need to beautify it with CSS, such as using small font size, light text color, and using symbols like “>” or “/” to separate links, making it visually distinct from the main content of the page, yet still noticeable.
  3. Keep it simple:The purpose of breadcrumb navigation is to provide a quick overview and avoid adding unnecessary redundant information.
  4. Clickable path:In addition to the current page, all intermediate levels in the breadcrumb path should be clickable links, convenient for users to quickly return to the parent page.

PassbreadcrumbLabel, AnQiCMS makes dynamic generation and management of breadcrumb navigation unprecedentedly simple and efficient.It not only enhances the website user experience but also indirectly helps your SEO work through clear internal link structure, allowing search engines to better understand and crawl your website content.

Common Questions (FAQ)

1. Breadcrumb navigation has been generated and the style looks very ordinary, how can I beautify it?

AnQiCMSbreadcrumbThe label is only responsible for outputting the HTML structure and data of the breadcrumb navigation, without any preset styles.This means you can fully customize its appearance using CSS.ulandliTags, as well as the contents within themaLabel, set font size, color, spacing, and separator style (such as using::afterpseudo elements to add>symbols) to maintain consistency with the overall design style of your website.

2. Breadcrumb navigation will be automatically generated on all types of pages (such as search results pages, 404 error pages)?

breadcrumbTags are mainly designed for content-related pages, such as article detail pages, category list pages, single pages, etc., AnQiCMS can automatically construct paths based on the structures and data of these pages.For the search results page, it usually only displaysAnd for the 404 error page, as it indicates that the page does not exist, there is usually no logical hierarchical path, so the breadcrumb navigation may only display "Home", or may not be displayed at all according to the template design.Suggest that you test or selectively call the breadcrumb tag according to your actual needs on these special pages.

3. If my website has a very multi-level classification structure, can the breadcrumb navigation correctly display the complete path?

Yes, AnQiCMS'sbreadcrumbTags can handle multi-level classification structures well.No matter how deeply your categories are nested, the system will build a complete navigation path starting from the top-level category, based on the actual position of the current page.You do not need to worry about manually specifying each level; the system will intelligently recognize and generate.