How to generate and display multi-level breadcrumb navigation in AnQi CMS?

In website content operation, a clear navigation path is crucial for user experience and search engine optimization.A good breadcrumb navigation can help users quickly understand the position of the current page in the website structure, and it is convenient for them to backtrack to the previous level or higher-level pages.AnQiCMS (AnQiCMS) knows this, and therefore provides a powerful and easy-to-use breadcrumb navigation feature that allows website administrators to easily generate and display multi-level breadcrumbs.

The core of implementing breadcrumb navigation in AnQi CMS lies in its built-in featurebreadcrumbThe tag is designed to automatically generate the complete path from the current page to the homepage, greatly reducing the workload of template development.It intelligently identifies the type of the current page (such as an article detail page, category list page, or single page) and automatically constructs a navigation chain containing all parent paths based on the actual hierarchy structure of the website.

To usebreadcrumbLabel, simply insert the corresponding code at the appropriate position in the website template.This is usually placed at the top content area of each page, near the main navigation bar.The basic syntax of this tag is{% breadcrumb crumbs with index="首页" title=true %}. Among them,crumbsIs the variable name you define for the breadcrumb list, you can use it in the subsequentforLoop through this variable to display each navigation item.

breadcrumbThe label provides several practical parameters, allowing you to flexibly control the display of breadcrumbs:

• indexParameterThis parameter is used to define the name of the starting point of breadcrumb navigation, which is the "home page" of the website. The default value is "home page", but you can change it to "my blog", "homepage", or any other text as needed, for exampleindex="我的网站主页".
• titleParameterIt determines how the current page title is displayed in the breadcrumb navigation. If set totrue(Default), the breadcrumb will include the full title of the current page. If set tofalseIf it is not displayed, the current page title will not be shown. In addition, you can also pass a custom string, such astitle="当前文章"Then the last item of the breadcrumb will display the text you specify.
• siteIdParameterFor users who have used the Anqicms multi-site management function, this parameter can be used when you want to retrieve data from other sites.In most cases, this parameter can be omitted, as the system will automatically identify the current site.

For example, in your template file (such asbash.htmlor a specific page.detail.html) In this way, you can render the breadcrumbs:

<div>
    <ul class="breadcrumb">
        {% breadcrumb crumbs with index="我的网站" title=true %}
        {% for item in crumbs %}
            <li>
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ul>
</div>

In this code block,forThe loop will iterate overcrumbsEach navigation item in the variable.item.LinkIt will get the link address of the navigation item,item.NameThen it will get the display name. We also go throughforloop.LastDetermine if the current loop is the last element, usually the last item of the breadcrumb navigation is not linked, or displayed in a different style to clearly indicate the current page.

Of Security CMSbreadcrumbThe tag can achieve multi-level navigation, thanks to its good support for the hierarchical relationship between content models, categories, and documents.When you create a category, you can specify its parent category to build a clear tree structure.Articles and products always belong to specific categories.breadcrumbThe tag automatically tracks these hierarchical relationships, for example, starting from the article detail page, it first finds the category to which the article belongs, then finds the parent category of the category, and finally reaches the homepage of the website, thereby dynamically generating the complete path.This automated processing method greatly simplifies the maintenance of the website structure and ensures consistency in navigation.

Using breadcrumbs effectively can greatly enhance the user's browsing experience on the website, reduce the feeling of being lost, and also have a positive impact on search engine optimization (SEO).It helps search engines better understand the hierarchy and association of website content through clear internal link structures, improving the efficiency of page crawling.At the same time, breadcrumb navigation often contains keywords, further enhancing the relevance of the page and helping to improve search engine rankings.Anqi CMS'sbreadcrumbThe tag embodies this concept, encapsulating complex technical details to allow operators to focus on content creation and optimizing the user experience.

Frequently Asked Questions (FAQ)

1. What if my breadcrumb navigation does not display or displays incorrectly?

First, please check if your template file uses it correctlybreadcrumbTags including{% breadcrumb crumbs ... %}and the following{% for item in crumbs %}Loop structure. Next, confirm that your content (article, category) has been correctly set with the category and hierarchy relationship.For an article to display its path correctly, it must be associated with a category.Finally, clear the system cache (in the "Update Cache" feature in the background) and the browser cache; sometimes cache issues can cause new template code or data updates to not take effect in a timely manner.

2. Does the Anqi CMS breadcrumb navigation support manually adding custom links or modifying the automatically generated hierarchy?

breadcrumbTags are mainly used to automatically generate navigation paths based on the website structure (categories, documents), emphasizing the accurate reflection of the current page's position in the structure.Therefore, it does not directly support manually inserting custom links that do not belong to the automatically generated hierarchy.If you need a more flexible navigation structure, such as displaying a set of completely customized navigation links on a specific page, you may consider using Anqi CMS'snavListLabel (used for custom navigation list) or directly write static links in the template, rather than relying onbreadcrumb.

3. Can I display a simple 'Home > Current Page' two-level breadcrumb on certain specific pages?

It can be done. You can changebreadcrumblabel'stitlethe parameter tofalseOr a custom phrase to control the display of the current page. You can also iterate overcrumbsvariables by judgingforloop.Firstorforloop.LastSelectively display or hide the breadcrumbs at intermediate levels. For example, you can only display the first and last.itemOr based onitem.Linklength oritem.NameThe content is judged, only the level you want to display is output.However, the most direct way is to render the simplified breadcrumb code conditionally based on the page context (such as through template variables to determine whether the current page is the homepage or a specific type of detail page), or to completely hide the breadcrumbs.