When we are browsing websites, we often see a line of text at the top or above the content area, clearly indicating the position of the current page within the entire website structure, like "Home u003e Product Center u003e Some Product Category u003e Some Product Detail.This is what we commonly refer to as 'Breadcrumb Navigation'.It not only helps users quickly understand the content hierarchy of the website, avoid getting lost, but also plays an important role in user experience and search engine optimization (SEO).

The CMS knows the importance of breadcrumb navigation and therefore built a simple and efficient implementation method from the beginning of the system design, allowing website operators to easily display this navigation element on the page, thereby enhancing users' understanding of the website content structure.

How to implement breadcrumb navigation in Anqi CMS?

This core tag is{% breadcrumb %}It will automatically collect all parent paths of the current page until the homepage, and organize them into a list for you to use in the template.

Add breadcrumb navigation to your template

To display breadcrumb navigation on your website, we usually place it in a common code snippet, such as in the directory of your template file.partial/Create a folder in.breadcrumb.html文件，然后将其包含（include）到您的主模板文件（如base.html或每个页面的顶部）中。

首先，您可以在partial/breadcrumb.html文件中这样编写代码：

{# partial/breadcrumb.html 文件内容示例 #}
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    <a href="{{ item.Link }}">{{ item.Name }}</a>
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Next, you just need to add the following line of code in your main template file of your website (for examplebase.html) where you want the breadcrumb navigation to be displayed:

{# 在您的 base.html 或其他需要显示面包屑的模板文件中 #}
{% include "partial/breadcrumb.html" %}

This way, no matter which page the user visits, the system will automatically recognize and generate breadcrumbs that match the current page path.

Display of personalized breadcrumbs

The breadcrumb navigation tags of AnQi CMS also provide several parameters, allowing you to have more detailed control and personalized settings according to your actual needs.

  1. Customize the text of 'Home':By default, the first element of the breadcrumb navigation is “Home”. If you want to display other text, such as “My Blog” or your brand name, you can useindexset the parameter to:

    {% breadcrumb crumbs with index="我的博客" %}
    {# ... 您的循环代码 ... #}
{% endbreadcrumb %}

  2. Control the display of the current page title:The last item of the breadcrumb navigation is usually the title of the current page. You can accesstitleparameters to control its display style:

    • title=true(Default): Show the full title of the current page.
    • title=falseDo not show the title of the current page, breadcrumb navigation will end at the second last level.
    • title="自定义文本": Replace the title of the current page with custom text.
    {# 显示文章标题 #}
{% breadcrumb crumbs with title=true %} ... {% endbreadcrumb %}


{# 不显示文章标题 #}
{% breadcrumb crumbs with title=false %} ... {% endbreadcrumb %}


{# 显示自定义文本作为当前页面的名称 #}
{% breadcrumb crumbs with title="文章详情页" %} ... {% endbreadcrumb %}

  3. Data calling in multi-site environment (Advanced):If you have configured multiple sites in the AnQi CMS backend and wish to call data from other sites in the breadcrumb navigation of a particular site (this is usually a special requirement), you can usesiteIdParameter specifies the site ID. Generally, this parameter does not need to be set, and the system will automatically identify the current site.

Further optimization and usage suggestions

  • Maintain consistency:Strongly recommend setting the breadcrumb navigation'sincludeStatement placed on the global websitebase.htmlIn the template, this ensures a consistent navigation experience on all pages.
  • Visual style:Although the CMS provides features, the final visual effect of the breadcrumb navigation depends on your CSS style. You can customize it according to the overall design style of the website, forbreadcrumb-nav/breadcrumbandbreadcrumb-itemAdd custom styles to the class to make it better integrate with the page.
  • SEO-friendly:Breadcrumbs navigation helps search engines better understand your website structure, especially in websites with deep levels.It provides clear internal links, which has a positive impact on SEO.<nav>and<ol>).

By making reasonable use of the breadcrumb navigation feature of the Safe CMS, you can not only provide users with clearer website path guidance, effectively enhance the browsing experience, but also lay a solid foundation for the website's search engine optimization.

Common Questions (FAQ)

  1. Q: Why does my breadcrumb navigation only show the category and not the article title on the article detail page?A: This may be because you are{% breadcrumb %}put in the tagtitleparameter settingsfalse. Please check your template code to ensuretitleThe parameter has been set totrueor assigned the custom text you want to display, such as{% breadcrumb crumbs with title=true %}.

  2. Q: How should I set the "home" link of the breadcrumb navigation to display as "website homepage"?A: You can modify the display text of the homepage by setting the{% breadcrumb %}tag.indexparameter. For example, you can set it like this: {% breadcrumb crumbs with index="网站主页" %}.

  3. Q: The breadcrumb navigation style looks unattractive, does Anqi CMS provide a default style?A: The template tags of AutoCMS are mainly responsible for outputting structured data and HTML skeletons, without providing mandatory visual styles.The final style of breadcrumb navigation needs to be beautified through custom CSS.breadcrumb-nav/breadcrumb/breadcrumb-itemWrite style codes for HTML elements and class names to make them conform to the visual design of your website.