基于块属性和书签插件的任务管理方案

思源里面如果要做任务管理，原生的方案应该是两种：

1. 基于任务列表的
2. 基于数据库的

前者的优点在于可以无压输入，缺点在于只有 0/1 两种状态，并且由于分散在文档中，需要依赖 SQL 做后期查询。

后者的优点在于可以自定义个各种状态，甚至可以定义进度条等等，缺点在于必须先进入一个特定的文档进行输入。

在这里，我提供一个第三种思路：基于块属性进行任务管理，优点是同样可以无压输入、 并且支持多种任务状态，缺点是需要一些配置、 依赖一些插件。

• 整体思路：使用不同的块属性来将一个块约定为某个“任务状态”，这里我选择自定义一个名为 project-status​ 的属性，它可以有三种属性

  • TODO
  • DOING
  • DONE

• 输入：使用“快速添加块属性”插件，快速地为一个块分配任务状态属性

• 展示：使用自定义 CSS 样式，在编辑器中区分处于不同任务状态下的块

• 聚合：使用“书签 +”插件，在思源顶层界面中聚合分散在笔记各个地方的任务块，进行统一展示

方案说明

输入：使用“快速添加块属性”插件

​​

安装插件之后，在配置中添加如下的项目。

{
    "TODO": {
        "@slash": "todo",
        "project-status": "TODO"
    },
    "DOING": {
        "@slash": "doing",
        "project-status": "DOING"
    },
    "DONE": {
        "@slash": "done",
        "project-status": "DONE"
    }
}

配置完毕之后，我们就可以通过 /todo​ /doing​ /done​ 来快速地为块添加 project-status​ 的块属性了。

​​

​​

​​

不过这种做法就只能对所在的段落块以及列表项块生效。如果想要为整个文档添加任务状态，就只能在块菜单中手动设置了。

​​

此后，对应的内容块就会添加对应的一个块属性。

​​

我们可以在一个状态为“TODO”的内容块中，再键入 /doing​，从而把一个任务块编辑为“进行中”的状态；在键入 /done​，就可以把块设置为“已完成”的状态。

🤔 注意：这里的 TODO DOING DONE 只是我们自行约定的取值，不同人完全可以设计自己的体系。这里的关键在于使用不同的块属性取值，来标识“这个块到底对应了什么状态”。

展示：配置 CSS 样式

只添加块属性，在编辑器里面是看不出来效果的。

​​

为了能一眼看到这个块是一个配置了“任务属性”的块，我们可以在思源的代码片段当中新增如下的样式：

.protyle-wysiwyg[custom-project-status="TODO"]::after,
.protyle-wysiwyg div[data-node-id][custom-project-status="TODO"]::after {
    content: "🔔";
}

.protyle-wysiwyg[custom-project-status="DOING"]::after,
.protyle-wysiwyg div[data-node-id][custom-project-status="DOING"]::after {
    content: "🔮";
}

.protyle-wysiwyg[custom-project-status="DONE"]::after,
.protyle-wysiwyg div[data-node-id][custom-project-status="DONE"]::after {
    content: "✅";
}

/*针对文档的样式，如果不需要也可以去掉*/
.layout__center .protyle-wysiwyg[custom-project-status]::after {
    position: absolute;
    font-size: 28px;
    text-align: center;
    top: 100px;
    right: 30px;
    border: 2px solid var(--b3-theme-primary);
    padding: 5px;
    border-radius: 10px;
    background-color: var(--b3-theme-primary-lightest);
    width: 30px;
    height: 30px;
    line-height: 30px;
}
/*针对编辑器内部的内容块的样式*/
.protyle-wysiwyg div[data-node-id][custom-project-status]::after {
    position: absolute;
    font-size: 18px;
    text-align: center;
    top: 0px;
    right: 0px;
    padding: 1px;
    border-radius: 5px;
    background-color: var(--b3-theme-primary-lightest);
    width: 27px;
    height: 27px;
    line-height: 27px;
}

效果如下：

​​

同样不同的状态也对应了不同的图标。

​​

🤔 注意：上面在 CSS 代码中定义的各个图标实质就是 emoji 文本，你完全可以改成自己想要的样子。

聚合：使用书签 + 插件查询所有的任务

我们可以通过这样的 SQL 来查询所有具有任务状态属性的块，比如这是所有 TODO 状态的块：

select * from blocks where id in (
    select block_id from attributes
    where name = 'custom-project-status' and value = 'TODO'
);

但是通过嵌入块进行查询，必须要进去某个特定文档，没法很好地在全局查看。

解决方案是使用“书签 +”插件。

​​

在插件中新建一个动态组，类型为“动态组”，规则类型为“块属性”，值为 custom-project-status=TODO​，创建一个展示所有 TODO 状态的块。

​​

如法炮制，还可以创建一个 DOING 状态的块。

​​

配合文档流插件，快速查看所有的任务

​​

如果你安装了“文档流”插件，还可以进行一些小联动：右键书签组中，可以在一个文档流中打开所有的项目，批量地查看所有的任务块。

​​

讨论

1. CSS 样式是不是必须的？

   • 个人觉得不是必须的，毕竟所有项目都已经在书签中展示了；添加一个自定义的 CSS 样式更多是为了美观性，但是使用度也许没有那么高。

2. 如果不用书签插件，还有别的方案可以在顶层展示吗？

   • 可以尝试用嵌入块 + 侧边栏插件的方案

   • 在嵌入块中查询所有的任务块

   • 使用侧边栏插件，可以把指定的嵌入块在 Dock 栏中展示，也能达到“不进入文档就可以查看”的效果

     ​​

   • 效果类似这样：

     ​​

   • 但是这个方案的短板在于嵌入块：嵌入块会把完整的块内容展示出来，作为 TODO 项目查询而言信息密度会有点低，所以我个人更加倾向于书签插件方案

3. 既然已经使用了“书签 +”插件，那完全可以创建两个 TODO、 DOING 的静态书签组，然后手动拖入——有必要使用块属性吗？

   • 这个问题很值得讨论

   • 实际上这种方案我同样也在使用，下面的两个 TODO DOING 就是静态的书签组

     ​​

   • 我的考虑是这样的：

     • 书签 + 插件，处于某些开发方面的考虑使用的是 JSON 本地文件来维护所有的项目，并不会设置块属性（当然以后可能会自动加入属性）
     • 而本地的 JSON 文件从数据的可靠性而言是不如块属性的（丢失、覆盖等可能性会高一点点）
     • 同时，在编辑器中直接输入 /todo​ 也会比用鼠标拖入侧栏的操作方式更加流畅
     • 所以这个问题见仁见智，看你怎么倾向；如果你觉得拖入书签的方案更加简单方便，也完全 Ok

‍