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

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

image.png

  • 思源笔记

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

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

    26072 引用 • 108232 回帖 • 1 关注
  • Q&A

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

    10014 引用 • 45506 回帖 • 71 关注

相关帖子

被采纳的回答
  • 用下面的 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
  • 其他回帖
  • 用下面的 css 隐藏所有已完成任务

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

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

    image.png

    1 回复
  • 5kyfkr 1 评论

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

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

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

    1 回复
  • 查看全部回帖

推荐标签 标签

  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 447 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 654 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 280 关注
  • BAE

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

    19 引用 • 75 回帖 • 676 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖 • 1 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 52 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 661 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖 • 2 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    171 引用 • 1537 回帖
  • 外包

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

    26 引用 • 233 回帖
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 464 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 87 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 195 关注
  • Bug

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

    76 引用 • 1742 回帖 • 1 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 286 关注
  • gRpc
    11 引用 • 9 回帖 • 99 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 7 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 260 关注
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    954 引用 • 944 回帖
  • RemNote
    2 引用 • 16 回帖 • 24 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 240 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 537 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖 • 1 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • 阿里巴巴

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

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

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

    180 引用 • 120 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 110 关注