In website content management, breadcrumb navigation plays a crucial role.It not only helps visitors clearly understand their location on the website and provides a convenient path to return to the previous page, but also reflects the hierarchical structure of the website from the side, which is greatly beneficial to user experience and search engine optimization.AnQiCMS as a powerful content management system naturally also provides a flexible way to manage and display this navigation.
Understanding the breadcrumb navigation tags in AnQiCMS
AnQiCMS provides a namedbreadcrumbThe template tag, specifically used for generating and controlling breadcrumb navigation in websites.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.).crumbs. ThiscrumbsEach element in the array represents a node in a path, containing information about the node.Name(Display text) andLink(link address).
Implementing dynamic breadcrumb navigation.
To display breadcrumb navigation on your website, you first need to find the appropriate template file to place the relevant code.Considering that breadcrumb navigation is typically a common element of a website, it is recommended that you place it in the public header or layout file.partial/Create a file in the directory, for example,partial/breadcrumb.htmland then through{% include "partial/breadcrumb.html" %}Import it into the main layout file (e.g.,bash.html）in it.
In the template file you choose (e.g.,partial/breadcrumb.html), you can use it as follows:breadcrumbTag 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,{% breadcrumb crumbs %}The tag captures the breadcrumb path information and assigns it tocrumbsthe variable. Then, we go through{% for item in crumbs %}the array in a loop, generating 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) only displays text without hyperlinks, as the user is already on this page.With such settings, a dynamic and clear breadcrumb navigation can be presented on your website.
Customize the home breadcrumb navigation name easily
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 PagebreadcrumbTags provide convenientindexParameter.
You just need tobreadcrumbtag.indexSpecify the parameter and the name you want to display. For example, if you want to change "Home" 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 %}
Through this simple parameter adjustment, your breadcrumb navigation can display a personalized home page name, enhancing the user experience to a new level.
Precisely control the display of the current page title in the breadcrumb
On detail pages such as article detail pages, product detail pages, etc., the last element of the breadcrumb navigation usually displays the full title of the page. AnQiCMS'sbreadcrumbTags also providetitleparameters for you to flexibly control the display method of this part.
titleThere are several usages of parameters:
title=true(Default behavior):The breadcrumb will display the full title of the current page.title=false:If you do not want the current page title to be displayed in the breadcrumbs and instead want the path to end at the parent category, you can use this setting.title="自定义文本":You can alsotitleThe 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 title of the article itself, 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 %}
This setting allows the breadcrumb navigation to be more concise and unified while providing a clear path.
Flexible application with tips
MasteredbreadcrumbThe core usage of the tag, you can beautify the breadcrumb navigation by combining CSS styles according to the design style and specific needs of the website, making it harmonious and unified with the overall page layout. 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 it manually.siteId.
Through these flexible configurations, AnQiCMS can help you build dynamic and personalized breadcrumb navigation, which not only enhances the user experience of the website but also makes the website's hierarchy structure clearer and more understandable.
Common Questions (FAQ)
1. Why is my breadcrumb navigation not displaying or displaying incompletely?
This is usually due to incorrect template file inclusion or incorrect tag parameter configuration. Please first confirm that you have placed the breadcrumb code in the correct template file (e.g.,partial/breadcrumb.html），and ensure that the file is properly included in the main layout file such asbash.html) to the same port of the AnQiCMS application instance (the default is usually{% include "partial/breadcrumb.html" %}correctly introduced. Next, checkbreadcrumbthe syntax of the tag and its internal loop, for examplecrumbswhether the variables are spelled consistently,item.Linkanditem.Namewhether they are called correctly.
How to make the breadcrumb display 'Article Details' instead of the actual title of the article on the article detail page?
You can usebreadcrumbTagstitleparameter to achieve. 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" instead of the original title of the article.
3. Can I customize the names of other pages in the breadcrumb besides the home page name?
breadcrumbTags are mainly used forindexParameter control of the home page name, and throughtitleParameter controls the display mode of the current page.For the middle category page, its name is usually taken directly from the original title of the category.item.NamePerform conditional judgment and replacement, but this will increase the complexity of the template, which is generally not recommended. Maintaining consistency in category names helps to clarify the structure of the website.