As an expert who is deeply familiar with website operations, I know that every tiny detail can affect user experience and search engine optimization (SEO) effects.Breadcrumbs Navigation is one of those seemingly insignificant, yet crucial elements.It not only helps users clearly understand their position on the website but also provides important clues about the website structure to search engines.

In AnQiCMS, an enterprise-level content management system known for its efficiency and flexibility, how to implement breadcrumb navigation elegantly and accurately is a skill that every operator and template developer should master. Today, let's delve into the core of the AnQiCMS breadcrumb navigation tag.crumbsVariable, revealing the data structure it represents and its tremendous value in practical applications.

The value of breadcrumb navigation and the implementation of AnQiCMS.

Breadcrumbs navigation is usually displayed in the form of "Home > Category > Article Title", which can directly reflect the hierarchical structure of the website.For users, breadcrumbs are a convenient path for quickly navigating back to the previous level of the page; for search engine spiders, they are an important signal for understanding the relevance of website content and for transmitting page weight.

AnQiCMS fully understands its importance, therefore it provides a simple yet powerfulbreadcrumbTags allow developers to easily build a feature-rich breadcrumb navigation. The core of this tag is exactly what we are going to discuss today.crumbsa variable.

crumbsThe Mystery of Variables: Deep Analysis of Data Structures

When we use in AnQiCMS template{% breadcrumb crumbs ... %}such tags are,crumbsThis variable becomes the carrier of the data required for breadcrumb navigation. It is not a simple string, but a carefully designedordered array object.

You can imaginecrumbsJust like a necklace, each bead on the necklace represents a node in the breadcrumb path.These nodes are arranged in order from left to right and from the homepage to the current page, forming a complete navigation path.

More specifically,crumbsArray elements (i.e., each "breadcrumb" node) themselves are also structures that contain two key pieces of informationa structure:

  1. Name(Link Name):

    • This represents the text content displayed by the breadcrumb node on the front-end page.例如，“Home page”、“News Center”、“Industry Dynamics”或“AnQiCMS Template Tag Usage Guide”
    • NameThe field ensures that users can clearly identify the meaning of each navigation level.

  2. Link(Link address):

    • This represents the URL address corresponding to the breadcrumb node. When the user clicks on this link, they will be navigated to the corresponding page.
    • LinkThe field provides clickable navigation functionality and is the core of breadcrumb navigation interactivity.

Due tocrumbsIt is an array object, in the template you need to useforLoop through it to iterate over each breadcrumb node one by oneitem) ofNameandLinkfield and render it on the page

breadcrumbParameters of the tag: customize your navigation experience

breadcrumbtag is generatedcrumbsWhen a variable is used, it also allows us to flexibly configure through several parameters to meet different design and operation requirements:

  • title(Whether to display the title)This parameter controls the display style of the current page (usually the last node of the breadcrumb path).

    • Whentitle=trueIt will display the full title of the current page.
    • Whentitle=falseWhen this option is set, the title of the current page will not be displayed.
    • You can even settitle="自定义标题"At this time, the breadcrumb text of the current page will display the custom string you set. The default value istrue.

  • index(Home Name)This parameter is used to customize the display name of the first node in the breadcrumb navigation (i.e., the home page).

    • By default,indexMay display as “Home page”. If you want to change it to “Home”、“Website Homepage” or any other text, just setindex="你的首页名称".

  • siteId(Site ID)： if you are using the multi-site management feature of AnQiCMS and wish to call or display the breadcrumb path of other sites on the current site,siteIdParameters to implement. In most single-site scenarios, this parameter is usually not required to be manually filled in.

The combination of these parameters makes the display of breadcrumb navigation both general and personalized.

Actual application: Writing elegant breadcrumb code

UnderstoodcrumbsThe data structure ofbreadcrumbThe parameters of the label make writing breadcrumb navigation code intuitive and efficient. Here is an example of a typical AnQiCMS template breadcrumb navigation:

<nav class="breadcrumb">
    <span>您的位置：</span>
    {% breadcrumb pathCrumbs with index="首页" title=true %}
        {% for item in pathCrumbs %}
            <a href="{{ item.Link }}">{{ item.Name }}</a>
            {# 如果不是最后一个元素，则添加分隔符 #}
            {% if not forloop.Last %}
                <span class="separator">&gt;</span>
            {% endif %}
        {% endfor %}
    {% endbreadcrumb %}
</nav>

Code analysis:

  1. {% breadcrumb pathCrumbs with index="首页" title=true %}:

    • This line of code callsbreadcrumbLabel, and the generated data is assigned to a variable namedpathCrumbs.
    • index="首页"Ensures that the breadcrumb starts with “Home”.
    • title=trueIndicates that the title of the current page will also be displayed as the last breadcrumb node.

  2. {% for item in pathCrumbs %}:

    • Due topathCrumbsis an array, we useforto iterate over it. In each iteration, the current "breadcrumb" node data will be assigned toitema variable.

  3. <a href="{{ item.Link }}">{{ item.Name }}</a>:

    • this is the core to render each breadcrumb node.{{ item.Link }}It will output the URL address of the current node.{{ item.Name }}Then it outputs the display name.

  4. {% if not forloop.Last %}<span class="separator">&gt;</span>{% endif %}:

    • This is a very practical template trick.forloop.Lastis an built-in variable provided by AnQiCMS template engine (with Django syntax), which is set when it is the last element in the current loop.true.
    • Passif not forloop.LastWe ensure that the separator is only displayed when it is not the last breadcrumb node&gt;This separator avoids extra separators at the end of the path, making navigation more aesthetically pleasing.

Why is AnQiCMS so efficient?crumbsWhy is the design so efficient?

This design philosophy perfectly fits the core concept of AnQiCMS project itself: 'efficient, customizable, and easy to expand'.

  • Data and logic are separated.:crumbsVariables provide a pure data structure,breadcrumbThe label is responsible for data acquisition and encapsulation.The template developer only needs to focus on how to iterate and display these data, without concerning about how the data is extracted from the database and how to build the hierarchical relationships, which greatly simplifies template development.
  • The high-performance advantage of the Go language,：AnQiCMS Based on Go language development, the high concurrency and efficient execution capabilities of Go ensure that even under complex website structures, generating breadcrumb navigation data can respond quickly and will not become a performance bottleneck.
  • The usability of Django template syntaxDjango-like template syntax, such asforloop andforloop.LastSuch built-in variables are very friendly to engineers familiar with web development, with a gentle learning curve and can be quickly mastered.
  • Highly customizable: Throughtitleandindexand parameters, as well ascrumbsTraversal of the array, developers can fully control the display style and text content of the breadcrumbs, whether it is adding icons, modifying separators