作为一名资深的网站运营专家,我深知面包屑导航在提升用户体验和网站SEO方面的重要性。它不仅能帮助用户清晰地了解当前所处位置,还能辅助搜索引擎理解网站结构。然而,在某些特定场景下,我们可能希望某些页面不显示面包屑导航,例如首页、登录页、注册页或一些特殊的营销落地页,以保持页面的简洁性或突出核心内容。

安企CMS(AnQiCMS)以其灵活强大的模板引擎,为我们提供了实现这一需求的完善工具。AnQiCMS的模板系统基于类似Django的语法,让内容运营者和开发者能够轻松地通过条件判断来控制页面元素的显示与隐藏。

安企CMS模板机制概述

AnQiCMS的模板文件通常存放在 /template 目录下,而常用的可复用代码片段(如页头、页脚、侧边栏、面包屑等)则通常组织在 partial/ 目录中。在主模板文件(如 base.html)中,我们会使用 {% include "partial/breadcrumb.html" %} 这样的标签来引入面包屑导航。要实现按条件隐藏面包屑,我们只需在引入面包屑代码的地方添加判断逻辑即可。

AnQiCMS的模板语言支持 {% if 条件 %}{% elif 其他条件 %}{% else %}{% endif %} 这样的逻辑判断标签,以及 {{ 变量 }} 用于输出内容。结合这些标签,我们可以精准地控制面包屑的显示行为。

核心策略:巧用条件判断

要在AnQiCMS中实现面包屑导航的条件隐藏,核心策略是在模板中,利用当前页面的属性(如页面ID、URL路径、甚至自定义字段)作为判断依据,然后使用 {% if %} 标签来决定是否渲染面包屑导航的代码。

以下是几种常见的判断页面类型和属性的方法,以及如何在模板中应用:

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

对于少数几个固定ID的页面,我们可以直接通过其ID来判断。AnQiCMS的 tdk(万能TDK标签)可以获取当前页面的基本信息,包括页面ID。

实现步骤:

  1. 定位面包屑导航的引入位置: 通常在 template/你的模板名/base.htmltemplate/你的模板名/partial/header.html 中找到 {% include "partial/breadcrumb.html" %} 或直接写面包屑代码的位置。
  2. 获取当前页面 ID: 使用 {% tdk currentId with name="Id" %} 标签来获取当前页面的ID。
  3. 编写条件判断: 使用 if 语句检查当前ID是否在需要排除的列表中。

代码示例:

假设你希望在ID为10(例如“关于我们”单页)和ID为15(例如某个特殊文章详情页)的页面上不显示面包屑。

{# 在面包屑导航的上方或外部文件中获取当前页面的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 %}

这里 tdk 标签将