代码片段求助——嵌入块面包屑隐藏,前 3 层、文档本层路径

本贴最后更新于 330 天前,其中的信息可能已经时移世异

对所有嵌入块面包屑

  • 隐藏前 3 层
  • 隐藏文档本层(文档内的不隐藏)

前 3 层看着累赘;文档本层,我都是自己另起标题作为文档标题,所以用不到。

20250126170500.png

  • 思源笔记

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

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

    28448 引用 • 119792 回帖
  • Q&A

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

    11156 引用 • 50667 回帖 • 52 关注
1 操作
8V9q7V 在 2025-01-26 17:54:58 更新了该帖

相关帖子

被采纳的回答
  • 不知是否满足你需求,你先看看,有问题再调整

    (()=>{
        // 监听面包屑项出现
        observeElementExist('.protyle-wysiwyg__embed .protyle-breadcrumb__bar .protyle-breadcrumb__item:first-child', async (breadcrumb) => {
            if(!breadcrumb.closest(".protyle-wysiwyg__embed .protyle-breadcrumb__bar.protyle-breadcrumb__bar--nowrap .protyle-breadcrumb__item:first-child")) return;
            const breadcrumbText = breadcrumb.querySelector(".protyle-breadcrumb__text");
            if(!breadcrumbText) return;
            const text = breadcrumbText.textContent;
            const parts = text.split('/');
            let result = [];
            if (parts.length >= 3) {
              result = parts.slice(3);
            } else {
                return; // 不足3项不处理
            }
            // 当面包屑第二个箭头的标题和第一个箭头的标题相同时过滤掉
            const breadcrumbBar = breadcrumb.parentElement;
            let nextText = breadcrumbBar?.querySelectorAll(".protyle-breadcrumb__text");
            if(!breadcrumbBar || !nextText || !nextText[1]) return;
            nextText = nextText[1];
            result = result.filter(item => item.trim() !== nextText.textContent.trim());
            // 当面包屑第一个箭头的标题和文档标题相同时过滤掉
            let doc = await query(`select content from blocks where id = '${breadcrumb.dataset.id}'`);
            doc = doc[0] || {};
            result = result.filter(item => item.trim() !== doc.content.trim());
            //重新输出面包屑
            const finalResult = result.join('/');
            breadcrumbText.textContent = finalResult;
        }, document.body);
    
        // 查询SQL函数
        async function query(sql) {
            const result = await requestApi('/api/query/sql', { "stmt": sql });
            if (result.code !== 0) {
                console.error("查询数据库出错", result.msg);
                return [];
            }
            return result.data;
        }
    
        async function requestApi(url, data, method = 'POST') {
            return await (await fetch(url, {method: method, body: JSON.stringify(data||{})})).json();
        }
    
        // 监听元素出现
        function observeElementExist(selector, callback, observeNode) {
            const handleMutations = (mutationsList, observer) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        mutation.addedNodes.forEach(node => {
                            if(!node || node.nodeType !== Node.ELEMENT_NODE) return;
                            if (node.matches && node.matches(selector)) {
                                callback(node);
                            } else if (node.querySelector(selector)) {
                                const nodes = node.querySelectorAll(selector);
                                nodes.forEach(node => {
                                    callback(node);
                                });
                            }
                        });
                    }
                }
            };
      
            // 创建一个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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 那下面几个方案,你觉得哪个有实现的可能?

    方案一:双向匹配

    把文档标题和另起标题,双向部分匹配,部分一致就生效。

    20250304145037.png

    方案二:第一标题

    不匹配了——直接把文档内的,把开头的第一个标题,在面包屑上指定为“文档标题”

    方案三:自定属性

    和方案二类似,不过给某个标题添加自定义属性,然后在面包屑上指定为“文档标题”


    我觉得方案二好,不过可能你已经尝试过了。实在是思源的限制,就算了,目前面包屑也还可以了。

    1 回复
  • 其他回帖
  • 我导出了文档(原生.sy 格式)——B.sy.zip

    你把它放在 3 层深路径的位置,然后你点开文档 _B_,里面有查询嵌入块,应该能刷到 文档本身标题文档内的标题 重复的面包屑。

    为什么有 2 个标题,因为:

    • 思源的嵌入块对文档块 无法隐藏标题下方的块,导致查询出一长条内容出来
    • 所以我都是在文档内另起个标题。
    • 所以才隐藏——前 3 层 + 文档本身标题

    20250127193019.png

    1 回复
    2 操作
    8V9q7V 在 2025-01-27 20:00:47 更新了该回帖
    8V9q7V 在 2025-01-27 19:57:22 更新了该回帖
    • 文档处在 4 层路径深度的话,无法隐藏该文档本层的面包屑
    • 而 5 层的话,正常隐藏

    20250127183240.png

    1 回复
  • wilsons 1

    改好了,你在试试

    下面这种情况

    image.png

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    90 引用 • 165 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 51 关注
  • Rust

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

    60 引用 • 22 回帖
  • HTML

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

    109 引用 • 295 回帖
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 660 关注
  • AngularJS

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

    12 引用 • 50 回帖 • 531 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 329 关注
  • 阿里云

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

    85 引用 • 324 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 3 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 284 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    561 引用 • 677 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 86 关注
  • 前端

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

    248 引用 • 1342 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    502 引用 • 1397 回帖 • 241 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    736 引用 • 1307 回帖 • 2 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 1 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 577 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    54 引用 • 190 回帖
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 91 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 193 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • webpack

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

    43 引用 • 130 回帖 • 259 关注
  • Word
    13 引用 • 41 回帖 • 1 关注
  • SQLite

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

    4 引用 • 7 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 144 回帖 • 3 关注