登录注册

[js] 求助 js 代码，左键展开文档树，中键打开文档

基于以上帖子及下面的“中键展开文档树”的代码，哪位大佬能帮忙写一个 js 代码，实现以下功能:

如果当前文档下面含有子文档:

鼠标左键文档树条目，展开文档树（显示该文档下的子文档），不打开文档
鼠标中键文档树条目，不展开文档树，打开文档（原左键的默认功能）

先感谢 @zxkmm，@Undii，@wilsons 等大佬的相关插件、代码和热心帮助！


// 中键展开文档树：基于https://ld246.com/article/1682476267736
(function(){
    let g_reset = setInterval(main, 2000);

    function main() {
        if (document.querySelector('.sy__file')) {
            clearInterval(g_reset);
        }else{
            return false;
        }
        document.querySelector('.sy__file').addEventListener('mousedown', event => {
            if (event.button != 1) return;
            let notTitleFlag = false;
            if (!event.target.classList.contains('b3-list-item__text')) notTitleFlag = true;
            let target = event.target.parentNode;
            let temp = event.target;
            //console.log("0426",event);
            for (let i = 0; i < 4 && temp; i++) {
                if (temp?.getAttribute("data-type") == "navigation-file"
                    || temp?.getAttribute("data-type") == "navigation-root") {
                    target = temp;
                    break;
                }
                temp = temp?.parentNode;
            }
            //console.log("0426target", target);
            if (target?.getAttribute("data-type") == "navigation-file"
              || target?.getAttribute("data-type") == "navigation-root") {
                const b3ListItemToggle = target.querySelector('.b3-list-item__toggle');
                const title = target.querySelector('.b3-list-item__text');
                if (b3ListItemToggle.classList.contains('fn__hidden')) return;
                event.preventDefault();
                b3ListItemToggle.click();
                if (event.ctrlKey) {
                    title.click();
                }
            }
        }, true);
    }
})();

思源笔记

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

融合块、大纲和双向链接，重构你的思维。
24517 引用 • 100325 回帖
代码片段

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

用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。
126 引用 • 847 回帖 • 1 关注
Q&A

提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
9259 引用 • 42109 回帖 • 118 关注

4 操作

wilsons 在 2025-01-13 09:04:54 更新了该帖

wenbocn 在 2025-01-12 23:03:59 更新了该帖

wenbocn 在 2025-01-09 15:21:16 更新了该帖

wenbocn 在 2025-01-09 15:04:16 更新了该帖

wenbocn 2 个月前济南位置

800 悬赏

1 感谢

2 收藏

4 操作

32 回帖

624 153 174 297

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

zxkmm • 2 个月前 • 1
付费者支持者捐赠者

~~我等下写到插件里面吧~~

1 回复
zxkmm • 2 个月前 • 1 • 2 评论
付费者支持者捐赠者

等等，不对，查有没有子文档我不太会查，还是不写了

遇到问题, 解决问题, 放弃问题

EmberSky • 1 个月前

@EmberSky 笑鼠。不过现在写好了

zxkmm • 1 个月前
zxkmm • 2 个月前 • 1 • 2 评论
付费者支持者捐赠者

可以尝试一下找个 ai，把我的插件源码全都复制过去然后让它加功能就行，插件的功能性代码全都在 index.ts，我感觉 ai 会写 sql，我不会写所以没办法查子文档

我感觉最理想的设计应该是：点之后如果这个文档是空的，就作展开操作，否则如果文档不是空的，就作打开文档操作。但还是因为我不会写 sql 所以没办法写这个功能

1 回复

大佬，判断是否有子文档不用写 SQL 也可以，1，data-count 属性判断（貌似最新版才行，3.1.14 后是可以，旧版不支持实时更新，需要刷新才行），2，.b3-list-item__arrow 是否有小箭头判断

wilsons • 2 个月前 • 2

@wilsons 👍🏻👍🏻

wenbocn • 2 个月前
wenbocn • 2 个月前 via Android
付费者作者

大佬，中键展开文档树的代码就能区分是否有子文档，您能否再看看或试一下这个 js🙏🏻

1 回复
wenbocn • 2 个月前 via Android
付费者作者

用文档图标是否是文件夹判断也行的
zxkmm • 2 个月前 • 1 • 3 评论
付费者支持者捐赠者
感谢您的提醒。

