As an experienced website operation expert, I know that a user-friendly and SEO-optimized website cannot do without a clear navigation structure, and Breadcrumb Navigation is one of the key elements.It not only helps users understand their current location, improves the usability of the website, but also provides clear website structure signals to search engines.breadcrumbLabel.

Today, let's delve into how to cleverly use templates in AnQiCMS.breadcrumbUse tags to build a logical and user-friendly breadcrumb navigation for your website.

The breadcrumb navigation in AnQiCMS template: EnglishbreadcrumbIn-depth analysis and practical guide of tags

In a content management system, especially for complex websites, the importance of breadcrumb navigation is self-evident.It acts as a thread, guiding users to navigate through the hierarchy effortlessly and effectively avoid getting lost.breadcrumbTags make the generation of breadcrumb navigation effortless.

Reveal the core features:breadcrumbtags

AnQiCMS's template engine syntax is similar to Django, known for its simplicity and power.breadcrumbTags are one of the practical tools tailor-made for front-end developers.Its main function is to dynamically obtain all parent paths of the current page and the current page itself, and provide them in an ordered list to the template, making it convenient for us to render standard breadcrumb navigation.

The basic tag structure is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    {# 在这里循环输出面包屑的各个层级 #}
{% endbreadcrumb %}

Here,crumbsis a variable name specified for breadcrumb data. You can name it according to your preference.breadcrumbList/pathsOnce specified, it needs to be consistent within the loop in the label.{% breadcrumb ... %}and{% endbreadcrumb %}Is the start and end tag of the label, all breadcrumb rendering logic will be included within this pair of tags.

The core of this tag is that it generates an array containing information about each level in the navigation path (for example,crumbsVariable), each element in the array represents a node in the navigation path, usually containing the node name and link.

Deep understandingbreadcrumbThe parameters of the tag

breadcrumbThe tag provides several parameters, allowing you to flexibly control the display behavior of breadcrumb navigation to meet different design and business needs.

indexParameters: Customize your navigation starting point.

  • Function: This parameter is used to set the display name of "Home
  • Usage example:
    • If you want the home page to display as "Website Homepage", you can set it like this:index="网站主页".
    • If your website is a blog and you want the home page to display as "My Blog", it can be written as:index="我的博客".

This parameter provides great flexibility, allowing the entrance point of the website to be consistent with your brand or specific content style.

titleParameter: Flexibly control the display of the current page.

  • Function: titleThe parameter determines whether and how the title is displayed at the last node of the breadcrumb navigation (i.e., the current page).
  • Usage example:
    • title=true(Default): Breadcrumb navigation will display the full current page title. For example, if the current page is an article detail page, the article title will be displayed.
    • title=false：Breadcrumbs navigation will not display the title of the current page, but use the parent category as the last visible node.This is very useful in some designs where the current page title is already displayed in the H1 tag and the breadcrumb is no longer repeated.
    • title="文章详情"You can specify a custom string for it.For example, on the article detail page, the last node of the breadcrumb may display as "Article Details" instead of the specific article title.

This fine-grained control helps to avoid information redundancy while maintaining the integrity of navigation, and optimizes the page layout.

siteIdParameter: Precise invocation in a multi-site environment

  • Function: AnQiCMS supports multi-site management,siteIdThe parameter allows you to specify which site's breadcrumb data to retrieve in a multi-site deployment environment.
  • Usage example:Generally, you do not need to manually fill in this parameter, the system will automatically identify the ID of the current site. Only when you are in a template of a site, do you need toanotherThe site's breadcrumb data needs to be explicitly setsiteId="某个站点的ID". This is usually a high-end customization scenario, such as building a cross-site navigation or content aggregation page.

Build breadcrumb navigation loop and content output

once you have passed throughbreadcrumbThe tag has obtained navigation data (for example, stored incrumbsa variable), these data will exist in the form of an array. You need to useforLoop through this array and generate the corresponding HTML elements for each node.

Inforin the loop, eachitemThis represents a level in the breadcrumb path, it contains two key attributes:

  • item.Name:The display name of the current navigation node (for example, "Home
  • item.Link:The URL link of the current navigation node.

The following is a typical snippet of breadcrumb navigation rendering code:

<nav class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs with index="网站主页" title=true %}
            {% for item in crumbs %}
                <li>
                    {% if forloop.last %} {# 判断是否是最后一个节点，通常最后一个节点不带链接 #}
                        <span>{{ item.Name }}</span>
                    {% else %}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                    {% endif %}
                </li>
            {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

In this example, we usedforloop.lastTo determine if the current loop is the last element.In the breadcrumb navigation, the last element is usually the current page, and there is no need to add a link.Of course, it depends on your design requirements.

Practice Case: TobreadcrumbIntegrate into your template

Let's look at a more complete example of how to apply it in a real templatebreadcrumbLabel examples, assuming you are designing a template for an article detail page:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    {# 其他SEO meta标签和CSS链接 #}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/main.css">
</head>
<body>
    <header>
        {# 网站顶部导航 #}
    </header>

    <div class="container">
        {# 面包屑导航区域，通常放在H1标题上方或页面顶部 #}
        <nav class="anqicms-breadcrumb" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% breadcrumb paths with index="AnQiCMS首页" title=true %}
                    {% for item in paths %}
                        <li class="breadcrumb-item {% if forloop.last %}active{% endif %}">
                            {% if forloop.last %}
                                {# 当前页面不显示链接 #}
                                {{ item.Name }}
                            {% else %}
                                <a href="{{ item.Link }}">{{ item.Name }}</a>
                            {% endif %}
                        </li>
                    {% endfor %}
                {% endbreadcrumb %}
            </ol>
        </nav>

        <main class="article-detail">
            <h1>{% archiveDetail with name="Title" %}</h1>
            <div class="article-meta">
                <span>发布时间：{% archiveDetail with name="CreatedTime" format="2006-01-02 15:04" %}</span>
                <span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
                <span>阅读量：{% archiveDetail with name="Views" %}</span>
            </div>
            <div class="article-content">
                {% archiveDetail content with name="Content" %}{{ content|safe }}
            </div>
        </main>
    </div>

    <footer>
        {# 网站底部信息 #}
    </footer>
</body>
</html>

In this example, we:

  1. DefinedpathsVariables to receive breadcrumb data.
  2. toindexParameter is set to 'AnQiCMS Home Page', making the website entrance clearer.
  3. title=trueEnsure that the article title will be displayed at the end of the breadcrumb. 4.