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

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

image.png

  • 思源笔记

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

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

    25753 引用 • 106573 回帖
  • Q&A

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

    9869 引用 • 44854 回帖 • 77 关注

相关帖子

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

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

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

    image.png

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 用下面的 css 隐藏所有已完成任务

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

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

    image.png

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

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

    1 回复
  • 查看全部回帖

推荐标签 标签

  • Log4j

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

    20 引用 • 18 回帖 • 34 关注
  • Swift

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

    34 引用 • 37 回帖 • 551 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 726 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1281 回帖 • 1 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 634 关注
  • golang

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

    499 引用 • 1395 回帖 • 244 关注
  • LeetCode

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

    209 引用 • 72 回帖
  • Excel
    31 引用 • 28 回帖 • 2 关注
  • Access
    1 引用 • 3 回帖 • 2 关注
  • Wide

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

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

    30 引用 • 218 回帖 • 634 关注
  • SOHO

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

    7 引用 • 55 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 221 关注
  • FFmpeg

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

    23 引用 • 32 回帖
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖
  • jsDelivr

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

    5 引用 • 31 回帖 • 107 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • MyBatis

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

    173 引用 • 414 回帖 • 369 关注
  • 叶归
    9 引用 • 41 回帖 • 20 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 29 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖
  • gRpc
    11 引用 • 9 回帖 • 94 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • 新人

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

    52 引用 • 228 回帖
  • Node.js

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

    139 引用 • 269 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    174 引用 • 1212 回帖 • 2 关注
  • PWA

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

    14 引用 • 69 回帖 • 182 关注