In website content management, breadcrumb navigation plays a crucial role.It not only helps visitors clearly understand their position on the website, provides a convenient path to return to the upper-level page, but also reflects the hierarchy of the website from the side, which is greatly beneficial to user experience and search engine optimization.AnQiCMS is a powerful content management system and naturally provides a flexible way to manage and display this kind of navigation.
Understanding the breadcrumb navigation tags in AnQiCMS
AnQiCMS provides a namedbreadcrumbThe template tag is used specifically to generate and control the breadcrumb navigation in a website.This label can intelligently build a complete navigation path based on the current page level and type (such as article detail page, category list page, etc.).It generates an array containing the path information of the page, which we usually namecrumbs. ThiscrumbsEach element in the array represents a node in the path, containing the node'sName(display text) andLink(Link address).
Implement dynamic breadcrumb navigation by doing it yourself
To display the breadcrumb navigation on your website, you first need to find the appropriate template file to place the relevant code.Considering that breadcrumb navigation is usually a common element of a website, it is recommended that you place it in the public header or layout file.In the AnQiCMS template structure, you can find it in the current theme folder underpartial/Create a file in the directory, such aspartial/breadcrumb.htmlThen proceed{% include "partial/breadcrumb.html" %}Include it in the main layout file (for examplebash.html).
In the template file you have selected (for examplepartial/breadcrumb.html), you can use it like thisbreadcrumbtag to build breadcrumb navigation:
{% breadcrumb crumbs %}
<nav class="breadcrumb-nav">
<ul>
{% for item in crumbs %}
<li>
{% if item.Link %}
<a href="{{ item.Link }}">{{ item.Name }}</a>
{% else %}
<span>{{ item.Name }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endbreadcrumb %}
In this code block,{% breadcrumb crumbs %}The label captures the breadcrumb path information and assigns it tocrumbsthe variable. Then, we traversed{% for item in crumbs %}Loop through this array to generate a list item for each path node<li>Here's a little trick:{% if item.Link %}The judgment is to ensure that the last element in the path (usually the current page) is displayed as text without hyperlinks because the user is already on the page.By such settings, a dynamic and clear breadcrumb navigation can be displayed on your website.
Easily customize the home page name of the breadcrumb navigation
By default, the first element of the breadcrumb navigation is usually displayed as 'Home'.But in actual operation, you may want to change it to "Home Page", "Homepage", or other names that are more in line with the brand positioning.AnQiCMS'breadcrumbTags provide convenient for thisindexParameter.
You just need tobreadcrumbthe tag withindexParameter and specify the name you want to display. For example, if you want to change 'home page' to 'my website homepage', you can modify the code in this way:
{% breadcrumb crumbs with index="我的网站主页" %}
<nav class="breadcrumb-nav">
<ul>
{% for item in crumbs %}
<li>
{% if item.Link %}
<a href="{{ item.Link }}">{{ item.Name }}</a>
{% else %}
<span>{{ item.Name }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endbreadcrumb %}
By adjusting this simple parameter, your breadcrumb navigation can display a personalized home page name, enhancing the user experience to a new level.
Precisely control the current page title display in the breadcrumb
On the article detail page, product detail page, and other specific content pages, the last element of the breadcrumb navigation will usually display the full title of the page. AnQiCMS'sbreadcrumbTags also providedtitleParameters, allowing you to flexibly control the display of this part.
titleThere are several ways to use the parameter:
title=true(Default behavior):At this time, the breadcrumb will display the full title of the current page.title=false:If you do not wish to display the current page title in the breadcrumbs, but rather stop the path at the parent category, you can use this setting.title="自定义文本":You can also settitleThe parameter is set to a custom text string, for example, displaying "Article Details" on the article detail page instead of the specific title of the article.
For example, if you want to display "Read Details" in the breadcrumb of the article detail page instead of the article's title, you can set it like this:
{% breadcrumb crumbs with index="主页" title="阅读详情" %}
<nav class="breadcrumb-nav">
<ul>
{% for item in crumbs %}
<li>
{% if item.Link %}
<a href="{{ item.Link }}">{{ item.Name }}</a>
{% else %}
<span>{{ item.Name }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endbreadcrumb %}
Such settings make the breadcrumb navigation clearer while also more concise and unified.
Flexible application with tips.
MasteredbreadcrumbThe core usage of the label, you can beautify the breadcrumb navigation according to the design style of the website and specific requirements, combine it with CSS style to make it harmonious with the overall page layout. Although in the multi-site management scenario, althoughbreadcrumbTag supportsiteIdParameters are used to call data from specific sites, but for breadcrumb navigation, it is usually automatically identified that the current site is being accessed, so in most cases, you do not need to specify manuallysiteId.
With these flexible configurations, AnQiCMS can help you build a dynamic and personalized breadcrumb navigation that not only enhances the user experience of the website but also makes the hierarchical structure clearer and more understandable.
Frequently Asked Questions (FAQ)
1. Why is my breadcrumb navigation not displayed or incomplete?
This is usually due to an incorrect template file inclusion or incorrect label parameter configuration. Please first confirm that you have placed the breadcrumb code in the correct template file (for examplepartial/breadcrumb.html), and make sure that the file is included by the main layout file (such asbash.htmlPassed{% include "partial/breadcrumb.html" %}correctly included. Next, checkbreadcrumbwhether the syntax of the tags and their internal loops is correct, for examplecrumbswhether the variable spellings are consistent,item.Linkanditem.Namewhether they are called correctly.
How to make the breadcrumb of the article detail page display "Article Detail" instead of the actual title of the article?
You can usebreadcrumblabel'stitlethe parameter. Just settitleThe value of the parameter is set to the custom text you want to display, for example{% breadcrumb crumbs with title="文章详情" %}. So, on the article detail page, the last element of the breadcrumb will display as "Article Details", rather than the original title of the article.
3. Can I also customize the names of other pages in the breadcrumb besides the home page name?
breadcrumbTags mainly throughindexParameters control the name of the home page and throughtitleThe parameter controls the display style of the current page. For the middle category pages, the name is usually taken directly from the original title of the category.If you want to modify the display name of the middle category page, you need to modify the corresponding category title from the background, or modify it in the front-end template.item.NamePerforming conditional judgment and replacement, but this will increase the complexity of the template, which is usually not recommended. Maintaining consistency in category names helps clarify the structure of the website.