What data structure does the `crumbs` variable represent in AnQiCMS breadcrumb navigation tags?

As an expert well-versed in website operations, I know that every detail can affect user experience and search engine optimization (SEO) effects.The breadcrumb navigation is one of those seemingly unremarkable elements that are actually crucial.It can not only help users clearly understand their location on the website, but also provide important clues for search engines about the website structure.

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 -crumbsA variable, revealing the data structure it represents and its tremendous value in practical applications.

The value of breadcrumb navigation and the implementation in AnQiCMS.

Breadcrumbs navigation is usually displayed in the form of "Home > Category > Article Title", which can intuitively reflect the hierarchical structure of the website.For users, breadcrumbs are a convenient path to quickly backtrack to the previous page;For search engine spiders, it is an important signal for understanding the relevance of website content and transferring page authority.

AnQiCMS fully understands its importance and therefore provides a simple yet powerful design in templatesbreadcrumbTags, allowing developers to easily build a complete breadcrumb navigation feature. The core of this tag is exactly what we are discussing today.crumbsVariable.

crumbsThe Mystery of Variables: In-depth Analysis of Data Structures

We use in AnQiCMS template{% breadcrumb crumbs ... %}such a tag,crumbsThis variable has become 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 string of beads, each bead on the necklace represents a node in the breadcrumb path.These nodes are arranged from left to right, from the home page to the current page, forming a complete navigation path.

More specifically,crumbsEach element (i.e., each "breadcrumb" node) itself is another structure that contains two key pieces of informationstructure:

1. Name(Link Name):

   • This represents the text content displayed on the breadcrumb node on the frontend page.For example, "Home", "News Center", "Industry Dynamics", or "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, and in the template you need to useforLoop through it to traverse each breadcrumb nodeitem）的NameandLinkfield and render it to the page

breadcrumbTag parameters: 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(Show 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 when it is triggered.
  • Whentitle=falseWhen, 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 Page Name)This parameter is used to customize the display name of the first node in the breadcrumb navigation (i.e., the homepage).

  • By default,indexMay be displayed as "Home Page". If you want to change it to "Home", "Website Homepage", or any other text, just setindex="你的首页名称"Just do it.

• siteId(Site ID)If you are using the AnQiCMS multi-site management feature and want to call or display the breadcrumb path of another site on the current site, you can specifysiteIdTo implement the parameter. In most single-site scenarios, this parameter is usually not manually filled.

The combination of these parameters enables the breadcrumb navigation to maintain generality while also considering personalization.

Actual application: Write elegant breadcrumb code

Understoodcrumbsthe data structure ofbreadcrumbAfter the tag parameters, writing the breadcrumb navigation code becomes intuitive and efficient. Below is a typical AnQiCMS template breadcrumb navigation example:

<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 calledbreadcrumbLabel, and the generated data was assigned to a namedpathCrumbs.
   • index="首页"Ensured that the breadcrumb start is "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 toitemVariable.

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

   • This is the core of rendering each breadcrumb node.{{ item.Link }}It will output the URL address of the current node,{{ item.Name }}then output its display name.

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

   • This is a very practical template trick.forloop.LastIs an AnQiCMS template engine (similar to Django syntax) built-in variable, it is when it is the last element in the current looptrue.
   • Byif not forloop.LastWe ensure that it is only displayed when it is not the last breadcrumb node>This separator avoids extra separators at the end of the path, making navigation more beautiful.

Why is AnQiCMS'scrumbsdesign so efficient?

This design philosophy perfectly fits the core concept of AnQiCMS project itself: high efficiency, customizable, easy to expand

• Data and logic separation:crumbsVariables provide a pure data structure, andbreadcrumbThe tag is responsible for data acquisition and encapsulation. Template developers only need to focus on how to iterate and display these data, without concerning about how the data is extracted from the database, or how to build the hierarchy, which greatly simplifies template development.
• The high-performance advantage of the Go language: AnQiCMS is developed based on the Go language, the high concurrency characteristics and efficient execution capabilities of Go ensure that even under complex website structures, the data generation of breadcrumb navigation can respond quickly and not become a performance bottleneck.
• The ease of use of Django template syntax: Django-like template syntax, such asforloop andforloop.LastSuch built-in variables are very friendly for engineers familiar with web development, with a gentle learning curve and can be quickly mastered.
• Highly customizable: Passtitleandindexand parameters, as well ascrumbsArray traversal, developers can completely control the breadcrumb display style and text content, whether it is adding icons or modifying separators