In website operation, Breadcrumb Navigation is an important element to enhance user experience and the clarity of website structure.It not only helps visitors quickly understand the position of the current page in the website hierarchy, but also effectively assists search engines in understanding the relationships between website content, which has a positive effect on SEO optimization.For AnQiCMS users, building and displaying breadcrumb navigation is a very convenient operation, which is thanks to the powerful template tags built into AnQiCMS.

Understand AnQiCMSbreadcrumbtags

AnQiCMS provides a dedicated feature for generating breadcrumb navigationbreadcrumbLabels. This label is designed to simplify the development process, allowing content managers and template developers to easily integrate this feature into the page.breadcrumbThe label is automatically generated based on the URL path and content hierarchy of the current page (such as categories, articles, single pages, etc.) to create a navigation path list.

UsebreadcrumbThe basic structure of the label is as follows:

{% breadcrumb crumbs %}
    {# 在这里循环输出面包屑导航的每一项 #}
{% endbreadcrumb %}

Here,crumbsis an array object generated by AnQiCMS, it includes each link in the breadcrumb navigation from the homepage to the current page. Developers need to accessforLoop through thiscrumbsArray, rendered one by one to display each link in the navigation path.

Inforin the loop,crumbsevery element of the arrayitemBoth provide two core properties for us to use:

  • item.Name：represents the display name of navigation items, such as 'Home', 'News Center', 'Article Title', etc.
  • item.Link：represents the URL link corresponding to the navigation item, which will jump to the page when clicked.

Therefore, a typical breadcrumb navigation rendering code snippet would look like this:

{% breadcrumb crumbs %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            {% for item in crumbs %}
                <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
                    {% if forloop.Last %}
                        {{ item.Name }}
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        </ol>
    </nav>
{% endbreadcrumb %}

In this example, we used HTML5's<nav>and<ol>tag to enhance semanticization, and throughforloop.LastDetermine whether it is the last navigation item on the current page. If it is the last one, we usually only display text without adding a link, and addactivea class name to distinguish styles.

breadcrumbThe core parameters of the label detailed description

breadcrumbThe label also provides several practical parameters to help us better control the display behavior of breadcrumb navigation:

  1. indexParameter: Customize the name of the home pageBy default, the first link of the breadcrumb navigation (usually the root directory of the website) is displayed as "Home". ThroughindexParameters, we can easily modify them to other text, such as "My Blog" or "Homepage of the Website."

    Usage example:

    {% breadcrumb crumbs with index="我的网站" %}
    {# ... 遍历 crumbs 数组 ... #}
{% endbreadcrumb %}

    In this way, the first link of the breadcrumb navigation will display as "My Website.

  2. titleParameter: Controls the display of the current page title.In some cases, we may not want the last item in the breadcrumb navigation (i.e., the title of the current page) to be too long, or we may want it to be displayed in a more concise text.titleThe parameter can help us achieve this.

    • title=true(Default value): Display the full title of the current page.
    • title=false: Do not display the title of the current page, the breadcrumb navigation will stop at the parent level of the current page.
    • title="自定义文字"：Replace the current page title with specified custom text.

    Usage example:

    {# 示例一：不显示当前页面的标题 #}
{% breadcrumb crumbs with title=false %}
    {# ... 遍历 crumbs 数组 ... #}
{% endbreadcrumb %}


{# 示例二：将当前页面标题显示为“详情内容” #}
{% breadcrumb crumbs with title="详情内容" %}
    {# ... 遍历 crumbs 数组 ... #}
{% endbreadcrumb %}

  3. siteIdParameters: Data call in multi-site scenarios.For users of the AnQiCMS multi-site management feature,siteIdThe parameter allows calling data from other sites in the current site template. Usually, users do not need to set this parameter,breadcrumbLabels will automatically retrieve the data of the current site. It is only necessary to specify in specific advanced requirements, such as displaying another site's breadcrumb path within a single site.siteId.

    Usage example:

    {# 假设需要获取ID为2的站点的面包屑 #}
{% breadcrumb crumbs with siteId="2" %}
    {# ... 遍历 crumbs 数组 ... #}
{% endbreadcrumb %}

Actual Application: Build a complete and customizable breadcrumb navigation

Combining the above parameters, we can build a breadcrumb navigation that is both functional and flexible and customizable. The following code demonstrates a common application scenario, which considers the display of the home page name and the current page title, and uses semantically meaningful HTML structure:

<div class="container my-3">
    {% breadcrumb crumbs with index="网站首页" title=true %}
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-light p-2 rounded">
                {% for item in crumbs %}
                    <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
                        {% if forloop.Last %}
                            <span class="text-secondary">{{ item.Name }}</span>
                        {% else %}
                            <a href="{{ item.Link }}" class="text-decoration-none text-primary">{{ item.Name }}</a>
                        {% endif %}
                    </li>
                    {% if not forloop.Last %}
                        <span class="breadcrumb-separator mx-2">/</span>
                    {% endif %}
                {% endfor %}
            </ol>
        </nav>
    {% endbreadcrumb %}
</div>

In this example, we not only set the home page name to "Website Home", but also ensured that the name of the current page (forloop.Last) does not contain a link, and used<span>Label wrapping for convenient CSS styling control. At the same time, by adding separators<span>labels, the visual effect of the breadcrumb navigation becomes clearer.

Summary

AnQiCMSbreadcrumbTags provide a直观而强大的方式来构建和显示网站的面包屑导航。通过灵活运用indexandtitleParameters such as these allow us to easily customize the display content and format of navigation, thereby significantly improving the user experience and SEO performance of the website without increasing the amount of complex code. For content operators and developers who want their websites to have a clear navigation structure, masteringbreadcrumbLabels are an essential skill.

Common Questions (FAQ)

Q1: Why is my breadcrumb navigation not displaying the title of the current page?A1: This is likely because...breadcrumbTagstitleThe parameter has been set tofalseor specified other custom text. Please check your template code.{% breadcrumb ... %}within the tagtitlethe parameter settings, make sure it is set astrueTo display the full title of the current page, or set it to the custom text you expect.

Q2: How do I make each item in the breadcrumb navigation display an arrow or other separator?A2: The separator in breadcrumb navigation is usually implemented through CSS styles, or as shown in the example above, by manually adding a separator character (such asfora separator character in the loop./or>) of<span>Label. For example, you can insert it after each<li>element (except the last one)<span>/</span>, then use CSS to position and style it.

Q3: How to modify the display text of 'Home' in breadcrumb navigation?A3: You canbreadcrumbTagsindexParameters can be easily modified to change the display text of the "Home{% breadcrumb crumbs with index="网站主页" %}.