求隐藏已完成任务块的代码片段

如题,我希望能隐藏所有文档里面已完成的任务块,最好能有便捷的开关在主界面,方便随时切换。希望大佬提供代码片段,感谢

image.png

  • 思源笔记

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

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

    25917 引用 • 107407 回帖 • 2 关注
  • Q&A

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

    9950 引用 • 45199 回帖 • 77 关注

相关帖子

被采纳的回答
  • 用下面的 css 隐藏所有已完成任务

    [data-type="NodeListItem"][data-subtype="t"].protyle-task--done{ display:none; }

    然后,配合插件 quickSnippets 就可以了吧

    image.png

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • wilsons 1 3 评论

    有 bug 耶,无法保存显示隐藏状态,刷新显示状态就没了。

    解决办法:

    1 把之前的代码块代码改成这个

    // 隐藏所有已完成任务 async function main() { // css 代码 const styleContent = ` [data-type="NodeListItem"][data-subtype="t"].protyle-task--done { display: none; } `; // 定义 style 的内容 const styleId = "ShowOrHideAllDoneTask"; // 判断是否加载 const isLoading = args.includes('load'); // 获取存储状态 let status = await api.getFile('/data/storage/'+styleId+'.json'); if(!status || status.code === 404) { status = 'show'; } else { status = status.status || 'show'; } if(!isLoading) status = status === 'show' ? 'hide' : 'show'; if (status === 'show') { // 获取现有的 <style> 元素 let styleElement = document.getElementById(styleId); // 如果存在,则删除它 if(styleElement) styleElement.remove(); if(!isLoading){ await client.pushMsg({ msg: "已显示完成的任务", timeout: 3000, }); await api.putFile('/data/storage/'+styleId+'.json', false, new Blob(['{"status":"show"}'])); } } else { // 如果不存在,则创建并添加它 const newStyle = document.createElement("style"); newStyle.id = styleId; newStyle.textContent = styleContent; document.head.appendChild(newStyle); if(!isLoading){ await client.pushMsg({ msg: "已隐藏完成的任务", timeout: 3000, }); await api.putFile('/data/storage/'+styleId+'.json', false, new Blob(['{"status":"hide"}'])); } } } main(); plugin.saveAction(thisBlock.id, "显示/隐藏所有已完成任务");

    2 给 js 代码块命名为 ShowOrHideAllDoneTask

    image.png

    3 把代码块保存为可调用方法

    image.png

    4 添加新的 js 代码片段(注意是设置/外观/代码片段,不是编辑器里的代码块),代码片段中输入以下代码即可

    runJs.plugin.call('ShowOrHideAllDoneTask', 'load')

    image.png

    好滴,不说都没发现
    5kyfkr
    @5kyfkr 注意,第 4 步一般情况下没有问题,如果频繁失效的话,可以用这段代码放到 js 代码片段中 https://pipe.b3log.org/blogs/wilsons/articles/2025/04/01/1743459076732#toc_h2_6 然后把其中的 runJs.siyuan.showMessage("Hello!");换成 runJs.plugin.call('ShowOrHideAllDoneTask', 'load')即可。
    wilsons
    @wilsons 好滴,我这第四步感觉没什么问题,先收藏了
    5kyfkr
  • 其他回帖
  • 5kyfkr

    感谢大佬,非常优雅,完美了 ❤️👍

    1 回复
  • 5kyfkr 1 评论

    感谢大佬是我要的效果,就是这个插件开关代码片段会把整个界面刷新,去设置里关则不会,有什么办法像设置里那样切换就好了,现在还是不太优雅

    1 回复
    可以找插件作者问问,可能是因为 js 片段有时需要刷新才行,所以作者没有区分 css 和 js 吧,统一用刷新。
    wilsons
  • wilsons 1

    或者安装 Run JS 插件

    然后在任意文档中,插入 js 代码块,然后在代码块中输入以下代码

    // 隐藏所有已完成任务 async function main() { // css 代码 const styleContent = ` [data-type="NodeListItem"][data-subtype="t"].protyle-task--done { display: none; } `; // 定义 style 的内容 const styleId = "ShowOrHideAllDoneTask"; // 获取现有的 <style> 元素 let styleElement = document.getElementById(styleId); if (styleElement) { // 如果存在,则删除它 styleElement.remove(); await client.pushMsg({ msg: "已隐藏", timeout: 3000, }); } else { // 如果不存在,则创建并添加它 const newStyle = document.createElement("style"); newStyle.id = styleId; newStyle.textContent = styleContent; document.head.appendChild(newStyle); await client.pushMsg({ msg: "已显示", timeout: 3000, }); } } main(); plugin.saveAction(thisBlock.id, "隐藏所有已完成任务");

    然后,在右键中运行下代码即可,如下图

    image.png

    然后,在顶栏即可快速切换了

    image.png

    1 回复
  • 查看全部回帖

推荐标签 标签

  • Solidity

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

    3 引用 • 18 回帖 • 434 关注
  • Sublime

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

    10 引用 • 5 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • Bug

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

    76 引用 • 1742 回帖 • 5 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 8 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 250 关注
  • AngularJS

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

    12 引用 • 50 回帖 • 511 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 25 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 35 关注
  • 持续集成

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

    15 引用 • 7 回帖
  • 新人

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

    52 引用 • 228 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    588 引用 • 3528 回帖 • 1 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 184 关注
  • Caddy

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

    10 引用 • 54 回帖 • 177 关注
  • RESTful

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

    30 引用 • 114 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    228 引用 • 476 回帖 • 1 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 57 关注
  • JVM

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

    180 引用 • 120 回帖 • 5 关注
  • jsDelivr

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

    5 引用 • 31 回帖 • 108 关注
  • IDEA

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

    181 引用 • 400 回帖
  • 工具

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

    298 引用 • 763 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 539 关注
  • 宕机

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

    13 引用 • 82 回帖 • 74 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 7 关注