求如何在面包屑中隐藏重复项

列表项与标题项的内容都相同,只需要其中之一就 ok 了,请问大佬们怎么弄。

微信截图 20241014203946.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22919 引用 • 92145 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8401 引用 • 38284 回帖 • 156 关注
1 操作
i1356 在 2024-10-15 07:27:56 更新了该帖
被采纳的回答
  • wilsons 2 1 赞同

    我想你的本意是想去除面包屑中的重复项吧,因为除了标题,其他块也可能产生重复。

    依靠纯 css 很难兼容其他情况。

    下面这个用 js 代码实现的去除重复项(暂不支持手机端,手机端面包屑在菜单中),仅供参考。

    (()=>{
        // 已存在的面包屑
        let breadcrumbs = [], timer = null;
        // 监听面包屑项出现
        observeElementExist('.protyle-breadcrumb__item', (element) => {
            if(!timer) {
                timer = setTimeout(() => {
                    breadcrumbs = [];
                    timer = null;
                }, 300);
            }
            const text = element.querySelector('.protyle-breadcrumb__text');
            if(!text) return;
            if(!breadcrumbs.includes(text.textContent)) {
                breadcrumbs.push(text.textContent);
                return;
            }
            element.style.display = 'none';
            const arrow = element.previousElementSibling;
            if(!arrow || !arrow.classList.contains('protyle-breadcrumb__arrow')) return;
            arrow.style.display = 'none';
        }, '.layout__center');
      
        // 监听元素出现
        function observeElementExist(selector, callback, observeNode) {
            const handleMutations = (mutationsList, observer) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        mutation.addedNodes.forEach(node => {
                            if (node.matches && node.matches(selector)) {
                                callback(node);
                                //observer.disconnect(); // 一旦找到元素,停止监听
                            }
                        });
                    }
                }
            };
      
            // 创建一个MutationObserver实例
            const config = { attributes: false, childList: true, subtree: true };
            const observer = new MutationObserver(handleMutations);
      
            // 选择需要监听的父节点
            observeNode = typeof observeNode === 'string' ? document.querySelector(observeNode) : observeNode;
            const targetNode = observeNode || document.body;
      
            // 开始监听目标节点的变化
            observer.observe(targetNode, config);
        }
    })();
    
    

    效果

    image.png

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons 2 1 赞同

    我想你的本意是想去除面包屑中的重复项吧,因为除了标题,其他块也可能产生重复。

    依靠纯 css 很难兼容其他情况。

    下面这个用 js 代码实现的去除重复项(暂不支持手机端,手机端面包屑在菜单中),仅供参考。

    (()=>{
        // 已存在的面包屑
        let breadcrumbs = [], timer = null;
        // 监听面包屑项出现
        observeElementExist('.protyle-breadcrumb__item', (element) => {
            if(!timer) {
                timer = setTimeout(() => {
                    breadcrumbs = [];
                    timer = null;
                }, 300);
            }
            const text = element.querySelector('.protyle-breadcrumb__text');
            if(!text) return;
            if(!breadcrumbs.includes(text.textContent)) {
                breadcrumbs.push(text.textContent);
                return;
            }
            element.style.display = 'none';
            const arrow = element.previousElementSibling;
            if(!arrow || !arrow.classList.contains('protyle-breadcrumb__arrow')) return;
            arrow.style.display = 'none';
        }, '.layout__center');
      
        // 监听元素出现
        function observeElementExist(selector, callback, observeNode) {
            const handleMutations = (mutationsList, observer) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        mutation.addedNodes.forEach(node => {
                            if (node.matches && node.matches(selector)) {
                                callback(node);
                                //observer.disconnect(); // 一旦找到元素,停止监听
                            }
                        });
                    }
                }
            };
      
            // 创建一个MutationObserver实例
            const config = { attributes: false, childList: true, subtree: true };
            const observer = new MutationObserver(handleMutations);
      
            // 选择需要监听的父节点
            observeNode = typeof observeNode === 'string' ? document.querySelector(observeNode) : observeNode;
            const targetNode = observeNode || document.body;
      
            // 开始监听目标节点的变化
            observer.observe(targetNode, config);
        }
    })();
    
    

    效果

    image.png

    3 回复
  • 其他回帖
  • LLL-

    好评!谢谢佬

  • wilsons 1

    添加 css 就可以了

    .protyle-breadcrumb {
        user-select: text;
    }
    
  • 没懂你意思

    1 回复
  • 查看全部回帖

推荐标签 标签

  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 464 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 4 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 3 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 7 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 653 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 255 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 3 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 47 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 2 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 3 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 48 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 18 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 481 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • danl
    144 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 780 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    51 引用 • 25 回帖 • 2 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 474 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 653 关注