The user experience of a website largely depends on the convenience and clarity of navigation.When a visitor delves into the website content, a friendly "Breadcrumb Navigation" can clearly indicate the current position and provide a quick path to return to the upper page.AnQiCMS (AnQiCMS) is well-versed in this, providing powerful and easy-to-usebreadcrumbLabels allow website administrators to automatically generate paths without complex coding, and even customize the display text on the home page flexibly.

Automatically generate breadcrumb navigation: intelligent path guidance

In AnQi CMS,breadcrumbThe design concept of the tag is automation and intelligence. When you use this tag on the article detail page, category list page, or other content pages, the system will automatically parse and construct a complete navigation path based on the current page's URL structure and content hierarchy.For example, if the structure of your website is 'Home > Product Center > Some product category > Specific product details', thenbreadcrumbThe label will automatically recognize and display this path.

It works in a very intuitive way: you just need to place it at the appropriate location in the template file.breadcrumblabel and iterate over its return.crumbsAn object can be used. A typical usage is as follows:

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

In this code block,{% breadcrumb crumbs %}Tell Anqi CMS to generate the breadcrumb path of the current page and store it in an array variable namedcrumbsThen, a simpleforThe loop will traverse thiscrumbsarray, for each path item (item) retrieve its linkitem.Linkand display nameitem.NameRender it as an HTML list element. Whether it's an article title, category name, or other page elements,breadcrumbTags can be intelligently retrieved and correctly displayed, greatly simplifying template development.

Customize the home page display text: personalize your website entrance.

By default, the breadcrumb navigation of Anqi CMS starts with the 'Home' as the starting point of the entire path.However, in actual operation, you may wish to modify this starting point to one that is more brand-oriented or better suited to the context, such as 'My Blog', 'Company Homepage', or other custom text.breadcrumbTag throughindexParameters make this customization easy.

If you want to display 'Home' as 'Website Homepage', you can use it like this.indexparameters:

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="网站主页" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

Byindex="网站主页"The first element of the breadcrumb navigation will no longer be the default 'Home', but the specified 'Website Homepage'.This small change can help you better unify the language style of the website, or display different home page texts for different language versions on a multilingual website, improving the consistency of the user experience.

Flexible control of the final page title: optimize navigation display.

In addition to customizing the home page text,breadcrumbthe tags also provide control over the display style of the path endpoint - that is, the title of the current page. BytitleParameters, you can decide whether to display the title of the current page (such as an article or product) at the end of the breadcrumb, or display a custom description.

titleThere are three ways to use the parameter:

  1. title=true(default):Show the full title of the current page.
  2. title=false:Do not show the title of the current page, the path stops at the parent page.
  3. title="自定义标题":Display the specified custom text as the end of the path, rather than the actual title of the page.

For example, if you do not want the full title of the current article to be displayed in the breadcrumbs, but only to the category it belongs to, you can set it like this:

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

And if you want to uniformly display "Article Details" as the end point of the breadcrumb for all article detail pages, you can do it like this:

<nav class="breadcrumb">
    {% breadcrumb crumbs with index="网站主页" title="文章详情" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

This provides website operators with great flexibility, allowing them to accurately control the display effect of breadcrumb navigation according to different page types and design requirements, thereby better guiding users to browse and understand the website structure.

Conclusion

Of Security CMSbreadcrumbThe tag is a powerful tool that combines automation and flexible customization.It can easily enable you to generate and personalize breadcrumb navigation with simple parameter settings, playing an indispensable role in improving user navigation experience or optimizing the website SEO structure.Master and make good use of these features, which will help present your website content more clearly to users and search engines.

Frequently Asked Questions (FAQ)

  1. Q: Can I change the display text of the middle pages in the breadcrumb navigation except for the home page and the final page title?A:breadcrumbThe label is mainly generated automatically for the middle path item based on the title or category name of the content model.It does not have a direct parameter to customize the specific display text of each intermediate path item.Generally, these names come from the category titles, document titles, and so on that you set in the background.If you need more advanced customization, you may need to consider in the template tocrumbsArrays for more complex logic processing or data transformation, but this usually goes beyond the direct parameter control scope of the tag.
  2. Q: How to customize the style of the generated breadcrumb navigation?A:breadcrumbThe tag generates a standard HTML structure (usually<ul>and<li>tags to wrap<a>Link). Therefore, you can customize it visually and adjust its design and layout like any other HTML element using a CSS stylesheet.Just add the corresponding class name or ID to the container or list item wrapping the breadcrumbs, and then write the corresponding CSS rules.
  3. Q: If my website has multiple sites, can the breadcrumb navigation work correctly?A: Yes, it's safe CMS'sbreadcrumbThe tag fully supports multi-site environments. It has an optionalsiteIdThe parameter. If you have created multiple sites and want to call the breadcrumb data for a specific site (although this is rarely used when displaying the current site breadcrumb), you can specifysiteIdTo implement. However, in most cases, when you use the current site templatebreadcrumbtags, it will automatically identify and generate the breadcrumb path of the current site without any additional settingssiteId.