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

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

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

    23073 引用 • 92841 回帖 • 1 关注
  • 代码片段

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

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

    91 引用 • 578 回帖
3 操作
JeffreyChen 在 2024-10-09 20:46:20 更新了该帖
JeffreyChen 在 2024-10-09 20:35:37 更新了该帖
JeffreyChen 在 2024-10-09 18:32:01 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • JeffreyChen 1 赞同

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

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

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

    1 回复
  • 其他回帖
  • Floria233

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

    image.png

    2 回复
  • YHXK

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

    1 回复
  • 实现了默认展开一级菜单 @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 回复
  • 查看全部回帖
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,不是 Markdown 文件编辑器; 思源笔记同步教程:ld246.com/article/1692089679062

推荐标签 标签

  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2036 回帖
  • TextBundle

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

    1 引用 • 2 回帖 • 53 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 402 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 17 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Node.js

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

    139 引用 • 269 回帖 • 31 关注
  • CodeMirror
    1 引用 • 2 回帖 • 130 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3454 回帖 • 191 关注
  • 知乎

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

    10 引用 • 66 回帖
  • 运维

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

    149 引用 • 257 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 209 关注
  • AngularJS

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

    12 引用 • 50 回帖 • 484 关注
  • SOHO

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

    7 引用 • 55 回帖 • 5 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 125 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 3 关注
  • C++

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

    107 引用 • 153 回帖 • 2 关注
  • 代码片段

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

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

    91 引用 • 578 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • Firefox

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

    8 引用 • 30 回帖 • 410 关注
  • 大疆创新

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

    2 引用 • 14 回帖
  • RabbitMQ

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

    49 引用 • 60 回帖 • 360 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖 • 1 关注
  • 职场

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

    127 引用 • 1706 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 2 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注