Understand the "Breadcrumbs Navigation" and its importance

Crumbs navigation (Breadcrumb Navigation) is usually displayed in the format of 'Home > Category > Subcategory > Current Page', and its name comes from the fairy tale 'Hansel and Gretel', where the main characters use breadcrumbs to remember the path home.In a website, breadcrumb navigation allows users to clearly understand their position in the website structure, avoiding getting lost.

From the perspective of user experience, breadcrumb navigation reduces the number of clicks required for users to return to the previous level page, improving navigation efficiency.It intuitively displays the website's hierarchy, reducing the user's cognitive load.For search engines, breadcrumb navigation provides additional internal links, which help search engine spiders better understand the structure of the website and the relationships between pages, thereby positively impacting the SEO performance of the website.AnQiCMS as an enterprise-level content management system that focuses on SEO optimization, has built-in strong support for breadcrumb navigation, making the implementation of this feature particularly convenient.

AnQiCMS中面包屑导航的实现机制

AnQiCMS提供了一个专门的模板标签breadcrumb，用于在网站前端自动生成和展示面包屑导航。This label can intelligently parse the level path of the user according to the current page URL and the structure of the website, and generate the corresponding link automatically.

By usingbreadcrumb标签嵌入到网站模板中，运营人员无需手动编写复杂的逻辑代码，即可实现动态的面包屑导航。AnQiCMS的设计理念在于简化内容管理和网站运营，breadcrumbThe label is the embodiment of this concept, abstracting the implementation process of breadcrumb navigation, allowing even users unfamiliar with front-end development to configure it easily.

breadcrumbDetailed usage of the label

In AnQiCMS template files,breadcrumbThe usage of the tag is as follows:

{% breadcrumb crumbs with index="首页" title=true %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
{% endbreadcrumb %}

In this code,crumbsis a series generated bybreadcrumbtag, which includes every step in the breadcrumb path.forWe can traverse through it by a loop.crumbsarray, and get each path node (item) name (item.Name) and link address (item.Link), and then render it to the HTML structure.

breadcrumbLabels support multiple parameters to meet different display requirements:

  • indexParameters：Used to set the display name of "Home" in breadcrumb navigation.By default, if this parameter is not specified, it will display as 'Home'.index="Home"orindex="我的博客".

  • titleParameters: Used to control whether the breadcrumb navigation includes the current article title on the article detail page.

    • When set totitle=trueWhen the value is [auto], the last element of the breadcrumb navigation will display the full title of the current page.
    • When set totitle=falseWhen set to auto, breadcrumb navigation will not include the title of the current page, which is usually at the end of list pages or category pages.
    • You can also titleSet to a custom string, for exampletitle="文章详情"At this time, the last element of the breadcrumb navigation will display the text you specify.

  • siteIdParametersThis parameter is very useful in multi-site management scenarios. If you manage multiple sites in the AnQiCMS background and need to call the breadcrumb data of a specific site,siteIdParameters are used to specify the site ID. Usually, AnQiCMS will automatically recognize the site based on the current visit, so this parameter usually does not need to be filled in manually.

Add breadcrumb navigation to template practical example

To add breadcrumb navigation to your AnQiCMS website, you need to edit the corresponding template file.English, the breadcrumb navigation usually appears at the top of the page content, next to the main navigation bar.

For example, in a document detail page (usually correspondingarchive/detail.htmlOr a custom document template) or a category list page (usually correspondingcategory/list.htmlor custom category template) where you can place the above code snippet.<body>at the appropriate position within the tag.

We assume that your template file isdefault/partial/header.htmlordefault/bash.htmlThis is the place where the general header elements of the website are stored. You can include breadcrumb navigation here so that all pages inheriting this common part can display.

An example implementation may look like this:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{% tdk with name="Title" siteName=true %}</title>
    <!-- 其他头部信息 -->
</head>
<body>
    <header>
        <!-- 这里是您的主导航栏 -->
        {% navList navs %}
        <ul>
            {% for item in navs %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
        {% endnavList %}
    </header>

    <main>
        <div class="breadcrumb-container">
            {% breadcrumb crumbs with index="首页" title=true %}
                <ul class="breadcrumb-list">
                    {% for item in crumbs %}
                        <li>
                            {% if loop.last %}
                                {# 最后一个元素不加链接，或者根据设计需求处理 #}
                                <span>{{ item.Name }}</span>
                            {% else %}
                                <a href="{{ item.Link }}">{{ item.Name }}</a>
                            {% endif %}
                        </li>
                        {% if not loop.last %}
                            <li class="separator">/</li> {# 添加分隔符 #}
                        {% endif %}
                    {% endfor %}
                </ul>
            {% endbreadcrumb %}
        </div>

        <div class="content-area">
            <!-- 页面具体内容 -->
        </div>
    </main>

    <footer>
        <!-- 网站页脚 -->
    </footer>
</body>
</html>

In this example, we added a simple CSS classbreadcrumb-containerandbreadcrumb-listfor style control. To make it more aesthetically pleasing, we useloop.lastDetermine whether the last element of the breadcrumb is a link or separator.

Customization and optimization suggestions

In practical applications, you may need to beautify the breadcrumb navigation with CSS according to the visual style of the website.The template system of AnQiCMS provides great flexibility, you can add styles to the generated breadcrumb list according to your front-end skills.

Additionally, you can flexibly adjust according to different page typestitleParameters. For example, on the product detail page, you may want the breadcrumb navigation to display the product name, while on some tool pages or summary pages, you may prefer to display only up to the category level.

By fully utilizingbreadcrumbThe parameters of the label, combined with the powerful template design capabilities of AnQiCMS, you can build a website navigation structure that not only meets user habits but is also conducive to SEO, thereby providing users with a better browsing experience and helping the website perform better in search engines.

Common Questions (FAQ)

1. How does the breadcrumb navigation of AnQiCMS affect the SEO of the website?

AnQiCMS's breadcrumb navigation has a positive impact on SEO.It helps search engine spiders better understand the hierarchy and relationships between pages by providing a clear internal link structure.This helps search engines accurately evaluate page content and improve the ranking of pages in search results.At the same time, breadcrumb navigation has also improved the user experience, reduced the bounce rate, and these indirect factors will also have a positive effect on SEO.

2. How to modify the display text of 'Home' in the breadcrumb navigation of AnQiCMS?

You can usebreadcrumbTagsindexParameter to modify the display text of the “Home” page. For example, if you want to display “Home” as “Website Homepage”, you can change the tag in the template code to{% breadcrumb crumbs with index="网站主页" %}.

3. In AnQiCMS article detail page, can the breadcrumb navigation not display the current article's title?

Yes, you can control the breadcrumb navigation on the article detail page not to display the current article's title. This can be achieved by settingbreadcrumbTagstitleparameter to achieve. Just settitleparameter settingsfalse, which is{% breadcrumb crumbs with title=false %}The breadcrumb navigation will only display to the category level of the article, and will not display the title of the article itself.