How to automatically generate the breadcrumb navigation of the page in the AnQiCMS template using the `breadcrumb` tag?

When browsing websites, we often notice a series of path information at the top or bottom of the page, which clearly indicates our current location, such as "Home > Category > Article Title."}This is what we commonly call Breadcrumb Navigation.It not only helps users better understand the website structure and improve the browsing experience, but also has an indispensable value for search engine optimization (SEO).

Why is breadcrumb navigation important?

For users, breadcrumb navigation is like a mini-map, allowing them to always understand their journey on the website and easily backtrack to the upper-level page, avoiding getting lost.Especially when the content hierarchy of a website is deep, the breadcrumb navigation becomes more prominent, providing a direct and convenient return path, greatly enhancing the user experience.

From the perspective of search engine optimization, breadcrumb navigation also plays an important role.It provides clear clues to search engine spiders about the website structure, helping to capture and understand the logical relationship between pages.At the same time, the links in the breadcrumb navigation are internal links, which can effectively pass on page authority, optimize the internal link structure of the website, and thereby help improve the keyword ranking of the page.

The convenience of automatically generating breadcrumb navigation in Anqi CMS

AnQi CMS was designed with full consideration of website structure and user experience, therefore, it built-in very convenient mechanisms to automatically generate breadcrumb navigation, without complex configuration or manual coding.By using a concise template tag, the system can intelligently judge the hierarchical relationship of the current page type (whether it is an article detail page, a category list page, or a single page) and automatically build a complete breadcrumb navigation path.This not only saves us a lot of time in development and maintenance, but also ensures the accuracy and consistency of navigation.

How to usebreadcrumbTag

The core of automatically generating breadcrumb navigation in Anqi CMS's template system isbreadcrumbLabel. Its usage is very intuitive, following the Django template engine syntax rules, even friends who are new to template development can quickly get started.

We usually place the breadcrumb navigation code snippet in a separate template file, for examplepartial/breadcrumb.htmlThen, in the page where the breadcrumb needs to be displayed throughincludeLabel it. The advantage of doing this is that it is convenient for maintenance and reuse.

Next isbreadcrumbBasic usage of the tag:

{# 假设这个代码片段在 partial/breadcrumb.html 文件中 #}
<div>
    {% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

In this code block,{% breadcrumb crumbs %}Tell AnQi CMS to retrieve the breadcrumb navigation data for the current page and store it in a namedcrumbs.crumbsis an array object, each element representing a node in the navigation path.

Next, we use{% for item in crumbs %}Loop throughcrumbsarray. In each iteration,itemthe variable will represent the current navigation node. We can use{{item.Name}}Get the display name of the node through{{item.Link}}Get the link address of the node. This way, the system will automatically render a series of navigation texts with links.

breadcrumbLabel parameters and customization

breadcrumbThe tag also provides several practical parameters, helping us to customize more finely according to our actual needs:

1. indexParameter: Customize the home page nameBy default, the starting point of the breadcrumb navigation is "Home Page". If you want to change this name to "My Blog", "Website Homepage", or other text, you can useindexSet the parameters.

   {# 将首页名称设置为“我的主页” #}
   {% breadcrumb crumbs with index="我的主页" %}
   

2. titleParameter: Controls the display of the current page titleIn some cases, you may not want the last element of the breadcrumb navigation (i.e., the title of the current page) to have a link, or you may want it to display different text.titleParameters can help us meet these needs.

   • title=true(Default): Displays the full document title and acts as the last non-clickable element.
   • title=false: Do not display the title of the current page.
   • title="自定义文字": Display the text you specify as the current page title instead of the actual page title.

   {# 不显示当前页面的标题 #}
   {% breadcrumb crumbs with title=false %}
   
   {# 将当前页面的标题显示为“文章详情” #}
   {% breadcrumb crumbs with title="文章详情" %}
   

3. siteIdParameter: Data call under multiple sites (usually no need to set)If you are using the multi-site management feature of Anqi CMS and need to call data from another site's template on a certain site, you can usesiteIdThe parameter specifies the target site. However, in most single-site operation scenarios, this parameter does not need to be set, as the system will automatically identify the current site.

Actual application example

Combining these parameters with the general HTML structure, we can build a more functional and flexible breadcrumb navigation. The following example shows how to useforloop.LastTo determine whether it is the last navigation item and add a different style to it (usually the last item does not need a link):

<nav aria-label="breadcrumb" class="my-3">
    <ol class="breadcrumb">
        {# 使用 index 参数定制首页名称，title 参数控制当前页面标题的显示 #}
        {% breadcrumb crumbs with index="安企CMS主页" title=true %}
        {% for item in crumbs %}
            {% if forloop.Last %}
                {# 最后一个导航项通常是当前页面，不加链接，并可能添加 active 类 #}
                <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
            {% else %}
                <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endif %}
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this example, we used HTML5's<nav>and<ol>Label, and supplemented witharia-labelandaria-currentProperties to enhance accessibility. Throughforloop.LastWe cleverly mark the last breadcrumb item (current page) asactiveStatus, and removed its link, which conforms to common design patterns.

Visible, Anqi CMS through simple and intuitive.breadcrumbThe tag greatly simplifies the implementation process of breadcrumb navigation, allowing us to focus on content and website strategy instead of繁琐的底层代码.

Frequently Asked Questions (FAQ)

Q1: Why is my breadcrumb navigation not displaying the title of the current article? A1: This is usually becausebreadcrumblabel'stitlethe parameter is set tofalseOr another custom value. Please check the template code in{% breadcrumb crumbs with ... %}this line, make suretitlethe parameters are either omitted (defaulttrue), either explicitly set totrue.

Q2: How do I change the text of the "Home" in the breadcrumb navigation? A2: You can set it throughbreadcrumblabel'sindexParameters can be easily implemented. For example, if you want to change 'Home' to 'Website Home Page', you can modify it like this: {% breadcrumb crumbs with index="网站主页" %}.

Q3: Why is my breadcrumb navigation path generation incorrect, or why are some pages not displaying breadcrumbs? A3: This may have several reasons. First, make sure that the page type (article, category, single page, etc.) has a clear hierarchy setting in the Anqi CMS backend.Secondly, the configuration of pseudo-static rules may also affect the correct generation of breadcrumbs, please check whether the pseudo-static rules in "Function Management" are configured correctly.If there is a problem on a newly created page, it may be necessary to ensure that the page has been published and has a clear category or parent relationship.