How to add and display dynamic breadcrumb navigation on a webpage?

In modern web design, breadcrumb navigation plays a crucial role.It's like a user's 'footprint' on a website, clearly showing the position of the current page within the overall site structure, making it easy for visitors to understand and greatly improving the website's usability and user experience.At the same time, reasonably set breadcrumb navigation also helps search engines better understand the structure of the website, which is very beneficial for SEO optimization.

For users who use AnQiCMS to manage websites, adding and displaying dynamic breadcrumb navigation is a very simple and flexible thing.AnQiCMS powerful template tag function, which can automatically generate the corresponding breadcrumb path according to the page type (such as article detail page, category list page, single page, etc.) and hierarchical relationship, and eliminates the麻烦 of manual maintenance.

Core features and advantages of breadcrumb navigation in AnQiCMS

AnQiCMS was designed with full consideration of the diversified display of website content and SEO requirements.It can intelligently parse the current page's URL and content structure to automatically build a logical navigation path.This means that, regardless of how complex your website's content model is, whether it is articles under multi-level categories or product detail pages, AnQiCMS can automatically generate correct and dynamic breadcrumbs.

The value brought by this automated feature is self-evident:

• Improve user experience:Visitors always know where they are on the website, making it convenient to backtrack and explore.
• Optimize SEO structure:Search engine spiders can more clearly crawl the website hierarchy through breadcrumb navigation, which helps in page inclusion and weight transmission.
• Reduce maintenance costs:Do not manually create or update breadcrumbs for each new page or category.
• High flexibility:You can easily customize the breadcrumb display, including the 'Home' text, whether to display the current page title, and so on.

Next, let's take a look at how to add and display this practical dynamic breadcrumb navigation on the AnQiCMS website page.

How to add breadcrumb navigation: A practical guide

In AnQiCMS, the implementation of breadcrumb navigation mainly relies on its powerful template tag system, especiallybreadcrumb.

Step 1: Determine the display position of the breadcrumb navigation

usually, breadcrumb navigation is displayed at the top of the website content, adjacent to the navigation bar below. In the AnQiCMS template structure, you can choose to place the breadcrumb code in a common header file (such aspartial/header.htmlorbash.html) in, so all pages will automatically inherit the display. Of course, if you want a specific page or template (such as{模型table}/detail.htmlor{模型table}/list.html) Has its own breadcrumbs and can also be directly added to the corresponding template file.

According to the basic conventions of AnQiCMS templates, template files are usually stored in/templatedirectory, static resources are in/public/static/. You can find the appropriate file according to your template theme structure.

Step Two: InsertbreadcrumbTag

After determining the display location, we can insert the AnQiCMS providedbreadcrumbThe tag was labeled. This tag is very intelligent, it is responsible for fetching and organizing all the data needed for breadcrumb navigation.

The basic tag structure is as follows:

{% breadcrumb crumbs %}
    {# 在这里循环显示面包屑路径 #}
{% endbreadcrumb %}

here,crumbsIs a variable name we specify for breadcrumb data. OncebreadcrumbThe label execution is complete, all the built breadcrumb path information will be stored in thiscrumbsvariable, waiting for us to further process.

Step 3: Understand and usebreadcrumbTag parameters

breadcrumbThe tag provides several parameters to allow you to more flexibly control the display effect of breadcrumbs:

• indexUsed to set the display text of the "Home" in the breadcrumb navigation. The default value is "Home". If you want to change it to "Website Home" or any other text, you can set it like this:index="网站首页".
• title: Control whether the breadcrumb navigation displays the title of the current page.
  • title=true(Default): Display the full title of the current page.
  • title=false：Do not display the current page title.
  • title="自定义文本"If set to a specific string, it will display the custom text as the current page.
• siteIdThis is an advanced parameter, mainly used for multi-site management scenarios. If you do not have multi-site needs, it is usually not necessary to set it, it will default to reading the breadcrumb data of the current site.

These parameters can be combined according to your actual needs. For example, if you want the home page to display as "My Blog" and the current page title not to be displayed, it can be written as: {% breadcrumb crumbs with index="我的博客" title=false %}.

Step 4: Display the breadcrumb path through a loop

breadcrumbTags retrieved from comments.crumbsThe variable is an array object that contains each level of breadcrumbLink name (Name)andLink address (Link)We need to use AnQiCMS'sforloop tags to traverse this array and render it on the HTML page.

To better semantically and stylistically control, we usually use ordered lists<ol>and list item<li>Build breadcrumb navigation. At the same time, to distinguish between the current page and the clickable previous level page, we will combineforloop.Lastthe attribute to determine whether it is the last element (i.e., the current page).

Here is a complete example code snippet that can be directly inserted into your template file:

<nav class="breadcrumb-nav">
    <ol>
        {# 使用`{-`和`-}`可以有效去除标签两侧的多余空白，让生成的HTML更整洁 #}
        {%- breadcrumb crumbs with index="网站首页" title=true -%}
            {%- for item in crumbs -%}
                {%- if forloop.Last -%}
                    {# 最后一个元素（当前页面）通常只显示文本，不作为链接，并带有 aria-current 属性以增强可访问性 #}
                    <li aria-current="page">{{ item.Name }}</li>
                {%- else -%}
                    {# 其他元素作为可点击的链接 #}
                    <li><a href="{{ item.Link }}">{{ item.Name }}</a></li>
                {%- endif -%}
            {%- endfor -%}
        {%- endbreadcrumb -%}
    </ol>
</nav>

This code will dynamically generate an ordered list based on the current page, with each element representing a level of the website path.The non-current page will be displayed as a clickable link, while the current page will only display its name and mark it as the current location.

Customize and optimize: Make the breadcrumbs more fitting for your website

After adding the basic breadcrumb navigation, you can further customize and optimize according to the website design style:

1. Styling Enhancement (CSS): To add for<nav class="breadcrumb-nav">/<ol>/<li>as well as<a>Add CSS style to the label, you can fully control the appearance of the breadcrumb navigation, such as font size, color, separator style (you can use::afterpseudo-element to add>Symbols), as well as mouse hover effects, etc.
2. Adjustment of the "Home" text and the current page titleAs mentioned before, throughindexandtitleParameters, you can flexibly define the display method of the start and end points of the breadcrumb. For example, on some specific product detail pages, you may want the current page to only display "Product Details" instead of the specific product name, in which case you can settitle="产品详情".
3. Multilingual SupportIf your AnQiCMS website has enabled the multilingual function and uses it in the template{% tr "yourLocation" %}such translation tags, you can also consider toindexThe value of the parameter is set to a translation tag, for exampleindex="{% tr "homePage" %}"to achieve the multilingual switch of the breadcrumb "Home" text.

Summary

AnQiCMS provides a powerful and easy-to-usebreadcrumbTags, allowing website operators to easily add dynamic breadcrumb navigation to pages.By simply configuring tags and beautifying CSS styles, you can not only significantly improve the navigation experience of users on the website, but also lay a solid foundation for the website's SEO performance.Now, get to work and add this indispensable navigation element to your AnQiCMS website!

Frequently Asked Questions (FAQ)

Q1: Why does my breadcrumb navigation not display or display incompletely on some pages?

A1: An