[js] 打开思源后默认折叠文档树

效果是重启打开思源或重载思源窗口后默认折叠文档树。

// 打开思源后默认折叠文档树 JS片段
// author by JeffreyChen https://ld246.com/article/1728469520911
(function() {
    const maxAttempts = 100;
    let attempts = 0;
    const delay = 400; // 延迟时间,单位为毫秒

    const checkElement = setInterval(() => {
        attempts++;

        // 查找目标元素
        const element = document.querySelector('.layout-tab-container > .file-tree .block__icon[data-type="collapse"]');

        if (element) {
            // 如果元素存在,则模拟点击
            element.click();

            // 设置一个延迟后重新点击
            setTimeout(() => {
                element.click(); // 再次点击
                clearInterval(checkElement); // 停止查询
            }, delay);

        }

        // 达到最大尝试次数后停止查询
        if (attempts >= maxAttempts) {
            clearInterval(checkElement);
        }
    }, 200);
})();
不得不说 AI 真方便

img

打赏 30 积分后可见
30 积分 • 5 打赏
  • 思源笔记

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

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

    23004 引用 • 92518 回帖
  • 代码片段

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

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

    90 引用 • 559 回帖 • 1 关注
3 操作
JeffreyChen 在 2024-10-09 20:46:20 更新了该帖
JeffreyChen 在 2024-10-09 20:35:37 更新了该帖
JeffreyChen 在 2024-10-09 18:32:01 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • mark-j

    能不能用 js 代码运行触发思源插件的快捷键

    2 回复
  • 不一定能,浏览器对模拟按键有限制

  • mark-j

    用油猴呢?

    1 回复
  • 思源又安装不了 Chrome 插件,更没可能

  • YHXK

    用了,不管用,点启用了

    1 回复
  • 录屏演示一下重启思源,以及看看代码片段界面

    1 回复
  • YHXK
    1 回复
  • 我更新了一下帖子的代码片段,你再试试

    1 回复
  • wilsons 1 评论

    可以,可以参考 EmberSky 大佬的回复 求代码片段 | 默认全屏编辑 - EmberSky 的回帖

    哦对,这个是可以的
    JeffreyChen
  • YHXK

    可以了,但又会导致文档树和菜单一打开秒缩起来

    1 回复
  • 我又修改了一下,这次应该行了

    1 回复
  • YHXK

    没问题了 🎉

  • Floria233

    大大,有没有办法将这两个东西改一下位置,即“关闭”和“删除”能不能别放在一块,每次点击时多少有点心惊肉跳的。总是会担心误删除之类的事——(因为笔记本很多,所以频繁经常关闭一些笔记本)

    image.png

    2 回复
  • 别担心,删除笔记本是会弹窗确认的,即使删除了也可以在 [数据历史 - 已删除的笔记本] 中立即回滚。

    1 回复
  • Floria233

    之前关掉了弹窗确认(因为总感觉有点多余——自己也知道是作死 😂,确实不喜欢弹窗确认这种东西,管理删除文档时这玩意儿会频繁跳出来烦人)

    现在则为了避免误删整个笔记本,还是开了“弹窗确认”,有点无可奈何必须捏着鼻子接受这东西的感觉。

    数据历史可以找回笔记本,我昨天逛论坛时看到,这个设计,是不是不可以恢复整个文档的层级结构?(昨天看的另一个帖子,有点迷惑)

    1 回复
    1. 这个弹窗确认的选项是只对单个文档生效的,删除笔记本是始终会弹窗的:image.png
    2. 如果你是整个笔记本直接删除的,恢复时就会恢复原本的文档结构
    1 回复
  • 删除,退出等危险按钮一律红色显示,以防看错。

    1 回复
  • Floria233

    哦哦,懂了 😄 之前没有仔细看,谢谢提醒

  • Floria233 1 评论

    我的弹窗是这样的(我太喜欢换壁纸了 😂 )

    话说这个弹窗也能改的吗?

    image.png

    1 回复
    目前倒是没有更改弹窗的需求,所以只谢谢大佬提醒,这个蓝色我可以接受。
    Floria233
  • Tisamn

    大佬01CF253F.png!!!

  • 我的意思是改右键菜单等文字颜色。当然弹窗即使有背景色,如果想醒目也可以改文字颜色嘛。

    1 回复
  • Floria233

    哦,是的,忽然想起来 ob 也是这样的设计,右键菜单中,唯有“删除文档”这个文字是红色的(依稀记得很久之前还不是这样的)

  • sswzznl 1 评论

    大佬,如果想折叠到 1 级子文档能改哪段代码来实现吗,想要保留笔记本下的 1 级子文档,折叠 1 级后面的子文档

    1 回复
    @wilsons 帮帮忙?
    JeffreyChen
  • 实现了默认展开一级菜单 @JeffreyChen

    // 打开思源后默认折叠文档树 JS片段
    // author by JeffreyChen https://ld246.com/article/1728469520911
    (function() {
        const maxAttempts = 100;
        let attempts = 0;
        const delay = 400; // 延迟时间,单位为毫秒
    
        const checkElement = setInterval(() => {
            attempts++;
    
            // 查找目标元素
            const element = document.querySelector('.layout-tab-container > .file-tree .block__icon[data-type="collapse"]');
    
            if (element) {
                // 如果元素存在,则模拟点击(by wilsons 注释掉这个点击防止闪动)
                //element.click();
    
                // 设置一个延迟后重新点击
                setTimeout(() => {
              
                    element.click(); // 再次点击
                    clearInterval(checkElement); // 停止查询
    
                    // 展开一级菜单(by wilsons)
                    setTimeout(() => {
                        const noteList = document.querySelectorAll('ul.b3-list[data-url]:not([data-lock-node="true"])');
                        noteList.forEach(item => {
                            const li = item.querySelector('li[data-type="navigation-root"]');
                            if(!li) return;
                            const arrow = li.querySelector('span.b3-list-item__toggle');
                            if(!arrow) return;
                            const isOpen = arrow.querySelector('svg.b3-list-item__arrow--open');
                            if(!isOpen){
                                arrow.click();
                            }
                        });
                    }, delay);
                }, delay);
    
            }
    
            // 达到最大尝试次数后停止查询
            if (attempts >= maxAttempts) {
                clearInterval(checkElement);
            }
        }, 200);
    })();
    
    
    
    2 回复
  • 这个思路有点缺陷,会展开所有的笔记本而不是只保留那些之前就被展开的

    1 回复
  • @sswzznl 需求里没要求记住之前被展开的,这个记住要存储数据也较为麻烦。

    大家的需求千奇百怪哈,之前思源不记住要记住,现在记住了又要折叠 😄 。

    1 回复
  • JeffreyChen 1 赞同

    这个记住要存储数据也较为麻烦

    其实代码片段代替折叠按钮进行操作就行了,直接移除首层文档下的子文档列表元素。

    我在 [js] 右键文档树定位按钮时先折叠再定位 里就用的是这种方法折叠文档(学思源的,思源的折叠操作就是直接移除 DOM)。

    1 回复
  • wilsons 1 赞同

    嗯,我以为他的需求是在你的基础上实现展开一级菜单,如果不在你基础上可以,在你基础上都已经折叠了,需要展开。

  • sswzznl

    感谢 wilsons 和 jeffreyChen 大佬 😄

请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 28 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 5 关注
  • BAE

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

    19 引用 • 75 回帖 • 653 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    149 引用 • 257 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Sublime

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

    10 引用 • 5 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 2 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 159 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • Kotlin

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

    19 引用 • 33 回帖 • 63 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    354 引用 • 1823 回帖 • 1 关注
  • 设计模式

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

    200 引用 • 120 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    16 引用 • 130 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖 • 1 关注