As an experienced website operations expert, I know that every detail of a website is crucial in terms of user experience and Search Engine Optimization (SEO).Crumbs navigation (Breadcrumb Navigation) is exactly such a seemingly minor element that can have a significant impact on the overall performance of a website.It not only helps users clearly understand their position on the website, but also provides important clues about the website structure to search engines.
AnQiCMS as an efficient and customizable enterprise-level content management system, naturally also provides strong and flexible support for this key feature.Today, I will delve into how to correctly use the breadcrumb navigation tags in AnQiCMS, helping you create a website with clear structure and user-friendly interface.
Understanding the role of breadcrumb navigation in AnQiCMS
AnQiCMS provided breadcrumb navigation tags, aimed at helping you easily display the hierarchical path of the current page on various pages of the website.It is not just a few lines of text links at the top of the page, but a complete path from the root directory of the website to the current page dynamically generated after AnQiCMS intelligently recognizes the page type (such as the home page, category page, article detail page, single page, tag page).This greatly enhances the user browsing experience, making them always know 'where I am', and it is also very beneficial for search engine spiders to crawl and understand the website structure, thereby indirectly optimizing the website's SEO performance.
Its core advantage lies in high automation and flexible customization.AnQiCMS's breadcrumb tags can automatically build the correct navigation path based on the classification, articles, tags, and other hierarchical relationships set in your content management backend, greatly reducing the burden of manual maintenance.
AnQiCMS breadcrumb navigation tag core function and parameters
In AnQiCMS template system, the realization of breadcrumb navigation mainly depends on a simple yet powerful tagbreadcrumb.
The basic usage method is as follows:{% breadcrumb 变量名称 with index="首页" title=true %}...{% endbreadcrumb %}
We come to analyze the various components and parameters of this tag step by step:
{% breadcrumb 变量名称 %}This is the beginning part of the tag,变量名称It is a local variable you define for the breadcrumb path list, usually we are accustomed to naming itcrumbsThis variable will contain an array object, where each element represents a link in the path, including the link name and link address.with index="首页"This parameter is used to specify the starting point of the breadcrumb path, which is the 'home' of the website—the display name of the home page.By default, if this parameter is omitted, AnQiCMS will display it as 'Home Page'."我的博客"or"品牌官网".title=true:titleThe parameter controls the display method of the last element in the breadcrumb path, that is, the current page title.- When set to
title=trueWhen the value is set to (default), AnQiCMS will automatically display the complete title of the current page at the end of the breadcrumb path. For example, on the article detail page, it will display the title of the article. - If set to
title=falseThe breadcrumb path will not include the title of the current page, but will end with the previous category or page. - You can also directly assign
titleA string value to the parameter, for exampletitle="文章详情"So, no matter what the actual title of the current page is, the last element of the breadcrumb will be displayed as the string you set.
- When set to
siteIdThis is an optional parameter, mainly used for multi-site management scenarios of AnQiCMS. If you have created multiple sites in the background and want to call the breadcrumb data of other sites in the template of the current site, you can do so by specifyingsiteIdParameters to implement accurately. Generally, if your website is operating as a single site, you can ignore this parameter....{% endbreadcrumb %}: This is the end part of the tag. Inbreadcrumbandendbreadcrumbbetween, you need to use aforin a loop to iterate overcrumbsEach breadcrumb item in the variable, and render it to the HTML structure.crumbsEach in the variableitemincludesName(link name) andLinkTwo fields: (link address).
Deploy the breadcrumb navigation in the template actually.
Breadcrumbs navigation is typically placed below the page header and above the content area, or integrated into the common part of the page, so that it can be uniformly displayed on all related pages. To maximize its reusability, I strongly recommend that you store it as a code fragment (fragment) in/template/your-template-name/partial/Under the directory, for example namedbreadcrumb.html, then in yourbase.htmlor other template files that need to display breadcrumbs through{% include "partial/breadcrumb.html" %}to use.
Here are two common code examples:
Example 1: Default usage, showing "Home" and the current page title
<nav class="breadcrumb-nav">
{% breadcrumb crumbs %}
<ol class="breadcrumb">
{% for item in crumbs %}
{# 判断是否是最后一个元素，以便决定是否添加链接 #}
{% if forloop.Last %}
<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 %}
</ol>
{% endbreadcrumb %}
</nav>
In this example,forloop.LastIt is an embedded loop variable used to determine if the current iteration element is the last in the loop.In this way, we can add different styles to the last element or remove the link, to comply with the common design specifications of breadcrumb navigation.
Example 2: Customizing the home page name and uniformly displaying "Article Details" as the end title
<nav class="breadcrumb-nav">
{% breadcrumb crumbs with index="我的网站主页" title="文章详情" %}
<ul class="breadcrumb-list">
{% for item in crumbs %}
{# 判断是否是最后一个元素，以便决定是否添加链接 #}
{% if forloop.Last %}
<li>{{item.Name}}</li>
{% else %}
<li><a href="{{item.Link}}">{{item.Name}}</a> <span class="separator">></span></li>
{% endif %}
{% endfor %}
</ul>
{% endbreadcrumb %}
</nav>
This example demonstrates how to change the homepage name to "My Website Homepage<span>Separate with delimiters to make the visual effect clearer.
Practical suggestions for optimizing breadcrumb navigation.
Although AnQiCMS's breadcrumb navigation tag feature is powerful and easy to use, but in order to achieve **effect, here are some additional optimization suggestions:
- Keep it simple and clearThe purpose of breadcrumb navigation is to provide a concise path, avoiding long or complex path names, and ensuring that each segment's name can directly reflect its content.
- Visual distinction：Use CSS styles to differentiate the breadcrumb navigation from other elements on the page, for example, by using smaller fonts, grayscale color schemes, or special icons as separators.The last element is usually not linked and is highlighted in bold or a different color.
- Do not replace the main navigation: Breadcrumbs navigation is an auxiliary navigation tool, it should not replace the main navigation menu of the website. They serve different user needs.
- Ensure crawlability：AnQiCMS自动生成的链接是标准HTML链接，对搜索引擎友好。Ensure that your CSS or JavaScript does not hinder search engines from crawling these links.
- Consider mobile adaptationIn mobile devices, screen space is limited.You can consider making the breadcrumb navigation responsive, for example, only showing key levels when the path is too long, or using scrolling to display the full path.
Summary
Breadcrumbs navigation is an indispensable element for building user-friendly and SEO-friendly websites. AnQiCMS offers its flexiblebreadcrumbLabels that allow website operators to easily implement this feature and customize it according to specific needs.Using and optimizing breadcrumbs correctly will bring clearer structure, better user experience, and better search engine rankings to your website.
Common Questions (FAQ)
Q1: AnQiCMS的面包屑导航是否会自动识别所有页面类型？ A1:是的，AnQiCMS的面包屑导航标签能够智能识别