In website browsing, you may often see a row of text links at the top of the page or above the content area, like breadcrumbs, indicating your current position in the website and the path to reach this location.This is what we commonly call "Breadcrumb Navigation".It not only helps users quickly understand their level structure on the website and avoid getting lost, but also improves the usability of the website and plays a positive role in search engine optimization (SEO).For AnQiCMS users, it is very simple and efficient to implement such a function.

AnQiCMS was designed with a thorough consideration of the importance of website structure and user experience, therefore it is built-in with a powerful and easy-to-use auto-generated breadcrumb navigation feature.You do not need to write complex logic code to determine the type of the current page or the parent category. Just call a tag in the template, and the system will intelligently present you with a clear navigation path.

AnQiCMS How to automatically generate breadcrumb navigation

The core of generating breadcrumb navigation in AnQiCMS lies inbreadcrumbTags. This tag is designed to automatically identify the position information of the current page and, according to the hierarchical structure of the website, generate a complete path from the homepage to the current page.

Its basic usage is very intuitive. You need to place the following code snippet in your template file (usually the public header of the website).partial/header.htmlOr the special breadcrumbpartial/breadcrumb.htmlfile).

{% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code,{% breadcrumb crumbs %}Tell AnQiCMS to generate breadcrumb data and store it in a file namedcrumbs.crumbsVariables are arrays containing multiple objects, each representing a link in the navigation path, withName(link name) andLinktwo keyword fields. Through{% for item in crumbs %}Loop, we can iterate over these path items and render them into an HTML list structure.So, no matter which page the user accesses, whether it is the article detail page, category list page, or single page, the system can automatically generate the corresponding navigation path.

Customize your breadcrumb navigation: parameter details and practical skills

AnQiCMSbreadcrumbLabels not only provide the ability to generate automatically, but also allow you to customize flexibly through parameters, to better adapt to your website design and user needs.

  1. Customize Home Page Name (index)AnQiCMS defaults to displaying the start of the breadcrumb navigation as “Home Page”. If you wish to replace this term with another, such as “My Blog”, “Homepage”, or your brand name, you canindexThe parameter is easily realized.

    For example, if you want to display the homepage as “My Website”:

    {% breadcrumb crumbs with index="我的网站" %}
    {# ... 循环输出代码 ... #}
{% endbreadcrumb %}

  2. Control the display of the current page title (title)很多时候，当前页面的标题（例如文章标题或产品名称）会直接显示在面包屑导航的末尾。AnQiCMS 提供了灵活的选项来控制这一显示行为，避免与页面本身的 English<h1>Title repetition, optimize the visual effect.

    • title=true(Default): Show the full title of the current page.
    • title=false: Do not display the title of the current page, breadcrumb navigation stops at the previous level of the current page.
    • title="自定义标题"：Use the specific string you set to replace the actual title of the current page.

    For example, if you want to hide the current article's title in the breadcrumbs:

    {% breadcrumb crumbs with title=false %}
    {# ... 循环输出代码 ... #}
{% endbreadcrumb %}

    Or, would you like the unified 'Article Details' to be displayed at the end of the breadcrumb for all article detail pages?

    {% breadcrumb crumbs with title="文章详情" %}
    {# ... 循环输出代码 ... #}
{% endbreadcrumb %}

  3. Application in multi-site scenarios (siteId)For users who operate multiple sites, AnQiCMS also provides the ability to call cross-site data.siteIdThe parameter allows you to specify from which site to obtain the breadcrumb data.However, for most individual website operators, this parameter usually does not require manual setting, the system will default to reading the current site's configuration.

The optimization value of breadcrumb navigation

An well-designed and feature-complete breadcrumb navigation can not only make visitors feel convenient, but also be very beneficial for the website's search engine optimization (SEO).

  • Enhance User Experience (UX):Users can always know their location, reduce the sense of disorientation, and can quickly navigate back to the upper-level page by clicking on any link in the breadcrumb.
  • Optimize internal link structure:Breadcrumbs navigation automatically generates clear hierarchical links from the homepage to the content page, which constructs a logically strong internal link structure.Search engine crawlers will follow these links to crawl and index website content, which helps to improve the overall inclusion efficiency of the website.
  • Pass page weight:Internal links can effectively pass page authority, gradually transferring from high-authority homepage and category pages to content pages, which is very helpful for improving the ranking of content pages.
  • Enhanced keyword association:The link text in the breadcrumb navigation usually contains the core keywords of the page, which helps search engines better understand the theme and keyword association of the page content.
  • Improve search results display:Structured data (such asschema.orgofBreadcrumbList) Combined with breadcrumb navigation, it can sometimes make the website display more rich snippets on the search result page, including the breadcrumb path, thus improving the click-through rate.

Summary

AnQiCMSbreadcrumbTags provide a very convenient way to implement high-quality breadcrumb navigation for your website.Through simple tag calls and a few flexible parameters, you can easily generate clear navigation paths according to the website structure and customize them as needed.This not only greatly optimizes the user experience, but also lays a solid foundation for the website's search engine optimization.Leverage this feature to ensure that your website is not only rich in content but also offers an excellent navigation experience and SEO performance.

Common Questions (FAQ)

1. Why does my breadcrumb navigation not display the title of the current page?This is usually becausebreadcrumbTagstitleThe parameter has been set tofalseIt has been set to an auto value, or to a fixed string, causing it not to display the actual title of the current page. You can check the template.{% breadcrumb %}TagstitleParameter configuration, ensure it meets your expectations. If you want to display the current page title, make suretitleThe parameter is not set or set totrue.

2. How to fix the breadcrumbs navigation display disorder and incorrect path?The generation of breadcrumb navigation depends on the hierarchical structure of the website, especially the category of the article, the parent page of the single-page setting, etc. If the path is displayed incorrectly, you need to check first:

  • Content model and category settings:Ensure that your articles, products, or single pages are correctly associated with their respective categories.
  • Category hierarchy:Check if your categories have clear parent-child relationships.
  • Static rules:Confirm whether the pseudostatic rule configuration of the website is correct, as it directly affects the generation and parsing of URLs.If these settings are all correct but the problem still persists, it may be necessary to clear the website cache or check the code logic of the template files.

3. Can I change the breadcrumb navigation style?Of course. AnQiCMS'sbreadcrumbThe label is mainly responsible for providing navigation paths.data, and its display style on the page is.Display styleThen it is entirely determined by your HTML structure and CSS code. In the above example code, we used<ul>and<li>Label to build breadcrumbs, you can customize the design according to your needs by modifying these HTML structures and writing corresponding CSS styles to beautify the breadcrumbs navigation, for example, adjusting the font, color, size, spacing, or adding icons.