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

使用 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

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

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

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

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

    1 回复
  • Achuan-2

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

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

  • 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 更新了该回帖
Achuan-2
给时间以生命而不是给生命以时间,如果你喜欢我的分享,欢迎给我买杯咖啡 https://www.yuque.com/achuan-2 上海

推荐标签 标签

  • GitHub

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

    210 引用 • 2036 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    8444 引用 • 38459 回帖 • 154 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    343 引用 • 723 回帖
  • golang

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

    497 引用 • 1388 回帖 • 279 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 72 关注
  • 周末

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

    14 引用 • 297 回帖
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    77 引用 • 430 回帖 • 2 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 409 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • 资讯

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

    55 引用 • 85 回帖
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • abitmean

    有点意思就行了

    27 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 5 关注
  • sts
    2 引用 • 2 回帖 • 197 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 75 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 172 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖 • 1 关注