The user experience of the website largely depends on the convenience and clarity of navigation.When visitors delve into the website content, a friendly 'Breadcrumb Navigation' can clearly indicate the current position and provide a quick path back to the upper page.breadcrumbLabels allow website administrators to automatically generate paths without complex coding, even enabling flexible customization of the displayed text on the homepage.

Automatically generate breadcrumb navigation: intelligent path guidance

In the Anqi CMS,breadcrumbThe design concept of the label 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 URL structure and content hierarchy of the current page.breadcrumbLabels will automatically identify and display this path.

It works in a very intuitive way: You just need to place the label at the appropriate location in the template file.breadcrumblabels, and iterate over their returns.crumbs[en]The object itself. 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,{% breadcrumb crumbs %}Tell the CMS to generate the breadcrumb path for the current page and store it in a namedcrumbsarray variable. Then, a simpleforThe loop will iterate over thiscrumbsarray, and for each path item (item), extract its linkitem.Linkand display nameitem.Nameand render it as an HTML list element. Whether it's the article title, category name, or other page elements, breadcrumbTags can be intelligently obtained and correctly displayed, greatly simplifying the template development process.

Customize the display text on the homepage: personalize your website entrance

By default, the breadcrumb navigation of Anqi CMS starts with "Home" as the starting point of the entire path.However, in actual operation, you may want to modify this starting point to one that has more brand characteristics or fits the context better, such as "My BlogbreadcrumbTagged throughindexParameters make this customization a breeze.

If you want to display 'Home' as 'Website Homepage', you can do 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>

Passindex="网站主页"The first element of the breadcrumb navigation will no longer be the default 'Home', but the 'Website Homepage' you specify.This minor change can help you better unify the language style of the website, or display different home page text for different language versions on a multilingual website, enhancing the consistency of 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. ThroughtitleParameter, you can decide whether to display the current page (such as an article or product) title at the end of the breadcrumb, or display a custom description.

titleThere are three ways to use the parameter:

  1. title=true(Default Value):Display the full title of the current page.
  2. title=false:Do not display the title of the current page, the path stops after reaching the parent page.
  3. title="自定义标题":Display the custom text you specify as the path endpoint instead of the actual page title.

For example, if you do not want to display the full title of the current article in the breadcrumbs, but only up 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 breadcrumb endpoint 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 great flexibility for website operators, allowing them to precisely 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.

Concluding remarks

Anqi CMS'sbreadcrumbTags are a powerful tool that combines automation with flexible customization.It allows you to easily implement automatic generation and personalized display of breadcrumb navigation with simple parameter settings. Whether it is to enhance the user navigation experience or optimize the website SEO structure, it plays an indispensable role.Master and make good use of these features, which will help present your website content more clearly to users and search engines.

Common 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?A:breadcrumbThe label is mainly automatically generated for the middle path item based on the title or category name of the content model.It does not have direct parameters to customize the specific display text for each intermediate path item.Generally, these names come from the category titles, document titles, and so on that you set in the background.crumbsArray for more complex logic processing or data transformation, but this usually goes beyond the direct parameter control range of the label.
  2. Q: How to customize the style of the generated breadcrumb navigation?A:breadcrumbThe tag generates standard HTML structure (usually)<ul>and<li>Wrapped by tag<a>Link).Therefore, you can visually design and adjust the layout of the element just like customizing any other HTML element through a CSS stylesheet.Add the corresponding class name or ID to the container or list item that wraps 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, AnQi CMS supports.breadcrumbLabels fully support multi-site environments. It includes an optionalsiteIdParameters. 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's breadcrumbs), you can do so by specifyingsiteIdTo implement. However, in most cases, when you use the tag in the template of the current site, it will automatically recognize and generate the breadcrumb path of the current site without any additional settingsbreadcrumbWhen you use the tag in the template of the current site, it will automatically identify and generate the breadcrumb path of the current site without any additional settingssiteId.