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 want some pages not to 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.

AnQiCMS (AnQiCMS) provides us with a perfect tool to meet this requirement with its flexible and powerful template engine.AnQiCMS template system is based on syntax similar to Django, allowing content managers and developers to easily control the display and hide of page elements through conditional judgments.

Overview of AnQi CMS template mechanism

AnQiCMS template files are usually stored in/templateUnder the directory, commonly used reusable code snippets (such as 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 tag is used to introduce breadcrumb navigation. To hide the breadcrumbs conditionally, we just need to add judgment logic where the breadcrumb code is introduced.

AnQiCMS template language support{% if 条件 %}/{% elif 其他条件 %}/{% else %}and{% endif %}Such logical judgment tags, as well as{{ 变量 }}Used for output content. By combining these tags, we can accurately control the display behavior of breadcrumbs.

Core Strategy: Make good use of conditional judgment

To implement the conditional hiding of 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 the basis for judgment, and then use{% if %}Code to determine whether to render breadcrumb navigation.

Here are several common methods for determining page type and properties, as well as how to apply them in templates.

Method one: Exclude specific pages through page ID

For a few fixed ID pages, we can directly judge by their ID. AnQiCMS'stdk(Universal TDK tag) can retrieve basic information about the current page, including the page ID.

Implementation steps:

  1. Locate the position of the breadcrumb navigation introduction:Generally speaking,template/你的模板名/base.htmlortemplate/你的模板名/partial/header.html.{% 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 a conditional judgment:UseifCheck if the current ID is in the exclusion list.

Code example:

Assume you want to hide breadcrumbs on pages with ID 10 (such as the "About Us" page) and ID 15 (such as a specific 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 %}

HeretdkLabels will