这个实现挺聪明的，看 toggle 有没有加了隐藏的 css class,可能比查表还快
```
if (b3ListItemToggle.classList.contains('fn__hidden')) return;
```
但有一个关键问题是，这个判断其实是没有用的。因为你可以直接假设它有子文档。这种情况下它真有，那很好，展开。如果它没有，那也很好，它打开。所以这个判断是没有作用的

zxkmm • 2 个月前 • 1

我刚刚翻到一个可能可以照抄的 sql：查询当前笔记本下的所有文档，并列出该文档已被加入的数据库，如果没有加入，则为空这个判断会有用我感觉

zxkmm • 2 个月前 • 1

@zxkmm 😂 大佬我不懂，您看着弄 👍🏻👍🏻

wenbocn • 2 个月前 • 1
zxkmm • 2 个月前 • 1 • 14 评论
付费者支持者捐赠者

另外如果实现了不需要给我积分。因为积分对我没有用。可以给 @wilsons， ta 是订阅用户。积分对他有用

1 回复

大佬不用，一码归一码，你的功劳当然得给你。 @wenbocn 可以帮他 github star 他需要 star

wilsons • 2 个月前 • 1

@wilsons 收到，感谢两位大佬的帮忙！👍🏻👍🏻

wenbocn • 2 个月前

@wilsons 因为如果实现的话我会用您的 sql

zxkmm • 2 个月前 • 1

@zxkmm 功劳有限，如果用 SQL 判断是否有子文档，用 select count(*) as count from blocks where path like '% 文档 id%' and type = 'd';这个应该就行了吧，cout > 1 有子文档

wilsons • 2 个月前

@wilsons 刚才发现思源内核有 getChildBlocks 这个对我来说简单点

zxkmm • 2 个月前 • 1

@zxkmm 不可以，这个判断的是块，比如标题是否有子块等，不能判断文档是否有子文档，如果传入文档 id 获取的是文档下的所有块。 await requestApi('/api/block/getDocInfo', {id: '20241113081003-xl24lyy'}) 这个 api 可以，返回结果有个 subFileCount 字段可以判断。

wilsons • 2 个月前

@wilsons 我现阶段是发现 getChildBlocks 的每个 item, 然后遍历所有的 item,如果 item 没有 markdown 字段，说明是空的，如果有 markdown 字段，说明不是空的，从而说明文档不是空的。因为空文档总是有一个空块，不知道 sql 怎么处理（然后不需要遍历所有 item,我写了一个阈值，如果是连续三个都是空的就是算是空的，因为虽然明面上思源不可能打出连续两个空块，但是有的用户可能有这种样子的东西，因为各种因素））

zxkmm • 2 个月前 • 1

@wilsons 具体方案我刚才 push 了代码，可以康康：）

zxkmm • 2 个月前 • 1

@zxkmm 我觉得不太对，我前面 3 行都空，第 4 行有东西也可以呀，需要全部遍历，要么用箭头函数，比如，空文档：childBlocks.find(b => b.markdown)===undefined，!==undefined 是非空文档

wilsons • 2 个月前

@wilsons 有的人用单个文档来存小说，遇到这种情况如果全都遍历会卡死的。所以我只能放弃前三个块都是空的情况。而且思源的编辑器本身也就不支持同时两个空块。只是可能会有一部分插件造成这种现象，所以这个本身就是 edge case

zxkmm • 2 个月前 • 1

@zxkmm 没太懂你说的空块是指什么？一直回车不输入东西，不是可以连续多个空块吗？如果内容过多，可以用 SQL，SQL 有索引，没有性能瓶颈，select count(*) as count from blocks where root_id = '文档 id' and type != 'd' and markdown != ''; count>0 不为空

wilsons • 2 个月前

@wilsons 谢谢，等我明早换成用 sql 看看

zxkmm • 2 个月前 • 1

@zxkmm 等等，刚才看了下 blocks 竟然只有 id,parent_id,root_id 加了索引，这样的话貌似索引效果不大，等会提个 issue

wilsons • 2 个月前

@wilsons 我是第一个给他的 github 点赞的 😁

wenbocn • 1 个月前
wenbocn • 2 个月前 via Android
付费者作者

收到，感谢两位大佬的帮忙！👍🏻👍🏻
zxkmm • 2 个月前
付费者支持者捐赠者

我这边鼠标中键无法覆盖思源本身的“新窗口打开”行为。
wenbocn • 2 个月前 • 5 评论
付费者作者

