为了让文档层级导航插件能用于 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

  • 思源笔记

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

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

    22026 引用 • 87866 回帖 • 4 关注
2 操作
Achuan-2 在 2024-08-09 17:41:49 更新了该帖
Achuan-2 在 2024-08-09 16:37:24 更新了该帖

相关帖子

欢迎来到这里!

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

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

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

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

    1 回复
  • 其他回帖
  • 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

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

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

Achuan-2
给时间以生命而不是给生命以时间,给我买包辣条 https://www.yuque.com/achuan-2 上海

推荐标签 标签

  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 743 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 533 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 163 关注
  • Firefox

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

    8 引用 • 30 回帖 • 407 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 452 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 20 关注
  • GitHub

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

    209 引用 • 2031 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    176 引用 • 815 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 489 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    88 引用 • 1235 回帖 • 406 关注
  • uTools

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

    6 引用 • 14 回帖 • 3 关注
  • LaTeX

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

    12 引用 • 53 回帖 • 82 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 618 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖
  • 996
    13 引用 • 200 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 474 关注
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 683 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 154 关注
  • danl
    129 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 2 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 4 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    46 引用 • 25 回帖