What is the basic syntax for calling the breadcrumb navigation tag in the AnQiCMS template?

Hello, as an experienced website operations expert, I know that every detail of a website is related to user experience and search engine optimization.A breadcrumb navigation is just such a seemingly minor, yet significant design element.It not only clearly tells the user their current location, effectively enhancing the website's usability, but also optimizes the website structure, helping with SEO.

Today, let's delve into how to flexibly use breadcrumb navigation tags in AnQiCMS templates, making the path of your website clear at a glance.

Core Syntax: Unveiling AnQiCMS Breadcrumb Tag

The core of calling breadcrumb navigation in AnQiCMS isbreadcrumbLabel. Its basic syntax structure is concise and intuitive, like a set of instructions, telling the system where we want to display the breadcrumbs and what content to display.

The basic call format is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里放置遍历面包屑路径的代码 #}
{% endbreadcrumb %}

As you can see, this tag starts with{% breadcrumb ... %}and ends with{% endbreadcrumb %}and ends, and between them is the logic code we use to display the breadcrumb path. Among them,crumbsIt is the variable name we specify for the breadcrumb path data, you can name it according to your habits, but it is usually usedcrumbsThis term means 'crumb crumbs', it carries all the path information from the current page to the homepage.

Understand the parameters: customize your breadcrumb path

In order to better serve your website design and user needs with breadcrumb navigation,breadcrumbtags provide some practical parameters, allowing you to customize in detail.

1. indexParameter: Define the entrance of 'home' indexThe parameter is used to define the first "home" in the breadcrumb path, which is also what we usually call the "home" link text.AnQiCMS defaults it to be displayed as 'Home', but you can modify it according to your brand or website positioning.

   • If you want to change 'home page' to 'my blog', you can set it like this:index="我的博客".

2. titleParameter: Control the display of the current pageThis parameter determines how the last element of the breadcrumb path - that is, the title of the current page - will be displayed.This is particularly important for the document detail page, product detail page, and other locations that need to highlight the current content.

   • When set totitle=trueWhen (this is the default value), the breadcrumb will display the full title of the current page, for example: "Home > Product Center > Details of a Certain Product".
   • If you do not want the title of the current page to be displayed in the breadcrumbs, you can choosetitle=falseAt this point, the breadcrumb path will stop at the parent category of the current page, for example: "Home > Product Center".
   • In addition, you can also specify a specific string, for exampletitle="文章详情"This is very useful when a unified title display is needed on some specific pages.

3. siteIdParameter: flexible invocation under multi-sites.AnQiCMS supports multi-site management, if you manage multiple sites in the background and want to call the breadcrumb path of other sites in a specific template,siteIdParameters come into play. Generally, there is no need to manually set this parameter, as the system will automatically identify the ID of the current site.

Traversal and Display: The Actual Steps to Build Breadcrumbs

We have now understoodbreadcrumbthe tags and their parameters, next we will see how tocrumbstraverse the path information in this variable and display it on the web page.

crumbsA variable actually is an array that contains multiple path objects (item). Each path object has two key properties:

• NameThe display name of the path, which is the text the user sees.
• LinkThe URL address corresponding to the path.

Therefore, we need to use aforLoop through these path objects one by one and build the corresponding HTML structure. A common practice is to use an unordered list<ul>and list item<li>to carry, and through<a>Label each path to create clickable links.

For example, a typical breadcrumb navigation code snippet would look like this:

<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 the above example,forloop.lastIt is a very useful judgment that can help us identify the last element in a loop.The last element of the breadcrumb navigation (i.e., the current page) does not need to be linked as it represents the destination the user has already reached.

Practical exercises: several common ways to call breadcrumb navigation.

Let us experience the flexible application of breadcrumb tags through several specific examples:

1. Standard usage: display 'Home' and the current page titleThis is the most common and recommended usage, it starts with 'Home' and displays the full title of the current page.

   <nav class="my-breadcrumb">
       <ul>
           {% breadcrumb crumbs with index="首页" title=true %}
               {% for item in crumbs %}
                   <li>
                       {% if forloop.last %}
                           {{ item.Name }}
                       {% else %}
                           <a href="{{ item.Link }}">{{ item.Name }}</a> &gt;
                       {% endif %}
                   </li>
               {% endfor %}
           {% endbreadcrumb %}
       </ul>
   </nav>
   

2. Customize the home page text and do not display the title of the current page:In certain design scenarios, you may want to replace the 'Home' text with other descriptions and not display the current page title, allowing the breadcrumb to stop at the previous category level.

   <nav class="my-breadcrumb">
       <ul>
           {% breadcrumb crumbs with index="我的站点" title=false %}
               {% for item in crumbs %}
                   <li>
                       {% if forloop.last %}
                           {{ item.Name }}
                       {% else %}
                           <a href="{{ item.Link }}">{{ item.Name }}</a> /
                       {% endif %}
                   </li>
               {% endfor %}
           {% endbreadcrumb %}
       </ul>
   </nav>
   

Tip: Make breadcrumb navigation stand out

• Placement:Breadcrumb navigation is usually placed on the websitebase.htmlMaster template file orpartial/header.htmlIn common code snippets. This ensures that all pages that need to be displayed can be automatically loaded without repeating the code.
• Style beautification:Don't forget to add CSS styles to your breadcrumb navigation to keep it consistent with the overall design style of the website.By adjusting the style of fonts, colors, spacing, and separators, the visual effects can be greatly enhanced.
• Generated dynamically:AnQiCMS's breadcrumb navigation is completely dynamically generated.This means that regardless of which page the user visits, the system will automatically build the correct breadcrumb path based on the current page's category hierarchy or single page path, greatly reducing the cost of manual maintenance.

With these features, AnQiCMS makes the implementation of breadcrumb navigation both simple and powerful, whether it is to provide clear path guidance for users or to optimize the website structure for search engines, it can easily cope with it.

Frequently Asked Questions (FAQ)

Q1: Why is my breadcrumb navigation not displaying the title of the current page? A1:This is usually due tobreadcrumbin the labeltitleCaused by parameter settings. Please check your template code to ensuretitlethe parameter is set totrue, or it has not been set.falseOr some specific string. For example,{% breadcrumb crumbs with title=true %}It can ensure that the current page title is displayed.

Q2: How do I change the text of the "Home" in the breadcrumb navigation? A2:You can modify bybreadcrumbin the labelindexTo implement the parameter. By default,indexThe value of the parameter is "Home". You can change it to any text you want, for example{% breadcrumb crumbs with index="网站主页" %}.

Q3: How to adjust the style of breadcrumb navigation, for example, change the separator or font color? A3:The template tags of AnQiCMS are mainly responsible for outputting the HTML structure and content of the breadcrumb navigation.To adjust its style, you need to use CSS. Typically, breadcrumb navigation is wrapped in a<nav>or<div>Inside the tag,<ul>/<li>and<a>Elements. You can write CSS rules for these HTML elements to control font, color, background, spacing, and custom delimiters (such as using::beforeor::afterpseudo-elements and so on, to match your website design.