感谢两位大佬，辛苦啦！！！@zxkmm @wilsons

在思源笔记中，如果某个文档下面有子文档，会在这个文档的前面加上箭头（思源本身带有的功能）。是不是这个思源本身判断是否加箭头用的相关代码，是最适合用来判断是否有子文档的，是否用一下这些代码？

是的，暂且不说是不是最好的，但是判断子文档没有用处。因为你可以直接假设它有子文档。这种情况下如果它真有，那很好，展开。如果它没有，那也很好，它打开。所以这个判断是没有作用的，因为不用判断时候它已经是达成了预期的目的了

zxkmm • 2 个月前 • 1

@zxkmm 也就是不管有没有子文档，都会即打开，又展开吗？是不是这样在右侧打开的页签窗口就会显示一些空白文档了？

wenbocn • 2 个月前

@zxkmm 与这个 js 功能相似？在打开页面的同时，自动展开该页面的子页面一个小建议：能否在打开页面的同时，自动展开该页面的子页面

wenbocn • 2 个月前

@zxkmm 非也，没判断前，无论有没有箭头，即无论是否有子目录，都是打开文档

wilsons • 2 个月前

@wilsons 我指的是如果在我的插件的基础上

zxkmm • 2 个月前 • 1
wenbocn • 1 个月前 • 1 评论
付费者作者

感谢 @zxkmm 大佬更新插件！已经把您的评论内容能点赞的都点赞了！非常感谢！👍

但还是想要一个 js 代码，因为后面如果有其它想法的话（例如忽然觉得按文件图标区分可能更好，而不是按是否有子文档），自己可能以问询 AI，就能简单修改一下，具有较大的可操作性。因此还是想要一个 js 代码，请问 @wilsons 大佬能否帮忙写一个 js 代码，谢谢！！

2 回复

插件有设置的，你可以自由开关

zxkmm • 1 个月前
wilsons • 1 个月前
付费者捐赠者

好的，我空了试试吧。今天打算写写文章和教程，怕以后自己长时间不用思源忘了，备用。今天状态不佳，可能没休息好，以前想写的，硬是感觉没内容可写了。😳

1 回复
wenbocn • 1 个月前 • 1 赞同
付费者作者

是的，有时也会这样。所以平时有想法时，即便方案不完善，也要随便记上几笔。不然仅靠脑袋回想当时的想法确实总是会感觉丢了一些东西。辛苦大佬，先好好休息！
zxkmm • 1 个月前
付费者支持者捐赠者

然后其实不用给我点赞，因为积分对我没啥用
wilsons • 1 个月前 • 2 • 5 评论
付费者捐赠者

已经实现了，代码 https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%B7%A6%E4%BE%A7%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E9%94%AE%E6%89%93%E5%BC%80%E5%92%8C%E7%82%B9%E5%87%BB%E5%B1%95%E5%BC%80.js

pc 版中键打开，单击展开
触屏版长按打开，点击展开

@zxkmm 我发现一个方便判断是否空文件的 api /api/block/getTreeStat 传入文档 id 即可，返回值有个字段 runeCount 代表字符个数的意思 0 是空文档，大于 0 非空文档

1 回复

感谢,等我油孔对比下哪种比较快

zxkmm • 1 个月前

快慢这个要看思源 api 实现了，不过，这个比较精准。其实之前还想到一种方法，就是通过/api/filetree/getDoc 获取文档的内容，由于这个 api 是动态加载，一般不会加载太多内容，然后空文档的时候，这个返回结果的 content 字段长度是 239，可以依据这长度判断，比如大于 500 铁定非空文档，小于 500 的话，就用 lute 把块转换为 markdown 去掉换行和{: xxx}标记后，看内容是否为空，为空则是空文档，为什么选 500，为了兼容性更好，也可以直接用 239 判断，但不知道不同版本是否有出入。

wilsons • 1 个月前 • 1

@wilsons 话说 runeCount 和 wordCount 有啥区别（b.t.w.我对比了下发现 sql 和 api 速度没有太多差别）

zxkmm • 1 个月前

@zxkmm runeCount 是字符统计，比如 hello 有 5 个字符；wordCount 是字统计，英文是单词，中文应该是一个汉字，比如 Hello, 世界! 😊 是 7 个字，hello 是 1 个，逗号，空格，感叹号，表情各 1 个，世界 2 个，共 7 个，在编辑器里可以测试下。另外，我刚才大致看了下 getTreeStat 是一次性读入 sy 文件到内存，文件大了应该有性能瓶颈，还是建议使用 getDoc api 这个是动态加载按需加载，就是实现起来复杂了些。

