When browsing websites, we often notice a string 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 refer to as Breadcrumb Navigation.It not only helps users better understand the website structure and enhance 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' within the website and easily backtrack to the parent page, avoiding getting lost.Especially when the website content has a deep hierarchy, 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 website structure clues for search engine spiders, helping to crawl and understand the logical relationships between pages.At the same time, the links in the breadcrumb navigation are internal links, which can effectively pass page authority and optimize the internal link structure of the website, thereby helping to improve the keyword ranking of the page.
Convenience of automatically generating breadcrumb navigation by AnQi CMS
At the very beginning of its design, AnQi CMS fully considered website structuring 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 based on the type of the current page (whether it's an article detail page, a category list page, or a single page) and automatically construct a complete breadcrumb navigation path.This not only greatly saves our development and maintenance time, but also ensures the accuracy and consistency of navigation.
How to usebreadcrumbtags
The core of automatically generating breadcrumb navigation in AnQi CMS template system isbreadcrumbTags. Its usage is very intuitive, following the syntax rules of the Django template engine, even friends who are new to template development can quickly get started.
[en] Typically, we would place the breadcrumb navigation code snippet in a separate template file, such aspartial/breadcrumb.html[en] , then through it on the pages where breadcrumbs need to be displayedincludeTag reference it. The advantage of doing so is that it is convenient for maintenance and reuse.
Below isbreadcrumbThe basic usage of tags:
{# 假设这个代码片段在 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 the security CMS to fetch the breadcrumb navigation data of the current page and store these data in a variable namedcrumbs.crumbsis an array object, each element representing a node in the navigation path.
Next, we use{% for item in crumbs %}to iteratecrumbsthe array. In each iteration,itemThe variable will represent the current navigation node. We can get{{item.Name}}the display name of the node through{{item.Link}}Get the link address of the node. This will cause the system to automatically render a series of navigation texts with links.
breadcrumbParameters and customization of tags
breadcrumbTags also provide several practical parameters to help us customize more finely according to actual needs:
indexParameter: Customize the name of the homepageBy default, the starting point of the breadcrumb navigation is the "home page". If you wish to change this name to "my blog", "website homepage", or any other text, you can useindexParameter settings.{# 将首页名称设置为“我的主页” #} {% breadcrumb crumbs with index="我的主页" %}titleParameter: Controls the display of the current page title.In 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): Display the full document title and as the last non-clickable element.title=false: Do not display the title of the current page.title="自定义文字"[en] Show the specified text as the current page title instead of the actual page title.
{# 不显示当前页面的标题 #} {% breadcrumb crumbs with title=false %} {# 将当前页面的标题显示为“文章详情” #} {% breadcrumb crumbs with title="文章详情" %}siteId[en] Parameter: Data call under multiple sites (usually no setting is required)If you are using the multi-site management feature of Anqi CMS and need to call data from another site's template in a certain site, you can usesiteIdSpecify the target site parameter. However, in most single-site operation scenarios, this parameter does not need to be set, and the system will automatically identify the current site.
Actual application example
Combining these parameters with the generic 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 (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>Tag, and supplement witharia-labelandaria-currentAttribute, to enhance accessibility. Throughforloop.Last, we 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 intuitivebreadcrumbTags greatly simplify the implementation process of breadcrumb navigation, allowing us to focus on content and website strategy rather than繁琐的底层代码.
Common Questions (FAQ)
Q1: Why is my breadcrumb navigation not displaying the current article's title?
A1:This is usually becausebreadcrumbTagstitleThe parameter has been set tofalseor other custom values. Please check your template code in{% breadcrumb crumbs with ... %}this line, to ensuretitlethe parameter is either omitted (defaulttrue）either be explicitly settrue.
Q2: How can I change the text of 'Home' in the breadcrumb navigation?
A2：You can change it by settingbreadcrumbTagsindexAchieve it easily with parameters. 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 incorrect, or why are some pages not displaying breadcrumbs? A3:There may be several reasons for this.Firstly, make sure that the page type (article, category, single page, etc.) has a clear hierarchical relationship set in the Anqi CMS backend.Secondly, the configuration of pseudo-static rules may also affect the correct generation of breadcrumbs. Please check if the 'Pseudo-static Rules' under 'Feature Management' is configured correctly.If there is an issue 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.