登录注册

求 js 代码，只展开当前活动页签的文档树

本贴最后更新于 568 天前，其中的信息可能已经时移俗易

求 js 代码，在使用“始终定位打开的文档”功能时，只展开当前文档的文档树，自动关闭（不展开）其它无关的文档树。例如：

有笔记本 A，内有文档 A1，子文档 A2、子子文档 A3。

有笔记本 B，内有文档 B1，子文档 B2、子子文档 B3。

已将文档 A2、B2 打开，显示在上方页签栏中。

启用“始终定位打开的文档”功能。

点击 A2 页签，左侧文档树自动展开，并定位到 A-A1-A2；A3 列表不展开

点击 B2 页签，左侧文档树自动展开，定位到 B-B1-B2；同时关闭 A-A1-A2 文档树的展开状态，恢复到笔记本 A。也就是仅保留当前活动页签对应的文档树是展开状态，其它文档树分支全部关闭，包括当前活动文档的子文档树。

思源笔记

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

融合块、大纲和双向链接，重构你的思维。
28446 引用 • 119789 回帖
Q&A

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

1 操作

wenbocn 在 2024-06-02 13:54:35 更新了该帖

wenbocn 1 年前济南位置

200 悬赏

1 关注

3 收藏

1 操作

35 回帖

1.8k 237 9 968 2 13 530

相关帖子

被采纳的回答

wilsons • 1 年前 • 1

付费者捐赠者

时隔 1 个多月，你解决了吗？相见即是有缘，看到此贴感觉有些思路，就尝试写了下，实现了这个功能。由于刚接触思源，对思源 api 还不是很了解，所以选择用 js 代码片段实现，纯原生 js 实现，方法比较笨，勉强能用。

不足之处也请论坛里的大佬们多多批评指正！

效果如下：

完整代码如下：

// 等待标签页容器渲染完成后开始监听
whenElementExist('.layout__center').then(async element => {
    // 等待笔记列表加载完毕
    await sleep(40);
    // 监听页签切换事件
    observeTabChanged(element, (tab) => {
        // 折叠所有笔记，然后定位当前笔记
        collapseAllBooksThenFocusCurrentBook(element, tab);
    });
});
// 折叠所有笔记，然后定位当前笔记
async function collapseAllBooksThenFocusCurrentBook(element, tab) {
    // 等待激活文档加载完毕
    await whenElementExist(()=>{
        const content = element.querySelector('.layout-tab-container [data-id="'+tab.getAttribute("data-id")+'"]');
        return content && content.getAttribute("data-loading") === "finished";
    });
    // 折叠所有笔记
    document.querySelectorAll("ul.b3-list[data-url]").forEach(async book => {
        const bookName = tab.getAttribute("aria-label")?.split('/')[0];
        if(bookName) {
            // 如果在本笔记中则不再折叠
            const bookText = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
            if(bookText === bookName) {
                return;
            }
        }
        // 折叠笔记
        const bookArrowBtn = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__toggle');
        if (bookArrowBtn && bookArrowBtn.firstElementChild.classList.contains("b3-list-item__arrow--open")) {
            bookArrowBtn.click();
        }
    });
    // 定位当前笔记
    document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
}
// 监听页签切换事件
function observeTabChanged(parentNode, callback) {
    // 创建一个回调函数来处理观察到的变化
    const observerCallback = function(mutationsList, observer) {
        // 用常规方式遍历 mutationsList 中的每一个 mutation
        for (let mutation of mutationsList) {
            // 属性被修改
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                const element = mutation.target;
                if (element.tagName.toLowerCase() === 'li' && element.getAttribute('data-type') === 'tab-header' && element.classList.contains('item--focus')) {
                    if(typeof callback === 'function') callback(element);
                }
            }
            // 如果有新的子节点被添加
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'li') {
                        if (node.getAttribute('data-type') === 'tab-header' && node.classList.contains('item--focus')) {
                            if(typeof callback === 'function') callback(node);
                        }
                    }
                });
            }
        }
    };
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(observerCallback);
    // 配置观察器：传递一个对象来指定观察器的行为
    const config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true };
    // 开始观察目标节点
    observer.observe(parentNode, config);
    // 返回一个函数，用于停止观察
    return function stopObserving() {
        observer.disconnect();
    };
}
// 延迟执行
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            let element = null;
            if (typeof selector === 'function') {
                element = selector();
            } else {
                element = document.querySelector(selector);
            }
            if (element) {
                resolve(element);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}

使用方法：

设置》外观》代码片段》js 中新增加代码片段，然后把上面的代码粘贴过去即可。

优质回帖

wilsons • 1 年前 • 2
付费者捐赠者

@wenbocn 我已完美实现了不闪动的版本，并且改进了官方定位，在未打开目录树时，左侧 dock 区目录树显示隐藏按钮样式会获取焦点的 bug

效果如下

完整代码如下

由于链滴代码长度有限制，只能放到 jsrun 了。
wilsons • 9 个月前 • 2
付费者捐赠者
确实是焦点问题，楼主主要想要的是定位文档树，且定位和展开关闭目录使用了模拟点击，这些操作都会使当前文档的焦点移动到目录树上，导致大纲还没来得及切换就失去焦点文档了。

其实，定位文档树也是要获得焦点的，这和文档焦点矛盾，具体怎么做看自己需求，是希望最后焦点落在哪里？

如果想最终焦点落在文档树上，可以在 focusCurrentDocInTrees 函数的开头加上 sleep(120)，等待大纲切换完毕再定位

如果想最终焦点落在文档上，则在 focusCurrentDocInTrees 函数的末尾加上以下代码，定位文档树后恢复文档焦点
```
// 文档树模拟点击后恢复文档窗口（编辑器）的焦点(最终焦点在文档)
whenElementExist('.layout__tab--active .b3-list--background .b3-list-item--focus').then(() => {
    const activepPotyle = document.querySelector('[data-type="wnd"].layout__wnd--active .protyle:not(.fn__none)')||document.querySelector('[data-type="wnd"] .protyle:not(.fn__none)');
    if(activepPotyle) activepPotyle.click();
});
```
这是我修改后的代码，只需要配置这个参数即可

// 最终焦点落在文档树还是文档上？ tree 文档树，doc 文档
const lastFoucsIn = 'doc';

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%8F%AA%E5%B1%95%E5%BC%80%E5%BD%93%E5%89%8D%E6%B4%BB%E5%8A%A8%E9%A1%B5%E7%AD%BE%E7%9A%84%E6%96%87%E6%A1%A3%E6%A0%91.js
player • 1 年前 • 1 赞同
付费者捐赠者

ToolbarBox

这里有除了自动定位的其他代码。自动定位就做个监听，针对 class layout__wnd--active ，发现有 tab 的变化，就触发一次，locateDoc() 即可。

35 回帖

求 js 代码，只展开当前活动页签的文档树

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

wilsons • 9 个月前 • 2
付费者捐赠者
确实是焦点问题，楼主主要想要的是定位文档树，且定位和展开关闭目录使用了模拟点击，这些操作都会使当前文档的焦点移动到目录树上，导致大纲还没来得及切换就失去焦点文档了。

其实，定位文档树也是要获得焦点的，这和文档焦点矛盾，具体怎么做看自己需求，是希望最后焦点落在哪里？

如果想最终焦点落在文档树上，可以在 focusCurrentDocInTrees 函数的开头加上 sleep(120)，等待大纲切换完毕再定位

如果想最终焦点落在文档上，则在 focusCurrentDocInTrees 函数的末尾加上以下代码，定位文档树后恢复文档焦点
```
// 文档树模拟点击后恢复文档窗口（编辑器）的焦点(最终焦点在文档)
whenElementExist('.layout__tab--active .b3-list--background .b3-list-item--focus').then(() => {
    const activepPotyle = document.querySelector('[data-type="wnd"].layout__wnd--active .protyle:not(.fn__none)')||document.querySelector('[data-type="wnd"] .protyle:not(.fn__none)');
    if(activepPotyle) activepPotyle.click();
});
```
这是我修改后的代码，只需要配置这个参数即可

// 最终焦点落在文档树还是文档上？ tree 文档树，doc 文档
const lastFoucsIn = 'doc';

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%8F%AA%E5%B1%95%E5%BC%80%E5%BD%93%E5%89%8D%E6%B4%BB%E5%8A%A8%E9%A1%B5%E7%AD%BE%E7%9A%84%E6%96%87%E6%A1%A3%E6%A0%91.js
2 回复

