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

Anqi CMS understands this and therefore built-in strong and flexible breadcrumb navigation function, you do not need complex programming knowledge, can easily realize this function in the website.

The core of dynamically generating breadcrumb navigation

The core of implementing breadcrumb navigation in AnQi CMS isbreadcrumbThe 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 because it carries the important role of guiding users.Here is a basic breadcrumb navigation code snippet, you can place it in, for examplepartial/_breadcrumb.htmlIn such a public template fragment, then introduce it on the page 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 block,{% breadcrumb crumbs ... %}The label will generate a namedcrumbsarray object that contains each element of the breadcrumb navigation. By{% for item in crumbs %}loop, you can iterate through these elements and utilizeitem.LinkGet the corresponding link address,item.NameGet the display name.

forloop.LastIt is a very useful auxiliary attribute that can determine whether the current loop is the last element.Generally, the last element of the breadcrumb navigation (that is, the current page) is not linked, or it has special styles to distinguish, which is designed to better prompt users of the 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 current page title based on the page type. Anqi CMS'sbreadcrumbTags provide flexible parameters, allowing you to precisely control these details.

  1. Customize the 'Home' text.By default, the starting point of breadcrumb navigation is usually "home page". 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 homepage to display as 'My Blog':

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

    This, the first element of the breadcrumb navigation will be displayed as "My Blog", and linked 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 complete path, including the title of the current page;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.Successfully passed AnQi CMStitleThe parameter provides three control methods:

    • title=true(Default behavior):The breadcrumb navigation will include the full title of the current page. For example, in the article “News Center > Company News > AnQi CMS New Version”, the breadcrumb will display as “Home > News Center > Company News > AnQi CMS New Version”.

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

    • title=false:Breadcrumb navigation willNotInclude the title of the current page. In the above example, 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

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

      At this time, on the specific product page, the last element of the breadcrumb will display as "Product Details", rather than 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

  • Customize the style:The visual presentation of breadcrumb navigation is equally important. Using CSS, you can easily add styles to breadcrumbs to integrate them with your website design. For example, usinginline-blockLayout to align elements horizontally, add separators (such as>or/), and for the current pageliadd bold or different colors to elements.
  • Reuse template fragments:Encapsulate the breadcrumb navigation code in a separate template fragment (such aspartial/_breadcrumb.htmlIn this way, it can greatly improve the reusability and maintainability of the code. When you need to adjust the logic or style of the breadcrumbs, you only need to modify a single file.
  • SEO friendly:Breadcrumbs navigation clearly shows the hierarchy of the website, which helps search engines better understand your website content.Ensure that the breadcrumbs have clickable links and accurate text descriptions to enhance SEO effectiveness.

Of Security CMSbreadcrumbThe tag and its parameters provide a simple and powerful way to manage the breadcrumb navigation of a website.By flexibly using these features, you can provide users with clear path guidance and enhance the overall performance of the website.

Frequently Asked Questions (FAQ)

Q1: Breadcrumb navigation supports multilingual sites?A1: The AnQi CMS supports multilingual functionality. When you configure breadcrumbs navigation in a multilingual site environment, the system will automatically generate the corresponding "home page" text (if you have used the default value or have 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: The style of breadcrumb navigation is mainly controlled by CSS. You can set upnav.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 only display the breadcrumb navigation 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 controlling whether it is displayed or not is very simple. You can introduce this snippet in the page template where you need to display the breadcrumbs, and not introduce it in the page template where you do not need it.In addition, you can also combine in the page templateifuse logical judgment to conditionally render it, for example:

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

Herecurrent_page_has_breadcrumbYou need to preset it at the controller layer or through other template variables. A simpler approach is to directly determine whether to include the segment based on the page template type.