[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 积分 • 3 打赏
  • 思源笔记

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

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

    22337 引用 • 89378 回帖
  • 代码片段

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

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

    69 引用 • 372 回帖
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

推荐标签 标签

  • WebComponents

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

    1 引用
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 351 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 376 关注
  • 机器学习

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

    83 引用 • 37 回帖 • 1 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 669 关注
  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 327 关注
  • GAE

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

    14 引用 • 42 回帖 • 764 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    169 引用 • 506 回帖
  • SOHO

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

    7 引用 • 55 回帖 • 19 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 664 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 26 关注
  • 区块链

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

    91 引用 • 751 回帖 • 2 关注
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1705 回帖 • 1 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 173 关注
  • 前端

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

    247 引用 • 1348 回帖
  • JavaScript

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

    729 引用 • 1327 回帖
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • MySQL

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

    690 引用 • 535 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • SendCloud

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

    2 引用 • 8 回帖 • 483 关注