[js] 思源笔记左侧空白部分显示自定义文字 + 学习

本贴最后更新于 194 天前,其中的信息可能已经时异事殊

原贴[js] 思源笔记左侧空白部分显示自定义文字 - 链滴

还可以再学习一下[js] 思源笔记左侧空白区域显示心灵毒鸡汤或倒计时 - 链滴

学习得到光标所在块得到 id

通过块 id 遍历 DOM 树结构获得面包屑及其它

document.addEventListener 函数

防抖函数

screenshots.gif

/*css部分*/ .fn__flex-1.dock__item--space { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ font-size: 20px; /* 字体大小 */ writing-mode: vertical-rl; /* 竖向排列 */ text-align: center; /* 文字居中对齐 */ }
//左侧空白部分显示自定义文字js部分 // 获取左侧栏目标元素 var targetElement = document.querySelector('div.fn__flex-1.dock__item--space'); targetElement.textContent = '过 犹 不 及'; // 防抖函数 function debounce(func, wait) { let timeout; return function() { const context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args); }, wait); }; } // 检查 breadcrumbElement 的函数 function checkBreadcrumbElement(event) { const clickedElement = event.target; // 向上遍历DOM树直到找到具有data-node-id属性的元素 let element = clickedElement; while (element && !element.hasAttribute('data-node-id')) { element = element.parentNode; } // 如果找到了具有data-node-id属性的元素 if (element) { const nodeId = element.getAttribute('data-node-id'); console.log('找到的data-node-id是:', nodeId); // 获取data-node-id元素的祖父元素 let grandParentElement = element.parentNode.parentNode; // 查找祖父元素的兄弟元素中是否有protyle-breadcrumb类 let siblingElements = Array.from(grandParentElement.parentNode.children).filter(child => child !== grandParentElement); let breadcrumbElement = siblingElements.find(sibling => sibling.classList.contains('protyle-breadcrumb')); console.log("breadcrumbElement", breadcrumbElement); if (breadcrumbElement) { // 找到protyle-breadcrumb元素下的protyle-breadcrumb__bar let breadcrumbBar = breadcrumbElement.querySelector('.protyle-breadcrumb__bar'); if (breadcrumbBar) { // 在protyle-breadcrumb__bar下寻找所有的protyle-breadcrumb__item let breadcrumbItems = breadcrumbBar.querySelectorAll('.protyle-breadcrumb__item'); console.log("breadcrumbItems", breadcrumbItems); if (breadcrumbItems.length > 0) { // 获取第二个倒数的面包屑项 let secondLastBreadcrumbItem = breadcrumbItems[breadcrumbItems.length - 2]; if (secondLastBreadcrumbItem) { // 获取第二个倒数面包屑项的文本内容 let textElement = secondLastBreadcrumbItem.querySelector('.protyle-breadcrumb__text'); if (textElement) { let textContent = textElement.textContent; targetElement.textContent =textContent; console.log('第二个倒数的标题内容是:', textContent); } } else { console.log('没有找到第二个倒数的面包屑项'); } } else { console.log('没有找到protyle-breadcrumb__item元素'); } } else { console.log('没有找到protyle-breadcrumb__bar元素'); } } else { console.log('没有找到protyle-breadcrumb元素'); } } else { console.log('没有找到具有data-node-id属性的元素'); } } // 为点击事件绑定防抖后的事件处理函数 document.addEventListener('click', debounce(checkBreadcrumbElement, 100));
  • 思源笔记

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

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

    26153 引用 • 108641 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    193 引用 • 1376 回帖
2 操作
cxg318 在 2024-12-20 19:41:36 更新了该帖
cxg318 在 2024-12-20 19:39:45 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • startzhy

    我想问问你这个显示输入状态的是什么软件 好想要 😋

  • cxg318
    作者

    KBLAutoSwitch

推荐标签 标签

  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖
  • V2Ray
    1 引用 • 15 回帖 • 5 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • golang

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

    500 引用 • 1396 回帖 • 246 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 507 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 18 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1021 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 767 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 827 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 465 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 3 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    589 引用 • 3528 回帖 • 1 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 278 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 350 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 9 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 364 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 707 关注
  • QQ

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

    45 引用 • 557 回帖
  • Access
    1 引用 • 3 回帖 • 1 关注
  • CodeMirror
    2 引用 • 17 回帖 • 171 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 56 关注