求 js 代码，在使用“始终定位打开的文档”功能时，只展开当前文档的文档树，自动关闭（不展开）其它无关的文档树。例如：
有笔记本 A，内有文档 A1，子文档 A2、子子文档 A3。
有笔记本 B，内有文档 B1，子文档 B2、子子文档 B3。
已将文档 A2、B2 打开，显示在上方页签栏中。
启用“始终定位打开的文档”功能。
点击 A2 页签，左侧文档树自动展开，并定位到 A-A1-A2；A3 列表不展开
点击 B2 页签，左侧文档树自动展开，定位到 B-B1-B2；同时关闭 A-A1-A2 文档树的展开状态，恢复到笔记本 A。也就是仅保留当前活动页签对应的文档树是展开状态，其它文档树分支全部关闭，包括当前活动文档的子文档树。
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
时隔 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 中新增加代码片段，然后把上面的代码粘贴过去即可。
确实是焦点问题，楼主主要想要的是定位文档树，且定位和展开关闭目录使用了模拟点击，这些操作都会使当前文档的焦点移动到目录树上，导致大纲还没来得及切换就失去焦点文档了。
其实，定位文档树也是要获得焦点的，这和文档焦点矛盾，具体怎么做看自己需求，是希望最后焦点落在哪里？
如果想最终焦点落在文档树上，可以在 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';
这里有除了自动定位的其他代码。 自动定位就做个监听， 针对 class layout__wnd--active ，发现有 tab 的变化，就触发一次，locateDoc() 即可。
这里有除了自动定位的其他代码。 自动定位就做个监听， 针对 class layout__wnd--active ，发现有 tab 的变化，就触发一次，locateDoc() 即可。
大佬能有空帮忙写一个直接可用的代码或插件吗，这个帖子的 888 积分也悄悄给你，🤫
时隔 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 中新增加代码片段，然后把上面的代码粘贴过去即可。
发了 https://sypai.cc/archives/977/
@wenbocn 从代码中提取的这段代码，本意是想通过标签的 aria-label 属性实现，如果展开的笔记是当前点击的文档所在笔记不再折叠再展开了，这样防止出现跳动。但现在想来如果同一个笔记下，展开多个目录可能会导致同个笔记下的文档切换时不再折叠，不知道是否符合你的需求，如果不符合，建议把这段代码删除。而且这段代码在打开文档时还会出现跳动，实现并不完美。
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;
}
}
比如，如下场景不会折叠同个笔记下的目录
使用 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); });
把这个
// 定位当前笔记
document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
改为下面这个就好了
// 定位当前笔记
if(document.querySelector('#dockLeft span[data-type="file"].dock__item--active')) {
document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
}
不过，我测试下来，还是会闪动的。
@wenbocn 我已完美实现了不闪动的版本，并且改进了官方定位，在未打开目录树时，左侧 dock 区目录树显示隐藏按钮样式会获取焦点的 bug
效果如下
完整代码如下
由于链滴代码长度有限制，只能放到 jsrun 了。
确实是焦点问题，楼主主要想要的是定位文档树，且定位和展开关闭目录使用了模拟点击，这些操作都会使当前文档的焦点移动到目录树上，导致大纲还没来得及切换就失去焦点文档了。
其实，定位文档树也是要获得焦点的，这和文档焦点矛盾，具体怎么做看自己需求，是希望最后焦点落在哪里？
如果想最终焦点落在文档树上，可以在 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';
Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。
这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！
Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成，还支持通过插件进行扩展。
有什么新发现就分享给大家吧！
RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。
Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。
SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。
微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。
Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。
Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。
CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。
Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。
IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。
一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。
SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。
React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。
你创造的作品可能会帮助到很多人，如果是开源项目的话就更赞了！
希望你我能在旅途中找到人生的下一站。
汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。
主仓库地址：Hi-Windom/Sillot
文档地址：sillot.db.sc.cn
注意事项：
JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。
微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。
网络爬虫（Spider、Crawler），是一种按照一定的规则，自动地抓取万维网信息的程序。