求 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 中新增加代码片段，然后把上面的代码粘贴过去即可。
这里有除了自动定位的其他代码。 自动定位就做个监听， 针对 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 了。
ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。
Latke 是一款以 JSON 为主的 Java Web 框架。
深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。
Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。
1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。
确认过眼神后的灵魂连接，站在链在！
iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。
WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。
RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。
Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。
Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。
H2 是一个开源的嵌入式数据库引擎，采用 Java 语言编写，不受平台的限制，同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式，可以兼容一些主流的数据库，因此采用 H2 作为开发期的数据库非常方便。
Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器，在 1999 年被捐献给 ASF（Apache Software Foundation），隶属于 Jakarta 项目，现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范，同时也提供 HTTP 服务，是市场上非常流行的 Java Web 容器。
百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。
发布对别人有帮助的原创内容是最好的 SEO 方式。
Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。
jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。
JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。
Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。
LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。
资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。
Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。
生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。
Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。
