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

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

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

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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

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

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

  • mydreamsxh

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

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

    1 回复
Achuan-2
公众号:https://mp.weixin.qq.com/s/_NrGwjJnEta0oT5a6EKdiA 知乎:https://www.zhihu.com/column/c_1922583788405359964 上海

推荐标签 标签

  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 403 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    135 引用 • 798 回帖 • 2 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    14 引用 • 84 回帖
  • 工具

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

    308 引用 • 773 回帖
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    174 引用 • 414 回帖 • 344 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 350 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 458 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 1 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 636 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 847 关注
  • NetBeans

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

    78 引用 • 102 回帖 • 724 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 260 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 702 关注
  • 分享

    有什么新发现就分享给大家吧!

    251 引用 • 1801 回帖 • 1 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖 • 1 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    201 引用 • 120 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 1 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 565 关注
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    110 引用 • 153 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 429 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    6 引用 • 35 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 56 关注