How to build and display the breadcrumb navigation of the current page using the `breadcrumb` tag in AnQiCMS?

In website operation, Breadcrumb Navigation is an important element for improving user experience and website structure clarity.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, playing a positive role in SEO optimization.For AnQiCMS users, building and displaying breadcrumb navigation is a very convenient operation, thanks to the powerful template tags built into AnQiCMS.

Understand AnQiCMS'breadcrumbTag

AnQiCMS provides a dedicated tool for generating breadcrumb navigationbreadcrumbThe tag is designed to simplify the development process, allowing content operators and template developers to easily integrate this feature into the page.breadcrumbThe tag will automatically generate a navigation path list based on the current page's URL path and content hierarchy (such as categories, articles, single pages, etc.).

UsebreadcrumbThe basic structure of the tag is as follows:

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

Here, crumbsIt is an array object generated by AnQiCMS, which includes each link in the breadcrumb navigation from the homepage to the current page. Developers need to go throughforLoop through thiscrumbsAn array to render each link on the navigation path sequentially.

Inforthe loop,crumbseach element of the arrayitemBoth provide two core properties for us to use:

• item.Name: Represents the display name of a navigation item, 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 the HTML5<nav>and<ol>tag to enhance semanticization, and throughforloop.LastDetermine if 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 the style.

breadcrumbThe core parameters of the tag

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

1. indexParameter: Customize the home page nameBy default, the first link of the breadcrumb navigation (usually the root directory of the website) is displayed as 'Home'. ThroughindexParameter, we can easily change it to other text, such as "my blog" or "homepage".

   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 titleIn some cases, we may not want the last item of the breadcrumb navigation (i.e., the title of the current page) to be too long, or we may want it to be displayed as more concise text.titleThe parameter can help us achieve this.

   • title=true(Default): 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 page of the current page.
   • title="自定义文字": Replace the title of the current page with the specified custom text.

   Usage example:

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

3. siteIdParameter: Data call in multi-site scenarioFor users of AnQiCMS multi-site management feature,siteIdParameters are allowed to call data from other sites in the current site template. Usually, users do not need to set this parameter,breadcrumbThe tag automatically retrieves data from the current site. It is only needed for specific advanced requirements, such as displaying another site's breadcrumb path within a site.siteId.

   Usage example:

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

Build a complete and customizable breadcrumb navigation in practice

Combining these parameters, we can build a comprehensive and flexible customizable breadcrumb navigation. The following code demonstrates a common application scenario, considering the display of the home page name, the current page title, and using semantic 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 page", but also ensured that the current page (forloop.Last) does not have a link in its name and used<span>Label wrapping for easy CSS styling control. At the same time, by adding separators<span>Labels make the visual effect of breadcrumb navigation clearer.

Summary

AnQiCMS'breadcrumbTags provide a直观而强大的方式 to build and display the breadcrumb navigation of a website. By using flexiblyindexandtitleWith parameters, we can easily customize the display content and form of navigation, thereby greatly enhancing the user experience and SEO performance of the website without increasing the amount of complex code. For content operators and developers who want to have a clear navigation structure on the website, masteringbreadcrumbLabels are an essential skill.

Frequently Asked Questions (FAQ)

Q1: Why is my breadcrumb navigation not displaying the title of the current page?A1: This is likely becausebreadcrumblabel'stitlethe parameter is set tofalseOr other custom text has been specified. Please check your template code.{% breadcrumb ... %}Within the tag.titleSet the parameter settings, make sure it is set totrueTo display the complete title of the current page or set it to the custom text you expect.

Q2: How can 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 previous example, by manually adding a separator character (such asforin a loop, manually adding a separator character (such as/or>）的<span>Label. For example, you can insert one after each<li>element (except the last one)<span>/</span>and then use CSS to position and style it.

Q3: How to modify the display text of 'Home' in the breadcrumb navigation?A3: You can usebreadcrumblabel'sindexParameters can easily modify the display text of the 'Home' page. For example, if you want to display 'Home' as 'Website Homepage', you can set it like this in the label:{% breadcrumb crumbs with index="网站主页" %}.