wilsons • 1 个月前 • 1

@wilsons 感谢大佬

zxkmm • 1 个月前
wenbocn • 1 个月前
付费者作者

赞，太给力了 👍 👍👍

一个小问题，按中键打开文档时，能否取消原中键的滚动功能？

1 回复
wilsons • 1 个月前 • 1
付费者捐赠者

可以了，更新下代码再试试

1 回复
wenbocn • 1 个月前 • 8 评论
付费者作者

可以了，非常感谢！！现在的方式就是我原来预期的结果。👍 👍👍

今天 @zxkmm 新提出了一种方案，左键点击文档条目，如果文档为空，且有子文档的话，展开不打开；如果文档不为空的话，打开且展开。感觉这个方案也很好，请问您方便添加上这个选项吗？

另外，能否中键点击最后一级文档，也能够打开？

1 回复

已经实现在插件里面了

zxkmm • 1 个月前

最后一级文档是什么意思？意思是中键无论点击文档还是文件夹都打开？

wilsons • 1 个月前

@wilsons 是的

wenbocn • 1 个月前

@wilsons 或者改为，发现文档内容为空，而且有子文档的话，自动设置其图标为文件夹形式。而内容不为空的不更改。只修改文件图标，不更改打开方式，这样可以吗？

wenbocn • 1 个月前

@wenbocn 都行，看你需要，建议想清楚使用场景后决定哪种方式，不然到时候不能满足需要就白忙活了。

wilsons • 1 个月前

@wilsons 判断文件是否为空，修改文件图标，不更改打开方式。感觉这种方式好，请大佬帮忙改一下 js，非常感谢 😁

wenbocn • 1 个月前

@wenbocn 确认下，1. 中键无论点击文档还是文件夹都打开 2. 文件夹被单击的时候，如果文件内容为空，修改为指定的图标，对吗？

wilsons • 1 个月前

@wilsons 是的是的。

wenbocn • 1 个月前
wilsons • 1 个月前 • 1
付费者捐赠者

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%B7%A6%E4%BE%A7%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%AD%E9%94%AE%E6%89%93%E5%BC%80%E5%92%8C%E7%82%B9%E5%87%BB%E5%B1%95%E5%BC%80.js#

应该没啥问题。

// 空文件夹图标代码 📂 1f4c2 📁 1f4c1
const emptyFolderIconCode = '1f4c2';

@wenbocn 为了通用性，我加了两个变量，isUpdateFolderIconWhenItEmpty 是否更改文件夹图标，默认不更改，如果你下次复制代码把这个参数改为 true 就好了

openFolderBy 文件夹打开方式，默认中键，可设置为双击

// 是否更改空文件夹图标
const isUpdateFolderIconWhenItEmpty = false;

// 打开文件夹的方式 midclick 中键 dblclick 双击
const openFolderBy = 'midclick';

3 回复

1 操作
wilsons 在 2025-01-13 08:56:00 更新了该回帖
wenbocn • 1 个月前
付费者作者

我这边文件图标修改没起作用呢（win11），我试一下 win10 系统
wenbocn • 1 个月前
付费者作者

能否确认一下，我这边文件图标修改没有其作用呢，win10、win11 都不行，思源版本 3.1.19

1 回复
wilsons • 1 个月前
付费者捐赠者

我 Mac 3.1.10 和 Windows 3.1.14 都没问题，我等下升级下试试。

要确保文件夹是是空的，不能有任何非空字符

1 回复
wenbocn • 1 个月前
付费者作者

可能是新版本的问题，在 3.1.19 中，新建一个文档，默认是这样的

1 回复
wilsons • 1 个月前
付费者捐赠者

改好了，重新更新下代码，思源新版 api 变了，没有向下兼容。

目前仅点击时，文件夹是空文件才更改图标，中键没支持，如果支持的话加上调用就好，看你需要。

2 回复
wenbocn • 1 个月前 • 2 评论
付费者作者

好用了 👍👍👍 。

中键没支持的意思的中键点击不会修改文件夹图标是吗？

是的

wilsons • 1 个月前

@wilsons 感谢提醒，感觉不需要中键修改图标，不添加这个功能了。

wenbocn • 1 个月前
wenbocn • 1 个月前 • 3 评论
付费者作者

