During web browsing, you may often see a line 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 can not only help users quickly understand their own level structure on the website, avoid getting lost, but also improve the usability of the website and play a positive role in search engine optimization (SEO).For AnQiCMS users, implementing such a feature is very simple and efficient.

AnQiCMS took full consideration of the importance of website structure and user experience from the beginning of its design, therefore it has built-in powerful and easy-to-use automatic breadcrumb navigation generation function.You do not need to write complex logic code to judge the current page type, parent category, just call a tag in the template, the system will intelligently present you with a clear navigation path.

How to automatically generate breadcrumb navigation in AnQiCMS

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

Its basic usage is very intuitive. You need to place the following code snippet in your template file (usually the common header of the website),partial/header.htmlor in a dedicated 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 block,{% breadcrumb crumbs %}Tell AnQiCMS to generate breadcrumb data and store it in a file namedcrumbs.crumbsA variable is an array containing multiple objects, each representing a link in the navigation path, and it hasName(link name) andLink(link address) two key fields. Through{% for item in crumbs %}Loop, we can iterate over these path items and render them into an HTML list structure.This, regardless of whether the user visits the article detail page, category list page, or single page, the system can automatically generate the corresponding navigation path.

Customize your breadcrumb navigation: parameters detailed explanation and practical skills

AnQiCMS'breadcrumbTags not only provide automatic generation capabilities, but also allow for flexible customization through parameters, to better adapt to your website design and user needs.

  1. Customize Home Page Name (index)AnQiCMS defaults to displaying the starting point of the breadcrumb navigation as 'Home'. If you wish to replace this term with another, such as 'My Blog', 'Homepage', or your brand name, you can do so byindexParameters are easily implemented.

    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)In many cases, the title of the current page (such as the article title or product name) is directly displayed at the end of the breadcrumb navigation. AnQiCMS provides flexible options to control this display behavior, to avoid it from clashing with the page itself.<h1>The title is duplicated, 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, the breadcrumb navigation stops at the previous level of the current page.
    • title="自定义标题"Replace the actual title of the current page with a specific string you set.

    For example, if you want not to display the title of the current article in the breadcrumb:

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

    Or, do you want the unified 'Article Details' to be displayed at the end of 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 data across sites.siteIdThe parameter allows you to specify from which site to retrieve the breadcrumb data.However, for most individual website operators, this parameter usually does not need to be manually set, the system will read the current site's configuration by default.

The optimization value of breadcrumb navigation.

A well-designed and functional breadcrumb navigation not only makes visitors feel convenient, but also greatly benefits the website's search engine optimization (SEO).

  • Improve User Experience (UX):Users can always know their location, reduce the feeling of being lost, 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 the page weight:Internal links can effectively pass page authority, gradually from high-authority homepages and category pages to content pages, which is very helpful for improving the ranking of content pages.
  • Enhance 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, sometimes makes the website display richer snippets on the search result page, including the breadcrumb path, thus improving click-through rate.

Summary

AnQiCMS'breadcrumbTags provide a very convenient way to implement high-quality breadcrumb navigation for your website.By simply calling the tags and a few flexible parameters, you can easily generate clear navigation paths according to the website structure and customize as needed.This greatly optimizes the user experience and lays a solid foundation for the website's search engine optimization.Make good use of this feature, so that your website can have excellent navigation experience and SEO performance at the same time.

Frequently Asked Questions (FAQ)

1. Why is my breadcrumb navigation not displaying the title of the current page?This is usually becausebreadcrumblabel'stitleThe parameter has been set tofalseOr it has been set to a fixed string, causing it not to display the actual title of the current page. You can check the template in{% breadcrumb %}label'stitleParameter configuration, ensure it meets your expectations. If you want to display the current page title, please make suretitleParameter is not set or set totrue.

How to fix the breadcrumbs navigation showing confusion and incorrect path?The generation of breadcrumb navigation depends on the hierarchical structure of the website, especially the categories of articles, the parent pages of single page settings, 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 a clear parent-child relationship.
  • Static rules:Confirm whether the website's pseudo-static rule configuration is correct, as it directly affects the generation and parsing of URLs.If these settings are all correct but the problem still exists, you may need 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'breadcrumbLabels are mainly responsible for providing navigation paths.dataand their display style on the page.Display styleIt 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 the HTML structure and writing corresponding CSS styles to beautify the breadcrumb navigation, such as adjusting font, color, size, spacing, or adding icons.