When we browse websites, we often see a line at the top or bottom of the page indicating the current location path, such as "Home u003e Product Category u003e Electronics u003e Laptops".This is what we commonly refer to as 'breadcrumb navigation', which not only clearly informs us of our location but also facilitates our quick return to the previous level page, greatly enhancing the user experience and navigation efficiency of the website.

In AnQi CMS, implementing and displaying breadcrumb navigation is a very easy thing to do.The system is built-in with special template tags that can intelligently generate a complete navigation path based on the content structure of the current page.You do not need to manually configure each level of path, just call the corresponding tag in the template, and your website will have a professional and user-friendly breadcrumb navigation.

Smartly utilize built-in tags: the core of generating breadcrumb navigation

AnQi CMS can easily implement breadcrumb navigation due to its powerful template engine and built-inbreadcrumbLabel.This tag is specifically designed to solve the problem of displaying page paths, it can automatically identify the type of the current page (such as whether it is the homepage, article detail page, category list page, or single page), and dynamically build a complete navigation chain according to the hierarchical relationship of the page.

UsebreadcrumbThe tag syntax is very concise and intuitive. Typically, you will see such a code structure:

{% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code block,{% breadcrumb crumbs %}It is the key to calling the breadcrumb navigation tag. It passes a variable namedcrumbsto the template. ThiscrumbsIn fact, a variable is an array that contains all the hierarchical information of the navigation path (or it can be understood as a list).

Next, we use{% for item in crumbs %}a loop to traverse this array. In each iteration,itemIt represents a node in the navigation path (such as "home pageitemcontains two key pieces of information:

  • item.Name: Indicates the display name of the navigation node, such as 'Home', 'Laptop'.
  • item.Link: Indicates the URL address of the navigation node, which can be directly accessed by clicking.

By using such a loop and variable output, each level of the breadcrumb navigation naturally appears on your webpage.

Flexible customization: Make the breadcrumb navigation more tailored to your needs.

Of Security CMSbreadcrumbThe tag not only provides the basic automatic generation function, but also supports flexible customization through parameters to meet the personalized display needs of your website.

1. Customize the home page name

By default, the starting point of the breadcrumb navigation is usually displayed as "Home PageindexSet the parameter:

{% breadcrumb crumbs with index="我的博客" %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this way, your breadcrumb navigation will start with "My Blog" instead of the default "Home".

2. Accurately control the display of the detail page title

On the article or product detail page, the last level of breadcrumb navigation usually displays the title of the current article or product. Anqi CMS providestitleparameters to control the display of this part:

  • title=true(Default Value): It will display the full current page title.
  • title=false: It will not display the current page title, the breadcrumb will stop at the previous category level.
  • title="自定义文本": You can usetitleThe parameter can be set to any text you want, for exampletitle="文章详情"So the last level of the detail page will be unifiedly displayed as “Article Details”.

For example, if you do not want the article title to be displayed on the article detail page but only the category, you can set it like this:

{% breadcrumb crumbs with title=false %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

3. Data call in multi-site scenarios

For users of secure CMS running multiple sites,siteIdThe parameter allows you to call data from other sites in specific situations.However, for breadcrumb navigation, we usually focus on the navigation path within the current site, so this parameter is not often used in the actual application of breadcrumbs. The system will intelligently generate breadcrumbs based on the site being visited.

Optimize template structure: improve code reuse and maintainability

In order to better organize your template code, it is usually recommended to place the breadcrumb navigation code snippet in a separate public file. In the template design conventions of Anqi CMS, /templateUnder the directorypartial/The catalog is the ideal place to store such code snippets.

You can create a name calledpartial/breadcrumb.htmlThe file, and place the above breadcrumbs Twig code in it. Then, on the pages where you need to display the breadcrumbs navigation (such asbash.html/index.htmlor a specific detail page template), useincludeLabel it to introduce:

{% include "partial/breadcrumb.html" %}

This modular design method not only makes your template structure clearer, but also helps to improve the reusability of the code, reduce repetitive work, and make website maintenance more convenient.

In short, AnQi CMS is simple yet powerfulbreadcrumbTags make it unprecedentedly simple to generate and display breadcrumb navigation in a website.Combine flexible parameter settings and modular template design, you can easily build a beautiful and practical navigation path, providing an excellent browsing experience for your website visitors.

Frequently Asked Questions (FAQ)

  1. Question: Why isn't the breadcrumb navigation of my website displayed, or displayed incorrectly?Answer: First, make sure you have correctly introduced the website templatebreadcrumbLabel, and spelled correctly.If the tag has been correctly introduced, please check if the current page has enough hierarchical information to generate breadcrumbs, for example, a single page without a category may only display 'Home'.Moreover, check if your URL rewriting rules are configured correctly, incorrect URL structure may cause the system to fail to correctly identify the page hierarchy.

  2. Question: How do I adjust the style of the breadcrumb navigation? Does it have a default style?Answer: Anqi CMS'breadcrumbThe tag is responsible for outputting the HTML structure and data of the breadcrumb navigation, and it does not provide default visual styles.You need to beautify the breadcrumb navigation through custom CSS styles, such as adjusting font size, color, spacing, background color, or adding separator icons, etc.<ul>/<li>and<a>Define the style with tags to match the overall design style of your website.

  3. Question: What page types does the breadcrumb navigation support? Can I use it on all pages?Answer: The breadcrumb navigation function of Anqi CMS is designed to be very intelligent and general.It can automatically identify and support various page types, including home pages, article list pages, article detail pages, product list pages, product detail pages, category list pages, and single pages, etc.breadcrumbThe label is automatically generated based on the level of the page and the relevance of the content to create the corresponding navigation path.You can use it on almost any page that needs navigation prompts to provide a consistent user experience.