效果展示
今天分享一个「单独的任务面板」
作用呢很简单，就是把今天的任务按照不同优先级单独显示成一页。
（也算是 Tasks 插件的一个基础入门示例）
效果：
（右侧的高亮就是单独的任务面板页面）
——常驻在边栏让我们得以一直聚焦在最高优先级的任务上。
截图里用的左右分屏的笔记，你也可以把它拖到侧边栏：
放在侧边栏会更紧凑。
所需插件
- Tasks
- （可选）Set View Mode per Note
Tasks 就是用来收集任务的核心插件，想在 OB 里做任务管理的话非他莫属。
同时也可以用它来快速给任务添加优先级、截止日期等信息。
Set View Mode per Note 则是用来给笔记单独设定阅读模式。
只需要在笔记属性里添加 prefer-view: read，打开这个笔记的时候就会自动进入阅读模式，这对于数据呈现类的笔记非常有用。
使用方法
将以下脚本粘贴进你的笔记——wola，就完成了！
tasks 代码块
```tasks
# 仅显示未完成任务
not done
# 过滤空任务
filter by function task.description.replace('#task', '').length > 1
# 仅限今天的 Daily Note
filter by function \
const date = task.file.filename; \
return task.file.filename.replace(".md", "") === moment().format("YYYY-MM-DD")
# 仅限 PeriodicNote/Daily 目录内的任务
# path includes PeriodicNote/Daily
# 根据子标题进行筛选（分开两块呈现）
(heading does not include 工作) AND (heading does not include 创作)
group by heading
sort by priority
# 用任务优先级单独分类（并替换文本）
group by function \
const emojis = ["🐸最高优先级", "🔥高优先级", "🤔中优先级", "📜任务", "💧低", "😴超低"]; \
return "%%"+task.priority+"%%"+emojis[task.priority];
# 隐藏其他按钮
hide due date
hide postpone button
hide backlink
hide task count
```
一些的配置说明——
过滤任务来源
# 仅限今天的 Daily Note
filter by function \
const date = task.file.filename; \
return task.file.filename.replace(".md", "") === moment().format("YYYY-MM-DD")
这段的意思是，只提取命名为 YYYY-MM-DD 的笔记内的任务——
也就是我们 Daily Note 的格式，像是： 2024-08-14.md
如果想要提取某个文件夹内的任务，可以把上面这4行删掉，把下面的：
# path includes PeriodicNote/Daily
最前面的 # 去掉，代表只获取 Daily 笔记内的所有任务。
更多过滤规则：Filters
修改优先级的图标
const emojis = ["🐸最高优先级", "🔥高优先级", "🤔中优先级", "📜任务", "💧低", "😴超低"]; \
这一行从左到右，分别是「最高优先级」到「最低优先级」的覆盖名称。
你可以在这里改成其他 Emoji，或者修改成自己想要的文本。
使用
代表最高是源自“先吃掉那只青蛙”的理论 w
过滤子标题
# 根据子标题进行筛选（分开两块呈现）
heading includes 工作
# 如果想要排除工作，就写成：
# heading does not include 工作
因为我的任务会用小标题分开，像是：
## 工作
- [ ] 完成和 XX 的沟通
- [ ] 推进新的进展
## 生活
- [ ] 做本月的总结
所以用上面这个可以只显示「工作」里的任务，然后我会把整个代码块复制一份，单独显示「生活」里的任务，隔离开来。
更多详见 Tasks 插件的文档：Introduction
懒得查文档也可以回帖询问（笑）
样式美化
边栏的图标
默认放在边栏的时候是个文件图标，不太好看。
所以可以用这段 css 代码来替换成单独的任务图标：
上：默认图标
下：任务专属图标
注：只有文件名为
LiteTasks的时候才有效，如果不是的话，需要自行替换 css 中的关键字
css 片段代码
/* Litetasks 页面 */
.workspace-tab-header[aria-label="LiteTasks"]
.workspace-tab-header-inner-icon
> svg{
display: none;
}
.workspace-tab-header[aria-label="LiteTasks"]
.workspace-tab-header-status-container
> div{
display: none !important;
}
.workspace-tab-header[aria-label="LiteTasks"] .workspace-tab-header-inner-icon:before {
content: " ";
display: flex;
flex: 0 0 auto;
margin-top: 2px;
width: 20px;
height: 20px;
background-position-y: 2px;
background-color: var(--icon-color);
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-check"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="m9 9.5 2 2 4-4"/></svg>');
}
.workspace-tab-header.is-active[aria-label="LiteTasks"] .workspace-tab-header-inner-icon:before {
content: " ";
display: inline-block;
margin-top: 2px;
width: 20px;
height: 20px;
background-color: var(--icon-color-focused);
background-repeat: no-repeat;
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-check"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="m9 9.5 2 2 4-4"/></svg>');
}
标题居中和间距调整
在笔记的属性里添加 cssclasses: lite-task 并插入这段 css 片段可以微调样式，让页面在边栏里显示得漂亮一些：
左：原始视图
右：调整后的视图（居中标题，调整了任务左侧间距，隐藏了文档属性）
css 片段代码
/* ----------------------------------------------------------- */
/* Lite tasks 页面 */
.lite-task .cm-scroller {
padding-left: 0 !important;
}
/* 不用重复显示了 */
.lite-task .task-priority {
display: none;
}
.lite-task .cm-preview-code-block.cm-embed-block {
margin-right: 1em !important;
}
.lite-task h4.tasks-group-heading,
.lite-task h5.tasks-group-heading {
text-align: center;
padding-top: 0.3em;
}
.lite-task h4.tasks-group-heading::after {
content: "";
display: block;
width: 95%;
height: 1px;
background-color: var(--background-modifier-border);
margin: 0.5em 0;
}
/* ul 后面的 h4 增加 margin-top */
.lite-task ul + h4 {
margin-top: 1em !important;
}
.lite-task .task-list-item.plugin-tasks-list-item {
margin-inline-start: 0.5em;
}
/* ----------------------------------------------------------- */
