Build a user-friendly and SEO-friendly website in AnQiCMS, breadcrumb navigation is an indispensable element.It can clearly show the user's current location, help users quickly backtrack, and provide valuable website structure information for search engines.AnQiCMS powerful template engine provides a simple and efficient way to dynamically generate these navigation paths.

AnQiCMS's template system uses syntax similar to Django template engine, which allows content developers to easily control the display of page content through tags and variables. To implement dynamic breadcrumb navigation, we mainly use a core tag——breadcrumb.

The core of dynamic breadcrumb navigation:breadcrumbtags

breadcrumbTags are designed by AnQiCMS specifically for generating breadcrumb navigation.It can intelligently identify the type of the current page, whether it is an article detail page, a category list page, or a single page, it can automatically construct a complete path from the homepage to the current page.This greatly simplifies the work of template development, eliminating the need for manual judgment of page type and hierarchy.

The basic usage format of this tag is as follows:{% breadcrumb 变量名称 with index="首页" title=true %}

Here,变量名称Is a custom name, you can name it according to your preference, for example:crumbsThis variable will carry the generated breadcrumb navigation data, it is an array object, and we need to iterate through it to display the content.

breadcrumbLabel supports several key parameters, allowing you to more flexibly control the display effect of breadcrumbs:

  • indexThis parameter is used to set the display name of "Home" in the breadcrumb navigation.By default, it will be displayed as “Home Page”.index="我的博客".
  • title：This parameter is mainly used for the document detail page, to determine whether the title of the current document is displayed at the end of the breadcrumbs. If set totrue(default), the title will be displayed; if set tofalseThen the title will not be displayed. You can also specify a string directly, for exampletitle="文章详情"Then the "Article Details" will be displayed at the end of the detail page.
  • siteId：For AnQiCMS multi-site management feature, if you need to call data from a specific site to generate breadcrumbs,siteIdParameter specifies the ID of the site. By default, if only one site is managed, or if breadcrumbs are only to reflect the current site, this parameter does not need to be set.

How to render breadcrumb navigation in the template

breadcrumbTags will store the generated breadcrumb path in an array variable, each element of which contains two fields:Name(link name) andLink（Link address）。Therefore, we usually combineforthe loop to traverse this array and render it to the page.

Below is a standard example that shows how to dynamically display breadcrumb navigation in AnQiCMS templates:

<div class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs %} {# 将生成的面包屑路径赋值给名为 'crumbs' 的变量 #}
        {% for item in crumbs %} {# 遍历 crumbs 数组中的每一个面包屑项 #}
            <li>
                <a href="{{ item.Link }}">{{ item.Name }}</a> {# 显示链接和名称 #}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ul>
</div>

In the above code:

  1. We first use{% breadcrumb crumbs %}Tags are used to generate breadcrumb data and store it incrumbsthe variable.
  2. Then, we use{% for item in crumbs %}to iteratecrumbsarray.
  3. In each loop,itemRepresents the current breadcrumb item, we can get it throughitem.LinkGet its link address, throughitem.NameGet its display name.
  4. For aesthetics and a good user experience, you can<li>Label inside adds CSS class name, or<a>Add other attributes to the tag to control styles through CSS.

Further customization:

If you want the home page to display as 'My Website' and not show the article title on the article detail page, you can set it like this:

<div class="breadcrumb-nav">
    <ul>
        {% breadcrumb path with index="我的网站" title=false %} {# 将首页名称设为"我的网站"，详情页不显示标题 #}
        {% for item in path %}
            <li>
                <a href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ul>
</div>

As mentioned in the template creation conventions, breadcrumb navigation is usually part of the 'code snippet' and can be stored independently in the template directory,partial/for example,partial/breadcrumb.htmlEnglish{% include "partial/breadcrumb.html" %}English

EnglishbreadcrumbTags make the implementation of dynamic breadcrumb navigation very intuitive and simple.It automatically handles complex logic, allowing developers to focus on page design and user experience, while ensuring the website structure is clear and beneficial for search engine optimization.

Common Questions (FAQ)

  1. Why did I set up breadcrumb navigation, but it is not displayed completely or accurately on some pages?This is usually due to incomplete data on the current page, or the breadcrumb tag parameters not matching the page type.For example, if the article does not have a clear category, the breadcrumb may not be able to generate a complete category path.CategoryIdon a single pageParentIdand confirmbreadcrumbTagstitleandindexParameter settings are as expected, avoiding display exceptions due to parameter conflicts.

  2. How can I customize the breadcrumb navigation style to make it more consistent with my website design?The style control of breadcrumb navigation is mainly completed by CSS. In the above code example, you can seedivandlielements are all equipped withclassProperties. You can add custom class names to them and then write CSS rules to beautify the breadcrumb layout, font, color, background, and more. For example, by settingul.breadcrumb-nav liandul.breadcrumb-nav li aThe style, you can implement different visual effects.

  3. siteIdWhat specific role does the parameter play in a multi-site environment? siteIdParameters are very useful in the multi-site feature of AnQiCMS. If you manage multiple independent websites in the AnQiCMS background management, each with its own content and structure, then calling in some templatebreadcrumbWhen using tags,siteId="X"The use of (X represents the ID of the target site) to specify which site's breadcrumb navigation is to be generated.This ensures that the breadcrumb path can accurately reflect the structure of the required site under cross-site content references or special design requirements, rather than the default current site.