In modern website design, Breadcrumb Navigation plays a crucial role.It is like the 'footprint' of the user on the website, clearly showing the position of the current page within the overall website structure, making it easy for visitors to understand, thereby greatly enhancing the usability and user experience of the website.At the same time, a reasonably set breadcrumb navigation also helps search engines better understand the structure of the website, which is very beneficial for SEO optimization.
For users who use AnQiCMS to manage their website, adding and displaying dynamic breadcrumb navigation is a very simple and flexible task.AnQiCMS powerful template tag function, which can automatically generate the corresponding breadcrumb path according to the page type (such as article detail page, category list page, single page, etc.) and the hierarchical relationship, thus avoiding the麻烦的手动维护.
Core features and advantages of breadcrumb navigation in AnQiCMS
AnQiCMS was designed with full consideration of the diversity of website content display and SEO requirements.Its breadcrumb navigation tags can intelligently parse the URL and content structure of the current page, automatically building a logical navigation path.This means that, no matter how complex the content model of your website is, whether it is articles under multi-level categories or product detail pages, AnQiCMS can automatically generate correct and dynamic breadcrumbs.
The value brought by this automated feature is evident:
- Enhance user experience:Visitors always know where they are on the website, making it convenient to backtrack and explore.
- Optimize SEO structure:Search engine spiders can more clearly crawl the website hierarchy through breadcrumb navigation, which is helpful for page inclusion and weight transmission.
- Reduce maintenance costs:No need to manually create or update breadcrumbs for each new page or category.
- High flexibility:You can easily customize the breadcrumb display style, including the 'Home' text, whether to display the current page title, and so on.
Next, let's take a look together at how to add and display this practical dynamic breadcrumb navigation on the AnQiCMS website page.
How to add breadcrumb navigation: A step-by-step guide
In AnQiCMS, the breadcrumb navigation implementation mainly relies on its powerful template tag system, especiallybreadcrumbLabel.
Step 1: Determine the display location of the breadcrumb navigation
The breadcrumb navigation is usually displayed at the top of the website content, next to the navigation bar. In the template structure of AnQiCMS, you can choose to place the breadcrumb code in a common header file (for examplepartial/header.htmlorbash.html）中，such that all pages will automatically inherit the display. Of course, if you want a specific page or template (such as{模型table}/detail.htmlor{模型table}/list.html）has its own breadcrumbs and can also be directly added to the corresponding template file.
According to the basic conventions of AnQiCMS template creation, template files are usually stored in/templateThe directory, static resources are in/public/static/. You can find the appropriate file according to your template theme structure.
Step 2: Insertbreadcrumbtags
After determining the display location, we can insert the template file provided by AnQiCMS in EnglishbreadcrumbTagged. This tag is very smart, it is responsible for fetching and organizing all the data required for breadcrumb navigation.
The basic tag structure is as follows:
{% breadcrumb crumbs %}
{# 在这里循环显示面包屑路径 #}
{% endbreadcrumb %}
Here,crumbsis the variable name we specify for breadcrumb data. Oncebreadcrumbthe label is executed, all the built breadcrumb path information will be stored in thiscrumbsIn the variable, waiting for us to further process.
Step 3: Understand and usebreadcrumbThe parameters of the tag
breadcrumbThe tag provides several parameters to allow you to control the display effect of the breadcrumbs more flexibly:
index：Used to set the display text of "Home" in the breadcrumb navigation. The default value is "Home". If you want to change it to "Website Home" or any other text, you can set it like this:index="网站首页".title：Control whether the current page title is displayed in the breadcrumb navigation.title=true（Default value）：Display the full current page title.title=false：Do not display the current page title.title="自定义文本"If set to a specific string, it will display this custom text as the current page.
siteIdThis is an advanced parameter, mainly used for multi-site management scenarios. If you do not have multi-site requirements, it is usually not necessary to set it, and it will default to reading the breadcrumb data of the current site.
These parameters can be combined according to your actual needs. For example, if you want the 'home page' to display as 'my blog', and the current page title not to be displayed, it can be written as: {% breadcrumb crumbs with index="我的博客" title=false %}.
Fourth step: Display the breadcrumb path through the loop
breadcrumbthe tags you getcrumbsA variable is an array object that contains each level of breadcrumbLink name ()Name)andLink address (Link)。We need to use AnQiCMS'sforloop tags to iterate over this array and render it to the HTML page.
To better semanticize and style, we usually use ordered lists<ol>and list items<li>Build breadcrumbs navigation. At the same time, to distinguish the current page from the clickable upper-level page, we will also combineforloop.Lastproperty to determine whether it is the last element (i.e., the current page).
Below is a complete example code snippet that can be directly inserted into your template file:
<nav class="breadcrumb-nav">
<ol>
{# 使用`{-`和`-}`可以有效去除标签两侧的多余空白，让生成的HTML更整洁 #}
{%- breadcrumb crumbs with index="网站首页" title=true -%}
{%- for item in crumbs -%}
{%- if forloop.Last -%}
{# 最后一个元素（当前页面）通常只显示文本，不作为链接，并带有 aria-current 属性以增强可访问性 #}
<li aria-current="page">{{ item.Name }}</li>
{%- else -%}
{# 其他元素作为可点击的链接 #}
<li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
{%- endif -%}
{%- endfor -%}
{%- endbreadcrumb -%}
</ol>
</nav>
This code will dynamically generate an ordered list based on the current page, with each element representing a level of the website path.Non-current page will be displayed as a clickable link, while the current page will only display its name and mark it as the current position.
Customization and Optimization: Make the breadcrumbs fit your website better
Added the basic breadcrumb navigation, and you can further customize and optimize according to the design style of the website:
- Style beautification (CSS): By setting
<nav class="breadcrumb-nav">/<ol>/<li>and<a>Label add CSS style, you can fully control the appearance of the breadcrumb navigation, for example font size, color, separator style (you can use::afterpseudo elements to add>Symbols) and mouse hover effects, etc. - Adjust the text of 'Home' and the current page titleAs described earlier,
indexandtitleParameters, you can flexibly define the display method of the start and end points of the breadcrumb. For example, on some specific product detail pages, you may want to display only "Product Details" on the current page instead of the specific product name, in which case you can settitle="产品详情". - Multilingual supportIf your AnQiCMS website has enabled the multilingual function and uses it in the template,
{% tr "yourLocation" %}you can also consider using such translation tags,indexThe value of the parameter is set to the translation label, for exampleindex="{% tr "homePage" %}"to achieve multilingual switching of the 'Home' text of the breadcrumb.
Summary
AnQiCMS provides a powerful and easy-to-usebreadcrumbTags, allowing website operators to easily add dynamic breadcrumb navigation to pages.Through simple tag configuration and CSS styling, you can not only significantly improve the navigation experience of users on the website, but also lay a solid foundation for the website's SEO performance.Now, get to work and add this indispensable navigation element to your AnQiCMS website!
Common Questions (FAQ)
Q1: Why do some of my breadcrumb navigation not display or display incomplete?
A1: An