请问能否判断文档是否已经自定义图标了，如果已经自定义了的话，不修改？

1 回复

1 操作
wenbocn 在 2025-01-13 00:51:26 更新了该回帖

没判断，你要说明下什么是默认图标，现在默认图标可以修改，siyuan 配置中的图标为依据可以，比如，不是配置中的图标认为是用户自定义，否则就是默认，但这个默认也是可以设置的，反正就是以这个设置为默认，用户手动选择的为非默认可以吧。

wilsons • 1 个月前

@wilsons 能否以在文档中没有显示图标为默认，默认的情况下，打开文档是没有图标的

wenbocn • 1 个月前

@wilsons 好的，你考虑的周到 👍

wenbocn • 1 个月前
wilsons • 1 个月前
付费者捐赠者

这个不是没有图标，是默认图标，你可能说的是图标选择窗口，那是程序判断的事情，事实上是有默认图标的
wilsons • 1 个月前 • 2
付费者捐赠者

改好了，再更新代码试试

// 思源默认图标，首先读取用户自定义的默认图标，没有用官方默认图标，也可在这里写死
const defaultIconCode = siyuan?.storage["local-images"]?.folder || '1f4d1';

1 回复
wenbocn • 1 个月前 • 2 评论
付费者作者

完美，非常感谢！解决了一大痛点！👍 👍👍

不客气哈，早点休息，886

wilsons • 1 个月前

@wilsons 哈哈，安心睡觉啦，886

wenbocn • 1 个月前
Floria233 • 1 个月前 • 1 评论
付费者

感谢，这个关注好几天了，确实很有用。我也有差不多类似的需求，只是之前一直偷懒没有多想（懒到宁愿一直用文档树那个小折叠号，一直都这么麻烦），而且也描绘不清楚这个痛点究竟该怎么解决，800 分太壕了，感谢发帖的大大和回帖的大大 😄 造福一众小白啊哈哈

壕无人性

EmberSky • 1 个月前
wenbocn • 1 个月前 • 4 评论
付费者作者
发现一个小技巧，使用下面的 css，使文档树条目前图标点击无效（不弹出修改图标的选项），配合本帖 @wilsons 大佬的 js，可实现左键点击文档树条目前图标打开文档，点击条目文字内容展开文档树的功能。
```
/* 条目前图标点击无效 */
.b3-list-item__icon {
  pointer-events: none !important;
}
```
👍 我当时注意到了这个图标问题，由于不通用就没加，有些人还是需要点击修改图标的。手机版由于图标不能更改，就加了同文本点击同样的功能。

wilsons • 1 个月前

@wilsons 👍👍 很专业，你能想的很周到，赞！

wenbocn • 1 个月前

@wenbocn 其实还有一点忽略的地方，目前的方式不支持动态创建的笔记本及从关闭恢复的笔记，必须刷新下页面才行，按理说应该监控笔记创建等，但这种场景不多，且刷新下就解决了，增加监控带来复杂度就没加，其实链滴很多代码都会有这些问题，所以有时刷新是解决问题的万能办法。😄

wilsons • 1 个月前

@wilsons OK，收到，已经很好了。很实用。

wenbocn • 1 个月前
wenbocn • 1 个月前
付费者作者

👍👍 收到

请输入回帖内容 ...

wenbocn

济南

回帖

418

帖子

积分

13354

[js] 求助 js 代码，左键展开文档树，中键打开文档

相关帖子

[js][css] 分享一个类语雀代码块折叠 JS

[js] 调用 Lute 的正确方式

[js] 显示折叠列表节点下的子节点数

[js] 文档树文档置顶和设置颜色

[css] 搭配 QYL 主题使用的 CSS 代码

[js] 给笔记本添加文档数

[js] 工作栏增加搜索选中文本或访问选中链接，支持 ai 搜索和翻译

欢迎来到这里！

近期热议

推荐标签标签

最新标签

[js] 求助 js 代码，左键展开文档树，中键打开文档

相关帖子

[js][css] 分享一个类语雀代码块折叠 JS

[js] 调用 Lute 的正确方式

[js] 显示折叠列表节点下的子节点数

[js] 文档树文档置顶和设置颜色

[css] 搭配 QYL 主题使用的 CSS 代码

[js] 给笔记本添加文档数

[js] 工作栏增加搜索选中文本或访问选中链接，支持 ai 搜索和翻译

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签