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

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

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 打赏
  • 思源笔记

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

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

    21949 引用 • 87451 回帖 • 1 关注
  • 代码片段

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

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

    51 引用 • 278 回帖
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

推荐标签 标签

  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 638 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 2 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖 • 2 关注
  • 外包

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

    26 引用 • 232 回帖
  • 智能合约

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

    1 引用 • 11 回帖 • 6 关注
  • 钉钉

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

    15 引用 • 67 回帖 • 339 关注
  • SQLite

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

    5 引用 • 7 回帖
  • V2Ray
    1 引用 • 15 回帖
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 机器学习

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

    83 引用 • 37 回帖
  • 国际化

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

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

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 385 关注
  • OnlyOffice
    4 引用 • 3 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 402 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1508 回帖
  • TGIF

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

    287 引用 • 4484 回帖 • 664 关注
  • Facebook

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

    4 引用 • 15 回帖 • 461 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 404 关注
  • Oracle

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

    105 引用 • 127 回帖 • 397 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 237 关注
  • 职场

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

    127 引用 • 1705 回帖
  • OpenResty

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

    17 引用 • 43 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 490 关注
  • Sym

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

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

    524 引用 • 4599 回帖 • 703 关注
  • Q&A

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

    7901 引用 • 36144 回帖 • 171 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注