AnQiCMS as an efficient and flexible enterprise-level content management system, also considers the details of content display thoroughly.For the user experience and SEO optimization of a website, clear breadcrumb navigation (Breadcrumb Navigation) is an indispensable part.It not only helps users understand their position on the website, but also provides clear website structure information for search engines.Today, let's discuss in detail what fields are available for each link item (item) in the AnQiCMS breadcrumb navigation.

You will use in the AnQiCMS template design,<breadcrumb>Label to generate breadcrumb navigation. This label is designed to be simple and practical, and it will automatically build a hierarchical path list for you.

Basic Breadcrumb Navigation Tag of AnQiCMS

First, let's understandbreadcrumbSome main parameters of the tag itself, which affect the display of the entire breadcrumb navigation.

When you call the breadcrumb navigation in the template, it is usually used like this:

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

here,breadcrumbTag throughcrumbsThis variable is used to pass the generated navigation data. In addition, it accepts some parameters to help you better control the display effect:

  • indexparameters:This parameter allows you to customize the display text of the 'Home' in the breadcrumb navigation.By default, it will be displayed as "Home".index="我的博客".
  • titleparameters:Used to control whether the current page title is displayed in the breadcrumb navigation. When you set it totruethe last item in the navigation path will display the full title of the current page; set tofalseIt will not be displayed. More flexible is that you can also directly assign it a custom string, such astitle="文章详情"This will always display 'Article Details' regardless of the current page title. By default, this parameter istrue.
  • siteIdparameters:For users who use the AnQiCMS multi-site management function,siteIdIt is an advanced option. It allows you to call breadcrumb data from other sites on the current site. But in most single-site scenarios, you usually do not need to fill in or modify it.

After understanding these tag-level controls, we can delve into the specifics of each breadcrumb link item (item) to see what information they provide.

Breadcrumbs link item (item) available field

WhenbreadcrumbLabel fills navigation data into thecrumbsvariables when,crumbsIt will be an array containing multiple link items (or more accurately, a slice). In the template, you will usefora loop to iterate over thiscrumbsarray to get each oneitemAnd from which we extract the necessary fields to construct the HTML structure.

EachitemBoth provide two core and crucial fields, which are:

  1. NamefieldThis field, as the name implies, stores the current link item in the breadcrumb path.Display text. Whether it is the "home page", "news center", "product details", or a specific article title, these visible texts for users are stored inNamethe field. In the template, you will use it directly{{ item.Name }}to retrieve and display it.

  2. LinkfieldwithNameThe field that complements it isLinkThe field, it saves the complete URL address pointed to by thecomplete URL address. When a user clicks on any item in the breadcrumb navigation, it will jump toLinkthe page corresponding to the field. In the template, you will use it for<a>label'shrefproperties, such as<a href="{{ item.Link }}">{{ item.Name }}</a>.

The design philosophy of AnQiCMS breadcrumb navigation is to maintain the simplicity and efficiency of its core functions.Therefore, each link item defaults to providing these two basic but essential fields: display name and jump link.

Let's go through a common template code snippet to see how these fields are applied in practice:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
    {% breadcrumb crumbs with index="我的网站" title=true %}
        {% for item in crumbs %}
            <li class="breadcrumb-item">
                {% if forloop.last %} {# 判断是否是最后一个链接项，通常是当前页面，不需要链接 #}
                    {{ item.Name }}
                {% else %}
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                {% endif %}
            </li>
        {% endfor %}
    {% endbreadcrumb %}
    </ol>
</nav>

In this example, we iteratecrumbsover an array, with each loop getting an elementitemObject. We useforloop.lastto determine the currentitemwhether it is the last item in the breadcrumb path (i.e., the current page). If so, only the text is displayed without adding a link; otherwise, both are used.item.Linkanditem.NameBuild a clickable link.

In summary, the breadcrumb navigation of AnQiCMS passes throughNameandLinkThese two concise and powerful fields provide all the basic information needed to build a clear and intuitive navigation path.This design allows template developers to easily integrate and customize the breadcrumb navigation style, while ensuring the website's usability and SEO-friendliness.

Frequently Asked Questions (FAQ)

  1. Q: Can I change the text of 'Home' in the AnQiCMS breadcrumb navigation to another name? A:Of course. You just need to usebreadcrumbthe tag whenindexSet the parameters. For example, if you want to display "Home" as "Website Home Page", you can write it like this:{% breadcrumb crumbs with index="网站主页" %}.

  2. Q: Does the last item of breadcrumb navigation always display the title of the current page? Can I control it? A:Yes, you can control it completely.breadcrumblabel'stitleThe parameter is designed for this. By default,titleis set totrueIt will display the actual title of the current page. If you do not want to display the title, you can set it totitle=false. More flexibly, you can also specify a string directly, such astitle="文章详情页"And so, no matter what the specific title of the current page is, the last item of the breadcrumb will display the text you customize.

  3. Q: If I need the breadcrumb link to include other information besides the name and link (such as icon class name), does AnQiCMS support these fields in the breadcrumb link item itself? A:AnQiCMS breadcrumb navigation each link item(item)only provides by defaultNameandLinkTwo core fields. If your design requires each link item to carry additional custom data (such as the CSS class name for displaying icons), you may need to consider handling it through conditional judgment or custom logic at the template level, rather than directly fromitemGet from the object. For example, you can useitem.NameThe value to dynamically add icon classes. If a deeper integration is needed, it may be necessary to conduct secondary development on the AnQiCMS underlying code to expand the breadcrumb data structure.