1 操作
wilsons 在 2025-03-14 20:25:34 更新了该回帖
其他回帖

wenbocn • 1 年前

付费者作者

使用 ChatGPT 修改了代码，点击文档树，不会有跳动现象了。但点击标签页及正文后的输入焦点在文档内，能够正常编辑文档，但显示焦点却在文档树的按钮上，不知咋回事。

// 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            const element = typeof selector === 'function' ? selector() : document.querySelector(selector);
            if (element) {
                resolve(element);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}

// 延迟执行
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// 折叠所有笔记，然后定位当前笔记
async function collapseAllBooksThenFocusCurrentBook(tab) {
    const currentBookName = tab.getAttribute("aria-label")?.split('/')[0];

    // 等待文档加载完毕
    await whenElementExist(() => {
        const content = document.querySelector('.layout-tab-container [data-id="' + tab.getAttribute("data-id") + '"]');
        return content && content.getAttribute("data-loading") === "finished";
    });

    // 折叠所有笔记
    document.querySelectorAll("ul.b3-list[data-url]").forEach(book => {
        const bookName = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
        if (bookName !== currentBookName) {
            const bookArrowBtn = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__toggle');
            if (bookArrowBtn && bookArrowBtn.firstElementChild.classList.contains("b3-list-item__arrow--open")) {
                bookArrowBtn.click();
            }
        }
    });

    // 定位当前笔记
    document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
}

// 监听页签切换事件
function observeTabChanged(callback) {
    const observerCallback = (mutationsList) => {
        mutationsList.forEach(mutation => {
            if ((mutation.type === 'attributes' && mutation.attributeName === 'class') ||
                (mutation.type === 'childList' && mutation.addedNodes.length > 0)) {
                const focusedTab = mutation.target.closest('li[data-type="tab-header"].item--focus');
                if (focusedTab) callback(focusedTab);
            }
        });
    };

    const observer = new MutationObserver(observerCallback);
    observer.observe(document.querySelector('.layout__center'), { attributes: true, childList: true, subtree: true });
    return () => observer.disconnect();
}

// 主函数，等待容器渲染后开始监听
whenElementExist('.layout__center').then(async () => {
    await sleep(40);
    observeTabChanged(collapseAllBooksThenFocusCurrentBook);
});

1 回复

wilsons • 1 年前
付费者捐赠者

你可以录屏看看，我这边并没有发现你说的问题，可能和你的样式有关。

看我这边效果

仔细看，你会发现，当文档树隐藏时，切换标签，文档树显示隐藏按钮的焦点会闪动下，这就是切换标签时，默认的官方定位会让这个按钮聚焦，而我动态把这个聚焦给去掉了。

1 回复
wilsons • 1 年前 • 2
付费者捐赠者

@wenbocn 我已完美实现了不闪动的版本，并且改进了官方定位，在未打开目录树时，左侧 dock 区目录树显示隐藏按钮样式会获取焦点的 bug

效果如下

完整代码如下

由于链滴代码长度有限制，只能放到 jsrun 了。

5 回复

3 引用

如何实现展开这个文档树的时候，同时自动折叠另外已经打开的文档树？ • wilsons

能不能通过 API 获取“当前活动文档的 ID”？ • wilsons

求代码片段折叠的代码块仍然显示属性的命名和别名等信息 • wilsons
查看全部回帖

wenbocn

济南

回帖

462

帖子

积分

18965

求 js 代码，只展开当前活动页签的文档树

相关帖子

申请退款, 找不到退款链接

标记背景底色能修改吗

如何使笔记本折叠后，记忆之前打开的格式，再次打开时恢复

问题反馈：右边侧边栏最小过宽

如何修改鼠标选中时的文本样式?

请问文档树中「笔记本」「子文档」的选择器分别是什么？

思源有类似 sonovel 的插件吗？？

欢迎来到这里！

近期热议

推荐标签标签

最新标签

求 js 代码，只展开当前活动页签的文档树

相关帖子

申请退款, 找不到退款链接

标记背景底色能修改吗

如何使笔记本折叠后，记忆之前打开的格式，再次打开时恢复

问题反馈：右边侧边栏最小过宽

如何修改鼠标选中时的文本样式?

请问文档树中「笔记本」「子文档」的选择器分别是什么？

思源有类似 sonovel 的插件吗？？

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签