How to use the Anqi CMS navigation feature to implement the 'breadcrumb navigation' of the website?

In the daily operation of AnQiCMS, a well-designed, user-friendly website navigation system is the key to improving user experience and search engine optimization (SEO).Among them, "Breadcrumbs navigation" is a kind of auxiliary navigation method that can clearly show the user's current position on the website and provide a convenient path to return to the previous level page.As an experienced AnQi CMS operations manager, I will elaborate on how to fully utilize the built-in features of AnQiCMS to easily implement the breadcrumb navigation of a website.

Understand the breadcrumb navigation and its importance

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 remember the path home by throwing breadcrumbs.In a website, breadcrumb navigation allows users to clearly understand their level in the website structure, avoiding getting lost.

From the perspective of user experience, breadcrumb navigation reduces the number of clicks needed for users to return to the previous level of the page, thereby improving navigation efficiency.It directly shows the hierarchical structure of the website, reducing the user's cognitive load.For search engines, breadcrumb navigation provides additional internal links, which helps search engine spiders better understand the structure of the website and the relationship between pages, thereby having a positive impact on the SEO performance of the website.AnQiCMS is a corporate-level content management system that focuses on SEO optimization, built-in powerful support for breadcrumb navigation, making this function especially convenient to implement.

The implementation mechanism of breadcrumb navigation in AnQiCMS

AnQiCMS provides a dedicated template tagbreadcrumbUsed to automatically generate and display breadcrumb navigation on the website front-end.This label can intelligently parse the hierarchical path of the user according to the current page URL and the structure of the website, and generate the corresponding link.

By usingbreadcrumbLabels are embedded in the website template, and operations personnel do not need to manually write complex logic code to implement dynamic breadcrumb navigation. The design concept of AnQiCMS is to simplify content management and website operation.breadcrumbThe tag is the embodiment of this concept, it abstracts the implementation process of breadcrumb navigation, allowing even users who are not familiar with front-end development to easily configure.

breadcrumbDetailed usage of the tag

In AnQiCMS template files,breadcrumbThe usage of tags 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 block,crumbsis composed bybreadcrumbAn array object generated by tags, it includes each link in the breadcrumb path. By aforloop, we can traversecrumbsthe array, and obtain each path node(item)name(item.Name）and link address（item.Link），then render it into the HTML structure.

breadcrumbThe tag also supports multiple parameters to meet different display requirements：

• indexParameter: Used to set the display name of the 'Home' in the breadcrumb navigation.By default, if this parameter is not specified, it will display as "Home".You can customize the text according to your brand or language needs, for example, set it toindex="Home"orindex="我的博客".

• titleParameterIt is used to control whether the breadcrumb navigation includes the title of the current article on the article detail page.

  • When set totitle=trueWhen set to default, the last element of the breadcrumb navigation will display the full title of the current page.
  • When set totitle=falseWhen, the breadcrumb navigation will not include the title of the current page, usually ending on the list page or category page.
  • You can also settitleto a custom string, for exampletitle="文章详情"At this time, the last element of the breadcrumb navigation will display the text you specify.

• siteIdParameterThis parameter is very useful in the multi-site management scenario. If you manage multiple sites in the AnQiCMS background and need to call the breadcrumb data of a specific site, you can do so bysiteIdParameters are used to specify the site ID. In most cases, AnQiCMS will automatically identify the site being visited, so this parameter usually does not need to be filled in manually.

Add Breadcrumb Navigation to Template in Practice

You need to edit the corresponding template file to add breadcrumb navigation to your AnQiCMS website.The breadcrumb navigation usually appears at the top of the page content, adjacent to the main navigation bar below.

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

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

A typical implementation might be as follows:

<!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 styling control. At the same time, to make it more aesthetically pleasing, we useloop.lastDetermine whether it is the last element of the breadcrumb to decide whether to add a link or a separator.

Customize and optimize suggestions

In practice, you may need to beautify the breadcrumb navigation according to the visual style of the website.AnQiCMS's template system provides great flexibility, you can add styles to the generated breadcrumb list based on your front-end skills.

In addition, you can flexibly adjust according to different page types.titleParameters. For example, on the product details page, you may want the breadcrumb navigation to display the product name, and on some tool pages or introduction pages, you may prefer to display only up to the category level.

By fully utilizingbreadcrumbThe label parameters, combined with the powerful template design capabilities of AnQiCMS, allow you to build a website navigation structure that is both user-friendly and SEO-friendly, thereby providing users with a better browsing experience and helping the website perform better in search engines.

Frequently Asked Questions (FAQ)

1. What is the impact of AnQiCMS's breadcrumb navigation on the website's SEO?

The breadcrumb navigation of AnQiCMS 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, the 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 AnQiCMS's breadcrumb navigation?

You can use it tobreadcrumblabel'sindexParameters 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. Can the breadcrumb navigation on the article detail page of AnQiCMS not display the title of the current article?

Yes, you can control the breadcrumb navigation on the article detail page not to display the current article title. This can be achieved by settingbreadcrumblabel'stitlethe parameter. Just settitlethe parameter tofalse, that is{% breadcrumb crumbs with title=false %}The breadcrumb navigation will only display to the category level of the article and will not show the title of the article itself.