As an experienced website operations expert, I am well aware of the importance of breadcrumb navigation in enhancing user experience and website SEO.It not only helps users clearly understand their current location, but also assists search engines in understanding the structure of the website.However, in certain specific scenarios, we may wish that some pages do not display breadcrumb navigation, such as the homepage, login page, registration page, or some special marketing landing pages, in order to maintain the simplicity of the page or highlight the core content.

AutoCMS (AutoCMS) provides us with a complete set of tools to meet this requirement with its flexible and powerful template engine.AnQiCMS's template system is based on syntax similar to Django, allowing content operators and developers to easily control the display and hiding of page elements through conditional judgments.

AnQi CMS template mechanism overview

AnQiCMS template files are usually stored in/templateThe directory, while the commonly used reusable code snippets (such as page headers, footers, sidebars, breadcrumbs, etc.) are usually organized inpartial/directory. In the main template file (such asbase.html), we will use{% include "partial/breadcrumb.html" %}This label is used to introduce breadcrumb navigation. To hide the breadcrumbs conditionally, we just need to add judgment logic where the breadcrumb code is introduced.

English language support for AnQiCMS templates{% if 条件 %}/{% elif 其他条件 %}/{% else %}and{% endif %}such logical judgment tags, as well as{{ 变量 }}to output content. Combined with these tags, we can accurately control the display behavior of breadcrumbs.

Core Strategy: Make Full Use of Conditional Judgment

To implement the conditionally hidden breadcrumb navigation in AnQiCMS, the core strategy is to use the properties of the current page (such as page ID, URL path, or even custom fields) as a judgment basis, then using{% if %}The code to determine whether to render breadcrumb navigation based on tags.

The following are several common methods for determining page types and properties, as well as how to apply them in templates:

方法一：通过页面 ID 排除特定页面

对于少数几个固定ID的页面，我们可以直接通过其ID来判断。AnQiCMS的Englishtdk（Universal TDK tag）can get the basic information of the current page, including the page ID.

Implementation steps:

  1. Locate the introduction position of the breadcrumb navigation:Generally intemplate/你的模板名/base.htmlortemplate/你的模板名/partial/header.htmlFound in{% include "partial/breadcrumb.html" %}Or directly write the position of the breadcrumb code.
  2. Get the current page ID:Use{% tdk currentId with name="Id" %}Tag to get the current page ID.
  3. Write conditional judgment:UseifStatement to check if the current ID is in the list of IDs to be excluded.

Code example:

Assume you want to hide breadcrumbs on pages with ID 10 (such as the 'About Us' single page) and ID 15 (such as a special article detail page).

{# 在面包屑导航的上方或外部文件中获取当前页面的ID #}
{%- tdk currentId with name="Id" %}

{# 编写条件判断，排除ID为10和15的页面 #}
{% if currentId != 10 and currentId != 15 %}
    {% breadcrumb crumbs %}
        <div class="breadcrumb-nav">
            <ul class="flex items-center space-x-2">
                {% for item in crumbs %}
                    <li class="flex items-center">
                        <a href="{{ item.Link }}" class="text-gray-600 hover:text-blue-500">{{ item.Name }}</a>
                        {% if not forloop.Last %}
                            <svg class="w-4 h-4 mx-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endbreadcrumb %}
{% endif %}

Heretdktags to