为了让文档层级导航插件能用于 MOC 笔记法,我写了一个对反链进行过滤的代码片段

本贴最后更新于 319 天前,其中的信息可能已经沧海桑田

使用 dailynote 笔记法的用户,会倾向于用 moc 来管理笔记,而不用文档树管理笔记,管理文档链接而不管理文档,这时候「文档层级导航插件」的显示父子文档功能就没有什么导航作用了,需要靠反链的文档来导航,显示相关文档。

由于使用 dailynote 积累笔记,反链有很多 dailynote,但这些 dailynote 和这篇文档的主题无关系只有补充信息。

我希望文档层级导航插件的反链展示可以只展示与本文档真正有关联的笔记(即真正的相关笔记),排除 dailynote 的干扰,因此希望是可以有一个选项可以过滤掉这些 dailynote 的

我给插件提了一个 issue:反链能支持排除 dailynote 笔记嘛 · Issue #64 · OpaqueGlass/syplugin-hierarchyNavigate (github.com)

暂时没得到回复,于是自己问 GPT 写了一个 js 代码片段,先用上了

具有如下功能

  1. 通过正则过滤 dailynote 笔记,此外我还有周总结、月总结的习惯,也希望反链不出现这些笔记。可以根据需要修改 filterPatterns 变量的正则表达式
  2. 对反链的文档进行排序
  3. 我习惯 moc 笔记添加前缀 @,所以额外处理,将 moc 笔记放在最前面
