How to implement dynamic display of breadcrumb navigation in AnQi CMS templates?

In website operation, Breadcrumb Navigation plays a crucial role.It can not only visually display the user's position hierarchy on the website, helping users understand the relationship between the current page and the entire website structure, but also effectively improve the user experience, reduce the bounce rate, and have a positive impact on search engine optimization (SEO).For websites built using AnQiCMS, implementing dynamic breadcrumb navigation is a simple and efficient feature enhancement.

AnQiCMS as an enterprise-level content management system developed based on the Go language, its template system adopts syntax similar to the Django template engine, making the creation of templates and the invocation of content very intuitive. The system is built with a rich set of template tags, including those specifically designed for generating breadcrumb navigation.breadcrumbLabel. The clever design of this label greatly simplifies the work of developers, allowing us to easily dynamically display breadcrumb navigation that matches the current page path on various pages of the website (whether it is the homepage, category list page, article detail page, or single page).

Skillfully utilize the built-in features of AnQiCMSbreadcrumbTag

To implement the dynamic display of breadcrumb navigation, the core is to make use of the features provided by AnQiCMSbreadcrumbThe tag can automatically identify the type and hierarchy of the current page and generate a list of all hierarchical paths.

First, let's get to knowbreadcrumbThe basic structure and common parameters of tags:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 循环输出面包屑路径 #}
{% endbreadcrumb %}

Here:

• crumbsis a variable name we define to storebreadcrumbThe breadcrumb path list generated by the tag. You can use any variable name you think is appropriate.
• index="首页"This parameter is used to set the display name of the home page in the breadcrumb navigation.By default, it will display as "Home
• title=trueThis parameter mainly takes effect in articles or single-page detail pages, it determines whether the title of the current page is displayed as the last item in the breadcrumb path. If set totrueIt will display the full document title if set tofalseThe title will not be displayed if set totitle="文章详情"This will always display as "Article Details" regardless of the current article title.
• siteIdIn most cases, you do not need to set it manually, but if you have configured multi-site management in the AnQiCMS backend and need to call data from a specific site to generate breadcrumbs, you can specify the site ID with this parameter.

WhenbreadcrumbAfter the label is executed, it will assign the generated breadcrumb path to an array object.crumbsVariable. Each element in this array represents a level in the path, and each element contains two key fields:

• Name: Indicates the display name of the level (for example, "News Center", "Company Profile", or article title).
• Link: Indicates the URL address corresponding to the level.

Integrate breadcrumb navigation into the template

UnderstoodbreadcrumbAfter understanding the principle of tags, integrating it into your AnQiCMS template becomes very simple.The breadcrumb navigation is usually placed at the top content area of the website page, such as below the header or above the main content.

Here is an example of a typical breadcrumb navigation code, you can place it in your template file (such asdetail.html/list.htmlorindex.htmlor even publicpartial/header.htmlorbase.htmlThrough, andincludeorextendsIntroduced):

<nav class="breadcrumb-nav">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if not loop.last %} {# 判断是否是最后一个元素 #}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                        <span class="breadcrumb-separator">/</span>
                    {% else %}
                        <span>{{ item.Name }}</span> {# 最后一个元素通常不带链接 #}
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

In this code block:

1. We use{% breadcrumb crumbs with index="首页" title=true %}Tag to get breadcrumb data and store it incrumbsthe variable.
2. {% for item in crumbs %}The loop will iterate overcrumbsEach level of the breadcrumb array.
3. loop.lastIsfora special variable provided by the loop to determine the current loop iterationitemIs it the last element in the array. Usually, the last item of the breadcrumb navigation only displays text and does not contain links.
4. {{ item.Link }}and{{ item.Name }}Then the links and names of each level were output separately.
5. breadcrumb-separatorandbreadcrumb-itemThese CSS class names, you can adjust them according to your website design, and beautify the breadcrumb display effect through CSS styles, so that it matches the overall style of your website.

In this way, no matter which page the user visits, AnQiCMS will automatically generate and display the corresponding breadcrumb navigation according to the actual path of the current page.For example, when a user enters the "Product Center

This dynamic implementation not only saves a lot of time manually coding, but also ensures the accuracy and consistency of website navigation, thereby providing visitors with a seamless and pleasant browsing experience.

Summary

AnQiCMS with its powerful template tag system makes it extremely simple and efficient to implement dynamic breadcrumb navigation on the website.Just a few lines of template code can significantly improve the user experience and search engine optimization of your website.breadcrumbTags and their flexible parameter configuration can help you easily build high-quality websites with clear structure and convenient navigation.

Frequently Asked Questions (FAQ)

Q1: What should I do if the breadcrumb navigation does not display or displays incorrectly?A1: Please check firstbreadcrumbAre the labels spelled correctly, parameters?indexandtitleIs the value set as expected. Secondly, confirm that your page data (such as category ID, article title, etc.) has been loaded correctly. In development mode, you can try using{{ crumbs|dump }}(to importtag-filters.mdindumpFilter) or output temporarily in the template{{ crumbs }}To viewcrumbsWhether the variable contains the expected data structure. IfcrumbsEmpty, it may be that the current page cannot recognize its level or the data has not been passed correctly. Please check the page category or article ID to ensure it is valid.

Q2: How to customize the breadcrumb navigation style?A2: The code example provided in the article used<nav class="breadcrumb-nav">/<ol class="breadcrumb">and<li class="breadcrumb-item">such HTML structure and CSS class names. You can edit the CSS file of the website (usually located/public/static/css/Under the directory), customize the style rules for these class names, such as adjusting font size, color, spacing, background, etc., to perfectly blend with your website design style.AnQiCMS advocates for the separation of style and content, making it convenient for you to make flexible visual adjustments.

Q3:titlethe parameter totrueWhat is the difference between setting it and setting a specific string?A3: Whentitlethe parameter totrueAt the time, on the article or single-page detail page, the last item of the breadcrumb navigation will dynamically display the actual title of the current page (for example, the title of the article'sTitleField value).For example, if you set it to a specific stringtitle="最新动态"Then no matter what the actual title of the current page is, the last item of the breadcrumb will be displayed as the string you specified, "latest dynamic".This is very useful when you want to use unified final navigation text for a specific page type.