As an experienced website operations expert, I am well aware of the importance of breadcrumb navigation in enhancing user experience and optimizing search engine rankings (SEO).It can clearly show the user's current position on the website, avoid getting lost, and help search engines understand the hierarchical structure of the website.Today, let's delve into the specific performance and flexible configuration methods of breadcrumb navigation in AnQiCMS for single page (Page) type content.
The beacon of website operation: The mystery and practice of AnQiCMS single-page breadcrumb navigation
In modern web design, breadcrumbs have become an indispensable part.It acts as a guide, allowing visitors even if they are in a deep corner of the website, to clearly know where they 'came from and where they are'.For AnQiCMS, this content management system, known for its efficiency and flexibility, also has a powerful and intuitive implementation of breadcrumb navigation, especially in typical single-page (Page) type content such as "About Us" and "Contact Information", although the hierarchy is relatively simple, its role is still not negligible.
Default behavior of AnQiCMS single-page breadcrumb navigation
In AnQiCMS, single page content (we usually create and edit through the 'Page Resources' under 'Page Management', for example/help-source-page.mdThe "About UsThis means that their URL paths are often relatively flat.Home > [Current Single Page Name]Such a form.
The system will intelligently identify the type of page being accessed.When you visit a single page, AnQiCMS will automatically take the root directory (home page) of the website as the starting point of the breadcrumb, and the title of the current single page as the end point of the breadcrumb.www.example.comThe page you are visiting is named "About Us", and its URL may be.www.example.com/about-us.htmlThen the default breadcrumb navigation will display as "Home > About Us".This default behavior can meet the basic user navigation needs and also provides clear page structure information for SEO.
Flexible configuration: control the display of breadcrumbs on a single page.
AnQiCMS provides powerful template tag features, among whichbreadcrumbThe label is the key to controlling breadcrumb navigation.By cleverly using this tag and its parameters, we can fully customize the display of single-page breadcrumbs to better match the website's design style and operational strategy.
1. Basic usage and structure presentation
in AnQiCMS template files (such as the default single page templatepage/detail.htmlOr throughdesign-director.mdCustom single page template) You can use the following code to include breadcrumb navigation:
{% breadcrumb crumbs %}
<div class="breadcrumb-nav">
{% for item in crumbs %}
<span class="breadcrumb-item">
{% if not forloop.Last %}
<a href="{{ item.Link }}">{{ item.Name }}</a>
<span class="separator">/</span>
{% else %}
<span>{{ item.Name }}</span>
{% endif %}
</span>
{% endfor %}
</div>
{% endbreadcrumb %}
In this code block,{% breadcrumb crumbs %}Tags will generate a name calledcrumbsThe array object, which contains each link in the breadcrumb path. We useforLoop through thiscrumbsarray, eachitemContainsName(link name, such as "Home" or "About Us") andLink(Link address). Through judgmentforloop.LastWe can add a link to the last element (i.e., the current page) and remove the separator to better present the final state of navigation.
2. Customize the home page display name
By default, the first element of the breadcrumb navigation is usually displayed as "HomeindexParameters can be put to good use.
{% breadcrumb crumbs with index="我的网站主页" %}
{# ... 循环输出面包屑的代码 ... #}
{% endbreadcrumb %}
Just inbreadcrumbthe tag withwith index="您的自定义名称"You can easily change the display text on the homepage to enhance the personalized experience of the website.
3. Fine control of the display of single page titles.
For single-page content, sometimes the title of the page is already very prominent in the page body, and displaying it in full in the breadcrumb may seem redundant. At this point,titleThe flexible use of parameters is particularly important.
- The default page title is displayed:
title=true(This is the default behavior, usually no explicit setting is required). The breadcrumb will display as "Home > Current Single Page Full Title". - Do not display page title:
title=false. If you want the breadcrumb to only display to the 'Home' page, or if the current page title is already highlighted elsewhere on the page, you can set it totitle=falseAt this time, the breadcrumb will only contain “Home”. - Display custom page title:
title="自定义名称". If you find the original title of a single page too long, or want to use simpler words in the breadcrumbs, you can directly assigntitleA string parameter. For example, simplify 'Company development history and prospects' to 'Development history'.
{# 示例：不显示单页面标题 #}
{% breadcrumb crumbs with title=false %}
{# ... 循环输出面包屑的代码 ... #}
{% endbreadcrumb %}
{# 示例：自定义单页面标题在面包屑中的显示 #}
{% breadcrumb crumbs with title="企业简介" %}
{# ... 循环输出面包屑的代码 ... #}
{% endbreadcrumb %}
By combining these parameters, you can make the breadcrumb navigation on a single page both concise and provide users with effective path references.
4. Advanced usage for multi-site (siteId)
Although breadcrumbs for single-page content usually only involve the current site, but AnQiCMS as a system that supports multi-site management (/AnQiCMS 项目优势.mdmentions the core feature ofbreadcrumbtags are reservedsiteIdParameter. If you have special requirements to display the breadcrumb path of other sites in the current site template (for example, the display of a global single-page in different child sites), you can do it bysiteIdSpecify the target site's data. However, for the vast majority of single-page scenarios, this parameter is usually not required.
Tips for practical application and optimization
- Code placement:It is recommended to place the breadcrumb navigation code snippet in the public header template file of the website (such as
partial/header.html,/design-director.mdmentioned in it, and through{% include "partial/header.html" %}Introduce it to each page template. This ensures a unified and easy-to-maintain breadcrumb style across the entire site. - Style beautification:AnQiCMS's breadcrumb tags mainly output structured HTML, and their visual effects depend entirely on your CSS style.Ensure that the breadcrumb is combined with the overall design of the website, adding appropriate font, color, size, and spacing to ensure its beauty and readability.
- SEO friendly:A clear breadcrumb structure is very helpful for search engine spiders to understand the hierarchy of website content.Ensure that each breadcrumb link is valid and points to the correct target page.
/help-source-page.mdThe "Custom URL" field will directly affect the name and link displayed in the breadcrumbs, so it should be set cautiously in the background management, maintaining relevance and standardization.
Summary
The breadcrumb navigation feature of AnQiCMS, even in seemingly simple single-page content, showcases its exquisite design and practicality. By using it flexiblybreadcrumblabel'sindexandtitleParameters, website operators can easily customize a navigation experience that meets user habits and also considers SEO requirements.From the concise path of "Home u003e About Us" to the personalized expression of "My Brand Homepage u003e Company Profile", AnQiCMS can help you a lot, making your website navigation more intelligent and efficient.
Frequently Asked Questions (FAQ)
Q1: Why is the breadcrumb navigation of a single-page content usually only as simple as "Home u003e Page Name", unlike the multi-level hierarchy in an article list?
A1: This is because the design intention of the Single Page (Page) type is to display independent, non-hierarchical information, such as "About UsThey are usually mounted directly under the root directory in the website structure and do not belong to a specific category or subdirectory.Therefore, its breadcrumb path naturally only contains the 'home page' and its own title, reflecting its flat characteristics.