In website operation, a clear navigation path is crucial for user experience and search engine optimization.When a user is browsing deep pages on a website, an intuitive "Where am I" prompt can help them quickly locate and easily return to the parent directory.This kind of auxiliary navigation method is called breadcrumb navigation.AnQiCMS (AnQiCMS) comes with powerful breadcrumb navigation tags, allowing developers and content operators to easily display the current location path at the top of the page.

What is breadcrumb navigation and why is it important?

A breadcrumb navigation (Breadcrumb Navigation) is a type of auxiliary navigation that displays the user's current position on the website in the form of a path.It usually appears at the top of the page, presented as a chain-like structure such as "Home u003e Category u003e Subcategory u003e Current Page".

The importance of this navigation mode is reflected in the following aspects:

  1. Improve user experience:Help users quickly understand their position in the website structure, reduce the feeling of being lost, and provide a convenient way to return to the parent page.
  2. Optimize the website structure:Breadcrumbs navigation is an important part of the internal links of a website, which clearly shows the organization of the website content to search engines, helping search engines better crawl and understand the relationships between pages.
  3. Reduce bounce rate:When a user directly enters a deep page of a website through a search engine, breadcrumb navigation can quickly provide context, guide the user to explore more related content, thereby extending the stay time and reducing the bounce rate.

AnQi CMS fully considers these needs, making the implementation of breadcrumb navigation effortless through its flexible template tag system.

Using breadcrumb navigation labels in Anqi CMS

Anqi CMS provides a specialbreadcrumbLabel used to generate breadcrumb navigation paths in the template.This tag automatically identifies the type of the current page (home page, category page, content detail page, etc.) and dynamically generates the corresponding path.

Basic usage method

UsebreadcrumbThe label is very intuitive. You need to define a variable in the template to receive the list of navigation paths, then iterate through the list to display each path item.

{% breadcrumb crumbs with index="首页" title=true %}
    <ul>
        {% for item in crumbs %}
            <li>
                <a href="{{item.Link}}">{{item.Name}}</a>
            </li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code block:

  • {% breadcrumb crumbs ... %}Defined a namedcrumbsThe variable, it will contain each step of the breadcrumb path.
  • {% for item in crumbs %}TraversalcrumbsEach path item in the variable.
  • {{item.Link}}Represents the link address of the current path item.
  • {{item.Name}}Represents the display name of the current path item.

Parameter details

breadcrumbThe label also provides several practical parameters to help you better control the breadcrumb display effect:

  1. index(Home page name):This parameter is used to customize the starting point of the breadcrumb navigation, the default is "Home page". If you want to display it as "Website homepage" or other names, you can set it through this parameter.
    • Example:index="网站主页"
  2. title(Title Display):This parameter mainly controls whether the breadcrumb navigation shows the complete title of the current page when in content detail pages (such as article details, product details).
    • title=true：Show the complete current page title (default behavior).
    • title=false：Do not display the current page title.
    • title="文章详情"：Customize the display of specific text, for example, displaying "Article Details" on the article detail page instead of the specific article title.
  3. siteId(Site ID):If you are using the AnQi CMS multi-site management feature and need to call data from other sites, you can specify the site ID through this parameter.For most single-site users, this parameter is usually not required.

How do I add it to the template?

The practice is to place it in a common template file so that the breadcrumb navigation can be displayed consistently on all pages of the website, andincludetag introduced.

The AnQi CMS template structure usually places common parts (such as headers, footers, sidebars) inpartial/the directory. You can create a file namedpartial/_breadcrumb.htmlThe file, place the above breadcrumb code inside it.

<!-- partial/_breadcrumb.html -->
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol>
        {% breadcrumb crumbs with index="网站首页" title=true %}
            {% for item in crumbs %}
                <li {% if loop.last %}aria-current="page"{% endif %}>
                    {% if loop.last %}
                        <span>{{item.Name}}</span>
                    {% else %}
                        <a href="{{item.Link}}">{{item.Name}}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Tip:In the above code, we added a judgment.loop.lastTo identify whether the last element of the breadcrumb is. According to the accessibility guidelines (WCAG), the last element usually should not have a link, and it should addaria-current="page"Property, to better indicate the current page.

Then, in your main template file (usuallybase.html) Within the page, introduce this breadcrumb fragment at an appropriate location (for example, immediately following the page header or main content area):

<!-- base.html -->
<body>
    <header>...</header>
    {% include "partial/_breadcrumb.html" %}
    <main>...</main>
    <footer>...</footer>
</body>

This way, no matter which page the user visits, the breadcrumb navigation will automatically display at the top of the page and dynamically adjust according to the current page path.

Display of practical application scenarios

  • Homepage of the website:Breadcrumbs usually only display one entry such as "Home Page".
  • Category page:For example, when visiting the "News Center" category, the breadcrumbs will display as "Home Page > News Center".
  • Content detail page:If the user accesses the 'News Center' under 'Some News Title', the breadcrumb will display as 'Homepage > News Center > Some News Title'.
  • Single page:As in "About Us

Of Security CMSbreadcrumbThe label intelligently parses the current URL and content structure, automatically generates these paths, greatly simplifying the maintenance of website navigation.

Optimization suggestion

  1. Maintain consistency:Ensure that the breadcrumb navigation style and position are consistent throughout the website to avoid confusion during user use.
  2. Focus on style:Although Anqi CMS provides the HTML structure for breadcrumbs, its default style may be rather simple.You can customize the CSS to match the overall design style of the website and enhance the visual experience.
  3. Consider microdata:To better be understood by search engines, you can add Schema.org to the breadcrumb navigation HTML structureBreadcrumbListMicrodata marking. This helps search engines display rich summaries in search results, increasing click-through rates. The JSON-LD feature of Anqi CMS can assist in achieving this.

By following these steps, you can effectively implement and optimize the breadcrumb navigation in the Anqi CMS website, providing users with a more friendly browsing experience, and also laying a solid foundation for the website's SEO performance.

Frequently Asked Questions (FAQ)

Q1:Breadcrumb navigation will update automatically? Do I need to manually adjust when I add or modify a page?A1:No. It is from AnQi CMS.breadcrumbThe tag is dynamically generated path.When you add an article, modify a category, or update a page, the system will automatically update the breadcrumb navigation path based on its position in the website structure, without any manual adjustment.

Q2: If my website has a very deep hierarchy, will the breadcrumb navigation show all levels? Will it be too long?A2: Yes, Anqi CMS will display all paths from the homepage to the current page according to the actual level structure of your content.For websites with deep levels, the breadcrumb path can indeed be quite long.When designing styles, you can consider using ellipses or responsive design to make long paths more friendly on small-screen devices, such as displaying only part of the key levels or using scrolling effects.

Q3: Can I use custom text to replace the category name or page title in the breadcrumb?A3: Yes. For the current page title of the detail page, you can go throughtitleSpecify a custom text parameter, for example{% breadcrumb crumbs with index="首页" title="新闻详情" %}. For categories and articles themselves, their names and links in the breadcrumb are automatically read from the backend settings. If you want to change the text displayed in the breadcrumb, you usually need to modify it directly in the backend.