In building user-friendly websites, breadcrumb navigation plays an indispensable role.It can not only intuitively show the user's current position on the website, avoid getting lost, but also optimize the website structure, which is very beneficial for search engine optimization (SEO).For AnQiCMS users, utilizing its powerful template tag system to dynamically generate and flexibly control breadcrumb navigation is the key to enhancing website experience.

AnQi CMS knows this point and therefore built-in powerful and flexible breadcrumb navigation functionality, you do not need complex programming knowledge, and can easily implement this feature in the website.

The core of dynamically generating breadcrumb navigation

In the AnQi CMS, the core of implementing breadcrumb navigation isbreadcrumbTag.This tag is designed to be very intelligent, it can automatically identify the hierarchical structure of the current page, whether it is an article detail page, a product list page, or other category pages, it can intelligently build a path from the homepage to the current page.

In your template file, just a few lines of code can bring up the complete breadcrumb navigation.Generally, we would place this code at the top of the website content, as it plays a crucial role in guiding users.partial/_breadcrumb.htmlThen, include this public template snippet on the pages where breadcrumbs need to be displayed:

{% breadcrumb crumbs with index="网站首页" title=true %}
<nav class="breadcrumb-nav">
    <ol>
        {% for item in crumbs %}
            {% if not forloop.Last %}
                <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
            {% else %}
                <li aria-current="page">{{ item.Name }}</li>
            {% endif %}
        {% endfor %}
    </ol>
</nav>
{% endbreadcrumb %}

In this code,{% breadcrumb crumbs ... %}The label will generate an array object named 【en】crumbswhich contains each step of the breadcrumb navigation. By using the loop, you can iterate over these steps and utilize 【en】{% for item in crumbs %}item.LinkRetrieve the corresponding link address,item.NameRetrieve the display name.

forloop.LastIt is a very useful auxiliary attribute that can determine whether the current loop is the last element.The last element of the breadcrumb navigation (i.e., the current page) is usually not linked or has a special style to differentiate it, which is designed to better prompt the user of their current location.

Customize the "Home" text and control the current page title

When building breadcrumb navigation, you may want to customize the starting "Home" text, or decide whether to display the title of the current page based on the page type. Anqi CMS'sbreadcrumbTags provide flexible parameters, allowing you to precisely control these details.

  1. Customize the 'Home' textBy default, the starting point of breadcrumb navigation is usually "Home". But if you want to change it to "Website Homepage", "Home", or any other text you wish, you can do so byindexParameters can be easily adjusted. For example, if you want the home page to display as 'My Blog':

    {% breadcrumb crumbs with index="我的博客" title=true %}
    {# 面包屑导航的遍历渲染代码 #}
{% endbreadcrumb %}

    So, the first element of the breadcrumb navigation will display as “My Blog” and link to the root directory of the website.

  2. Control whether to include the current page titleThis is an important design consideration in the breadcrumb navigation.Sometimes, you may want the breadcrumb navigation to display the full path, including the title of the current page; while sometimes, for simplicity or design requirements, you may only want to display up to the category level of the current page, without repeating the title of the current page.titleThe parameter provides three control methods:

    • title=true(Default behavior):Breadcrumbs navigation will include the full title of the current page.For example, in the article "News Center > Company News > Anqi CMS Release New Version", the breadcrumb will be displayed as "Home > News Center > Company News > Anqi CMS Release New Version".

      {% breadcrumb crumbs with index="网站首页" title=true %}
    {# 您的面包屑导航渲染代码 #}
{% endbreadcrumb %}

    • title=false:Breadcrumbs navigation willnotContains the title of the current page. In the above examples, the breadcrumb may only display as "Home > News Center > Company News".

      {% breadcrumb crumbs with index="网站首页" title=false %}
    {# 您的面包屑导航渲染代码 #}
{% endbreadcrumb %}

    • title="自定义文本":You can set a fixed display text for the current page instead of using the actual page title. For example, if you have a product detail page with a long breadcrumb path, you can replace the current page title with a concise 'Product Detail':

      {% breadcrumb crumbs with index="网站首页" title="产品详情" %}
    {# 您的面包屑导航渲染代码 #}
{% endbreadcrumb %}

      At this moment, on the specific product page, the last element of the breadcrumb will display as 'Product Details' instead of the specific name of the product.

By combining these parameters, you can flexibly display your breadcrumb navigation according to the overall design style and user experience requirements of the website.

Practical Tips and Suggestions

  • Style Customization:The visual presentation of breadcrumb navigation is equally important. With CSS, you can easily add styles to breadcrumbs, making them blend seamlessly with your website design. For example, usinginline-blockLayout arranges elements horizontally, add separators (such as>or/), and for the current pageliapply bold or different colors to elements.
  • Reuse template fragments:Encapsulate the breadcrumb navigation code in a separate template snippet (such aspartial/_breadcrumb.htmlIn it, it can greatly improve the reusability and maintainability of the code. When it is necessary to adjust the breadcrumb logic or style, only one file needs to be modified.
  • SEO-friendly:Breadcrumbs navigation clearly displays the hierarchical structure of the website, which helps search engines better understand your website content.Ensure that the links in the breadcrumbs are crawlable and the text descriptions are accurate to further enhance the SEO effect.

Anqi CMS'sbreadcrumbTags and parameters provide a simple yet powerful way to manage the breadcrumb navigation of a website.By flexibly using these features, you can provide users with clear guidance while enhancing the overall performance of the website.

Common Questions (FAQ)

Q1: Does breadcrumb navigation support multilingual sites?A1: The original support of AnQi CMS for multi-language functionality.When you configure breadcrumb navigation in a multilingual site environment, the system will automatically generate the corresponding 'Home' text based on the current language environment (if you have used the default value or not explicitly specified), and construct the breadcrumb path based on the multilingual title and link of the page.This means you do not need to configure breadcrumb logic separately for each language.

Q2: How to add styles and separators to breadcrumb navigation?A2: Breadcrumb navigation style is mainly controlled by CSS. You can set thenav.breadcrumb-nav/ol/liandaDefine styles for HTML elements. As for delimiters, the most common method is to use CSS pseudo-elements (such as::after) at eachliAdd a separator after the element, while avoiding adding one after the last element. For example: 

.breadcrumb-nav ol li + li::before {
    content: " > ";
    padding: 0 5px;
    color: #ccc;
}

Q3: How can I display breadcrumbs navigation only on specific pages or completely disable it on some pages?A3: If you encapsulate the breadcrumb navigation code in a template snippet (for example{% include "partial/_breadcrumb.html" %}Then it is very simple to control its display or not.You can include this snippet in the page template where you need to display breadcrumbs, and not include it in the page templates where you do not need them.ifuse logical judgment to conditionally render it, for example:

{% if current_page_has_breadcrumb %}
    {% include "partial/_breadcrumb.html" %}
{% endif %}

Here are thecurrent_page_has_breadcrumbNeed you to set in the controller layer or through other template variables. A simpler approach is to directly decide whether to include this segment based on the page template type.