How to use the `breadcrumb` tag in the AnQiCMS template to generate breadcrumb navigation?

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 the key link in it.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.In AnQiCMS, integrating and using breadcrumb navigation is very simple and efficient, mainly due to its built-inbreadcrumb.

Today, let's delve into how to skillfully use it in the AnQiCMS template.breadcrumbTags, to build a logical and user-friendly breadcrumb navigation for your website.

Breadcrumb navigation in AnQiCMS template:breadcrumbIn-depth analysis and practical guide of tags

The importance of breadcrumb navigation in content management systems, especially for complex websites, is self-evident.It is like a thread, guiding users to navigate through the hierarchy freely, effectively avoiding confusion.AnQiCMS is a platform focused on providing efficient content management solutions and naturally considers this core requirement, providing developers with a powerful and easy-to-use template engine.breadcrumbTags make it easy to generate breadcrumb navigation.

The core feature revelation:breadcrumbTag

AnQiCMS's template engine syntax is similar to Django, known for its simplicity and power.breadcrumbThe tag is one of the practical tools tailored 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, crumbsIt is 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 %}This is the start and end tag, and all the rendering logic of the breadcrumbs will be contained within these tags.

The core of this tag lies in its ability to generate an array containing information about each level of the navigation path (such ascrumbsVariable), each element in the array represents a node in the navigation path, usually containing the node name and link.

Deep understandingbreadcrumbTag parameters

breadcrumbThe tag provides several parameters that allow you to flexibly control the display behavior of breadcrumb navigation to adapt to different designs and business requirements.

indexParameters: Customize your navigation starting point.

• Function:This parameter is used to set the display name of the "Home" in the breadcrumb navigation. By default, if not specified, it will display as "Home".
• Usage example:
  • If you want the homepage to display as "Website Homepage", you can set it like this:index="网站主页".
  • If your website is positioned as a blog and you want the homepage to display as "My Blog", it can be written as:index="我的博客".

This parameter provides you with great flexibility, allowing the entry 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 to display the title of the last node in the breadcrumb navigation (i.e., the current page).
• Usage example:
  • title=true(Default): The breadcrumb navigation will display the complete title of the current page. For example, if it is an article detail page, the title of the article will be displayed.
  • title=false: Breadcrumb 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 when the current page title is already displayed in the H1 tag and the breadcrumbs do not repeat the display.
  • title="文章详情": You can specify a custom string. For example, on the article detail page, the last node of the breadcrumb may display as "article details", rather than the specific article title.

This refined control helps to avoid information redundancy while maintaining the integrity of navigation, optimizing the page layout.

siteIdParameter: Precise call in a multi-site environment.

• Function:AnQiCMS supports multi-site management,siteIdThe parameter allows you to explicitly specify which site's breadcrumb data to retrieve in a multi-site deployment environment.
• Usage example:In most cases, 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 site template, do you need to getanotherThe site's breadcrumb data needs to be explicitly setsiteId="某个站点的ID". This is usually an advanced customization scenario, such as building a cross-site navigation or content aggregation page.

Build breadcrumb navigation loop and content output

Once you pass throughbreadcrumbThe tag has obtained navigation data (such as stored incrumbsthe variable), these data will exist in the form of an array. You need to useforLoop through this array and generate the corresponding HTML element for each node.

InforIn the loop, eachitemA variable name or something else represents a level in the breadcrumb path, it contains two key properties:

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

Below is a typical breadcrumb navigation rendering code snippet:

<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 used:forloop.lastTo determine if the current loop is the last element. In breadcrumb navigation, the last element is usually the current page and does not need to add a link.Of course, it depends on your design requirements.

Practical case: incorporatingbreadcrumbinto your template

Let's look at a more comprehensive example of how to apply it in an actual templatebreadcrumbAn example of a label, 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. Definedpathsvariable 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.