(async ()=>{function filterAndReorderLinks() { const filterPatterns = [ /^\d{8} \w{3}$/, // Example: 20240728 Sun /^\d{6}$/, /^\d{8} ~ \d{8}$/, /^\d{8} \- \d{8}$/ // Add more patterns here if needed ]; const containers = document.querySelectorAll("div.og-hierachy-navigate-backlink-doc-container"); if (containers.length === 0) { return; } containers.forEach(container => { const refLinks = container.querySelectorAll("span.refLinks.docLinksWrapper"); if (refLinks.length === 0) { return; } // Hide elements that match any pattern in filterPatterns refLinks.forEach(link => { const docName = link.getAttribute("title"); if (filterPatterns.some(pattern => pattern.test(docName))) { link.style.display = "none"; } else { link.style.display = ""; // Reset display property if it doesn't match } }); // Separate elements into two arrays: one for @-prefixed and one for otherItems const mocItems = []; const otherItems = []; refLinks.forEach(link => { const docName = link.getAttribute("title"); if (docName.startsWith("@")) { mocItems.push(link); } else { otherItems.push(link); } }); // Sort the 'otherItems' array based on the 'title' attribute in ascending order otherItems.sort((a, b) => { const titleA = a.getAttribute("title").toUpperCase(); // Ignore upper and lowercase const titleB = b.getAttribute("title").toUpperCase(); // Ignore upper and lowercase return titleA.localeCompare(titleB); }); // Clear only the refLinks elements and append them in the desired order refLinks.forEach(link => link.remove()); mocItems.concat(otherItems).forEach(link => { container.appendChild(link); }); }); } // 监控dom变化 function observeDomChange(targetNode, callback) { const config = { childList: true, subtree: true }; const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { callback(mutation); } } }); observer.observe(targetNode, config); // 返回observer,用于停止观察 // observer.disconnect(); return observer; } // 等待元素渲染完成后执行的函数 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 { // 如果元素不存在,等浏览器再次重绘,递归调用checkForElement,直到元素出现 requestAnimationFrame(checkForElement); } }; checkForElement(); }); } // 等待笔记区出现 whenElementExist(".layout__center").then((element)=>{ const observer = observeDomChange(element, (mutation) => { // 监听弹窗代码列表 if(mutation.target.classList.contains("protyle-top") || mutation.target.classList.contains("og-hn-heading-docs-container")) { setTimeout(filterAndReorderLinks, 100); } }); }); })();

使用

Clip20240806194319.png

运行前Clip20240806194059.png

自定义 js 运行后Clip20240806194110.png

  • 思源笔记

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

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

    26050 引用 • 108146 回帖
2 操作
Achuan-2 在 2024-08-09 17:41:49 更新了该帖
Achuan-2 在 2024-08-09 16:37:24 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • mydreamsxh

    确实好用,在这基础上稍微修改一下自己就能用了,感谢。

    我在你这个基础上增加了隐藏链接末尾为*的文档,这样就可以手动标记来完成已经被整理过的反链的筛选,不过还是有点问题,就是这个筛选只针对于文档标题的引用,粒度有点大。

    1 回复
  • Achuan-2 via Android

    因为我还是喜欢文档来管理内容,也能更沉浸去创作。

    目前块引用也基本是文档引用,块粒度的引用对我而言,不如文档引用安全,容易失效

  • Achuan-2

    学习这篇帖子代码片段实现代码块最近使用的语言置顶 - 链滴 (ld246.com)

    放弃 setInterval 定时执行,用了 MutationObserver 来监控 DOM 变化

    (async ()=>{function filterAndReorderLinks() { const filterPatterns = [ /^\d{8} \w{3}$/, // Example: 20240728 Sun /^\d{6}$/, /^\d{8} ~ \d{8}$/, /^\d{8} \- \d{8}$/ // Add more patterns here if needed ]; const containers = document.querySelectorAll("div.og-hierachy-navigate-backlink-doc-container"); if (containers.length === 0) { return; } containers.forEach(container => { const refLinks = container.querySelectorAll("span.refLinks.docLinksWrapper"); if (refLinks.length === 0) { return; } // Hide elements that match any pattern in filterPatterns refLinks.forEach(link => { const docName = link.getAttribute("title"); if (filterPatterns.some(pattern => pattern.test(docName))) { link.style.display = "none"; } else { link.style.display = ""; // Reset display property if it doesn't match } }); // Separate elements into two arrays: one for @-prefixed and one for otherItems const mocItems = []; const otherItems = []; refLinks.forEach(link => { const docName = link.getAttribute("title"); if (docName.startsWith("@")) { mocItems.push(link); } else { otherItems.push(link); } }); // Sort the 'otherItems' array based on the 'title' attribute in ascending order otherItems.sort((a, b) => { const titleA = a.getAttribute("title").toUpperCase(); // Ignore upper and lowercase const titleB = b.getAttribute("title").toUpperCase(); // Ignore upper and lowercase return titleA.localeCompare(titleB); }); // Clear only the refLinks elements and append them in the desired order refLinks.forEach(link => link.remove()); mocItems.concat(otherItems).forEach(link => { container.appendChild(link); }); }); } // 监控dom变化 function observeDomChange(targetNode, callback) { const config = { childList: true, subtree: true }; const observer = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { callback(mutation); } } }); observer.observe(targetNode, config); // 返回observer,用于停止观察 // observer.disconnect(); return observer; } // 等待元素渲染完成后执行的函数 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 { // 如果元素不存在,等浏览器再次重绘,递归调用checkForElement,直到元素出现 requestAnimationFrame(checkForElement); } }; checkForElement(); }); } // 等待笔记区出现 whenElementExist(".layout__center").then((element)=>{ const observer = observeDomChange(element, (mutation) => { // 监听弹窗代码列表 if(mutation.target.classList.contains("protyle-top") || mutation.target.classList.contains("og-hn-heading-docs-container")) { setTimeout(filterAndReorderLinks, 100); } }); }); })();
    1 操作
    Achuan-2 在 2024-08-09 17:41:12 更新了该回帖

推荐标签 标签

  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖 • 2 关注
  • GitHub

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

    209 引用 • 2040 回帖
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 190 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 1 关注
  • 自由行
    4 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 616 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 737 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    76 引用 • 1742 回帖 • 2 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 644 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖
  • OpenCV
    15 引用 • 36 回帖 • 7 关注
  • RESTful

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

    30 引用 • 114 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    82 引用 • 411 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖 • 2 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 33 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 706 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 490 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 645 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 534 回帖
  • 职场

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

    127 引用 • 1708 回帖
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • SOHO

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

    7 引用 • 55 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    300 引用 • 767 回帖
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    500 引用 • 1395 回帖 • 243 关注