Build a user-friendly, SEO-friendly website in AnQiCMS, breadcrumb navigation is an indispensable element.It can clearly display the user's current location, help users quickly backtrack, and provide valuable website structure information for search engines.AnQiCMS's powerful template engine provides a simple and efficient way to dynamically generate these navigation paths.

AnQiCMS template system adopts syntax similar to Django template engine, which makes it very easy for content developers to control the display of page content through tags and variables. To implement dynamic breadcrumb navigation, we mainly use a core tag -breadcrumb.

The core of dynamic breadcrumb navigation:breadcrumbTag

breadcrumbThe tag is designed by AnQiCMS specifically for generating breadcrumb navigation.It can intelligently identify the type of the current page, whether it is an article detail page, a category list page, or a single page, it can automatically build a complete path from the homepage to the current page.This greatly simplifies the template development workload, no manual judgment of page type and level is required.

The basic usage format of this tag is as follows:{% breadcrumb 变量名称 with index="首页" title=true %}

Here, 变量名称It is a custom name, you can name it according to your preference, for examplecrumbs. This variable will carry the breadcrumb navigation data generated, it is an array object, and we need to iterate through it and display the content.

breadcrumbThe tag supports several key parameters, allowing you to more flexibly control the display effect of breadcrumbs:

  • indexThis parameter is used to set the display name of the 'Home' page in the breadcrumb navigation.By default, it will display as "Home Page". If you want to change it to "Website Homepage" or another name, just set it like this:index="我的博客".
  • titleThis parameter is mainly used for the document detail page to determine whether to display the title of the current document at the end of the breadcrumb. If set totrue(default), the title will be displayed; if set tofalseIf the title is not displayed. You can also specify a string directly, for exampletitle="文章详情"Then at the end of the detail page, it will display "Article Details".
  • siteIdFor the multi-site management feature of AnQiCMS, if you need to call data from a specific site to generate breadcrumbs, you can usesiteIdThe parameter specifies the site ID. Generally, if you only manage one site or want the breadcrumbs to only reflect the current site, this parameter does not need to be set.

How to render breadcrumb navigation in the template

breadcrumbThe tag will store the generated breadcrumb path in an array variable, each element of which contains two fields:Name(link name) andLink(Link address). Therefore, we usually combineforloop to traverse the array and render it to the page.

Here is a standard example that shows how to dynamically display breadcrumb navigation in AnQiCMS templates:

<div class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs %} {# 将生成的面包屑路径赋值给名为 'crumbs' 的变量 #}
        {% for item in crumbs %} {# 遍历 crumbs 数组中的每一个面包屑项 #}
            <li>
                <a href="{{ item.Link }}">{{ item.Name }}</a> {# 显示链接和名称 #}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ul>
</div>

In the code above:

  1. We first use{% breadcrumb crumbs %}Tag to generate breadcrumb data and store it incrumbsthe variable.
  2. Next, we go through{% for item in crumbs %}Loop throughcrumbsarray.
  3. In each loop,itemRepresenting the current breadcrumb item, we can go throughitem.LinkTo get its link address, byitem.NameTo get its display name.
  4. In order to achieve aesthetics and a good user experience, you can<li>add CSS classes within the tag, or<a>add other attributes to the tag for CSS styling control.

Further customization:

If you want the homepage to display as "My Website" and not show the article title on the article detail page, you can set it like this:

<div class="breadcrumb-nav">
    <ul>
        {% breadcrumb path with index="我的网站" title=false %} {# 将首页名称设为"我的网站"，详情页不显示标题 #}
        {% for item in path %}
            <li>
                <a href="{{ item.Link }}">{{ item.Name }}</a>
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ul>
</div>

As mentioned in the template creation conventions, breadcrumb navigation is typically part of the "code snippet" and can be stored independently in the template directorypartial/folder, for examplepartial/breadcrumb.html. This is used on pages where breadcrumbs need to be displayed, just use{% include "partial/breadcrumb.html" %}to introduce it, maintaining the cleanliness and maintainability of the template code.

In summary, AnQiCMS providesbreadcrumbLabels make the implementation of dynamic breadcrumb navigation very intuitive and simple.It automatically handles complex logic, allowing developers to focus on page design and user experience while ensuring the site structure is clear and有利于search engine optimization.

Frequently Asked Questions (FAQ)

  1. Why did I set up breadcrumb navigation but it is not displayed completely or accurately on some pages?This is usually due to incomplete data on the current page or the breadcrumb tag parameters not matching the page type.For example, if the article does not have a clear category, the breadcrumbs may not be able to generate the complete category path.Please check if the data on the current page is entered correctly, for example, the article'sCategoryIdPageParentIdAt the same time, confirmbreadcrumblabel'stitleandindexAre the parameters set as expected to avoid display errors caused by parameter conflicts.

  2. How can I customize the breadcrumb navigation style to make it more consistent with my website design?Breadcrumbs navigation style control is mainly completed through CSS. In the above code example, you can seedivandlielements all haveclassProperty. You can add custom class names to them and then write CSS rules to beautify the layout, font, color, background, and other aspects of the breadcrumbs. For example, by settingul.breadcrumb-nav liandul.breadcrumb-nav li aThe style, you can implement different visual effects.

  3. siteIdWhat specific role do parameters play in a multi-site environment? siteIdThe parameter is very useful in the multi-site feature of AnQiCMS. If you manage multiple independent websites in the AnQiCMS background, each with its own content and structure, then you can call it in a template.breadcrumbtags, you can go throughsiteId="X"(X is the ID of the target site) to specify which site's breadcrumb navigation to generate.This ensures that in cross-site content references or special design requirements, the breadcrumb path can accurately reflect the structure of the required site, rather than the default current site.