When we browse websites, we often see a line at the top or bottom of the page indicating the current location's navigation path, which is what we usually call "Breadcrumbs".It not only clearly tells the user the current page\'s position in the website structure, but also effectively enhances the website user experience and search engine optimization (SEO) effects.AnQiCMS (AnQiCMS) is a powerful content management system that comes with a convenient way to generate and customize this dynamic breadcrumb navigation.

How to implement dynamic breadcrumb navigation in Anqi CMS?

The AnQi CMS is built-in with a powerful template tag system, which includes a special one for generating breadcrumb navigation.breadcrumbTag.The essence lies in its ability to intelligently construct a complete navigation path based on the context of the current page, whether it is an article detail page, category list page, tag page, or a single page.You do not need to manually write complex logic to determine the type and level of the current page, Anqí CMS will automatically complete this task.

When you call in the templatebreadcrumbWhen a tag is encountered, it returns an array containing all navigation nodes. Each node includesName(link name) andLink(Link address) Two key pieces of information, you can flexibly display these information on the front end.

Core tag and parameter parsing

breadcrumbThe basic usage of the tag is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里循环输出面包屑节点 #}
{% endbreadcrumb %}

Let's take a detailed look at this tag and its parameters:

  • crumbs(variable name): This is a custom variable name that will carry bybreadcrumbAn array of breadcrumb navigation nodes generated by tags. You can use{% breadcrumb ... %}and{% endbreadcrumb %}betweenforLoop through thiscrumbsarrays to render each navigation node one by one. Eachcrumbselement in the array is an object containingName(Link Name) andLink(Link Address).

  • index(Parameter)This parameter is used to set the first element of the breadcrumb navigation path, which is usually the home page link of the website.The default value is 'Home'.index="您的当前位置"to achieve.

  • title(Parameter): This parameter controls whether the current page title is displayed at the end of the breadcrumb navigation.

    • When set totitle=trueWhen the default value is used, the last node of the breadcrumb will display the full title of the current page.
    • When set totitle=falseAt that time, the last node of the breadcrumb will not display the title, which is usually used on list pages or in situations where a simpler display is needed.
    • You can also assign a specific string to it, for exampletitle="文章详情"This will display the custom text of the last node.

  • siteId(Parameter)This parameter is used in multi-site management scenarios. If you have multiple sites and want to call the breadcrumb data of other sites, you can do so bysiteId="站点ID"Specify. This parameter is not required in most single-site cases.

Application: Customize breadcrumb display method.

UnderstoodbreadcrumbAfter the core functions and parameters of the tag, let's take a look at how to use it in actual templates and customize its display mode.

Add basic structure and separator

The most common breadcrumb navigation is usually presented in an unordered list (<ul>) or an ordered list (<ol>), and a separator is used between each link (such as>or/）。The following is an example of implementing this basic structure in an Anqi CMS template:

<nav class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs with index="首页" title=true %}
            {% for item in crumbs %}
                <li class="breadcrumb-item">
                    {% if not forloop.Last %} {# 如果不是最后一个节点（当前页面），则显示链接和分隔符 #}
                        <a href="{{ item.Link }}" class="breadcrumb-link">{{ item.Name }}</a>
                        <span class="breadcrumb-separator"> &gt; </span>
                    {% else %} {# 如果是最后一个节点（当前页面），只显示文本 #}
                        <span class="breadcrumb-current">{{ item.Name }}</span>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

In this example, we usedforloop.LastTo determine if the current node being traversed is the last in the breadcrumb path.For non-last nodes, we add links and separators; for the last node, only its name is displayed, and different styles (such as bold or highlighting) can be applied to highlight the current page.

Custom homepage text and ending title

You can easily modify the home page text of the breadcrumb navigation according to your website brand or language requirements. For example, if your website is an e-commerce platform, you can change "home page" to "mall homepage":

{# 将首页文本改为“商城主页” #}
{% breadcrumb crumbs with index="商城主页" title=true %}
    {# ... 循环渲染面包屑 ... #}
{% endbreadcrumb %}

Similarly, depending on the page type, you may need to control the display of the end title. For example, on the category list page, you may not want the last node of the breadcrumb to repeat the category name:

{# 在列表页，不显示当前分类的标题 #}
{% breadcrumb crumbs with index="首页" title=false %}
    {# ... 循环渲染面包屑 ... #}
{% endbreadcrumb %}

Or, do you want the last breadcrumb node on all article detail pages to display a unified "Details"?

{# 在文章详情页，最后一个节点显示“文章详情” #}
{% breadcrumb crumbs with index="首页" title="文章详情" %}
    {# ... 循环渲染面包屑 ... #}
{% endbreadcrumb %}

CSS style beautification

The Anqi CMS template system is only responsible for generating HTML structure and data, and the specific visual presentation depends entirely on your CSS style. In the above example, we addedbreadcrumb-nav/breadcrumb-item/breadcrumb-link/breadcrumb-separatorandbreadcrumb-currentWait for CSS classes, you can use these classes to define the font, color, size, spacing, and layout styles for the breadcrumb navigation, making it consistent with the overall design style of your website.

Conditional judgment and special processing

For more advanced customization needs, you canforcombine within the loopifstatements based onitem.Nameoritem.LinkPerform a conditional judgment to handle specific nodes specially. For example, if a node is a 'product center', you may want to add an icon for it:

{% breadcrumb crumbs with index="首页" title=true %}
    {% for item in crumbs %}
        <li class="breadcrumb-item">
            {% if item.Name == "产品中心" %}
                <i class="icon-product"></i>
            {% endif %}
            {% if not forloop.Last %}
                <a href="{{ item.Link }}" class="breadcrumb-link">{{ item.Name }}</a>
                <span class="breadcrumb-separator"> &gt; </span>
            {% else %}
                <span class="breadcrumb-current">{{ item.Name }}</span>
            {% endif %}
        </li>
    {% endfor %}
{% endbreadcrumb %}

In this way, you can control every aspect of the breadcrumb trail in detail, meeting various complex display needs.

**Practical Suggestions

  • Keep it concise.：Breadcrumb navigation is designed to simplify navigation and avoid overly long or complex paths.
  • Ensure clickability.：Except for the current page (usually the last node of the breadcrumb), all breadcrumb nodes should be clickable links for easy user navigation.
  • Unified styleEnsure that the breadcrumb style and layout are consistent throughout the website to enhance user experience.
  • Multi-type page testingOn the homepage, category page, detail page, tag page, and even the search results page of the website, test the breadcrumb display effect to ensure its correctness and consistency.

Security CMS