Workflowy | 改造一番,记录生活的小小里程碑
不重要但我想写的前言
前段时间用了五六年的旧键盘坏了,一直用师兄送的顶着,手感声音各方面都很合心意,无奈惯用108键配列,对67/87这种小配列相当苦手,适应了很长时间。FF14 7.0更新,回去打游戏时这点键终于不够用了,遂看了一个月买了洛斐新出的100配列小顺 Lite。今天到手,纯白紧凑型布局配文字透光,溪水漫过小石潭,重新拥有了上下左右和小键盘,不禁流下了感动的泪水。
遂写博客。
需求创造世界,我创造需求
为方便回顾和写博客,一直有做生活 Log 的需求:书影游和护肤品“开封”/“空瓶”、今天买了什么、一年去了哪些城市、看了几场音乐剧、零式副本攻略记录、萨卡兹肉鸽每把翻车。很多 APP 服务于这些生活中的小小里程碑,比如豆瓣和 Neodb 都能标记书影音游,一些朋友用朋友圈做锚点,NGA 记录贴高楼鳞次节比,我画过手帐内页,盖印印章图案进行分类,写完厚厚一叠活页纸。但 APP 在内容导出上总让人疑虑,朋友圈给人社交压力,纸笔记录固然好,在翻查上往往还是受困于实体,且很难向前补充。如果使用 Obsidian 等常规电子笔记,文档型书写前要找到对应的记录文章,卡片型外观过于占据视野范围,Notion 的 database 倒是很好,无奈太复杂,始终用不习惯,我想要一个更简单、更便利、不需要太多复杂配置就能开箱即用的东西。做了许多研究之后,以内容倒推载体,最适合做 Log 的形式是无序列表,无序列表是:大纲。
先展示一下最终成果
(Gif 使用 ScreenToGif 录制)
为什么是Workflowy
Workflowy 的优势不需赘述,老牌纯文本大纲型笔记工具,即便是在笔记工具大爆发的今天,将所有内容浓缩进一页纸的设计仍然出彩。但大纲型笔记千千万,无序列表更是笔记标配,为什么是 Workflowy 而不是其他?
平铺又浓缩的搜索结果
对于生活 Log 而言,矛盾在于,记录型内容与感受型内容往往互相打架:搜索时,我想看到的只是“日期+做了什么”,一行足矣,太多就污染视野。而记录时,却倾向于细致入微地书写做这件事的感受。以母子节点来区别记录与感受,是大纲工具的一大优势,但如果搜索时所有节点同时展示,或者需要手动关闭层层累积的节点,简单的事就又变得复杂。在这一点上,Workflowy 的搜索策略相当合适,参考我的 workflowy 使用分享作者描述,Workflowy 的搜索逻辑是“直接展示搜索条件下的段落,并且能看到它上级节点的内容”“直接把搜索结果平铺展示出来,一目了然。”
因此可以注意到,Workflowy 搜索的的另一个特征是,Workflowy 只展示搜索条件所在的节点,不会自动展开下属所有的子节点。
也就是说,在 Workflowy 中搜索时;Workflwy 只聚焦搜索词所在的节点,并同时只展示搜索词的上一个节点。 利用这个特性,就能很好地解决“搜索时只看一行,记录时写得太长”的问题。
懒人必备:存储搜索词
我很喜欢钻牛角尖,所以有一个问题一直没想明白:使用双链或者 Tag 来标记内容时,怎么保证自己一直记得从前用了哪些双链标题/Tag 标题?
解决方案当然有很多,在 Workflowy 中的是我最喜欢的一种:Workflowy 支持保存常用搜索词,同时支持高级检索条件,例如搜索“is: todo -is: complete”,Workflowy 就会展现所有“未勾选完成的 TO-DO”、或者搜索“today OR Last 365 days”,如果之前有用日期标识内容,去年今日功能就完成了。
只需要保存常用搜索词,它就能同时成为记录的提示和便捷查询的入口,天下苦想“我应该搜什么来着”久矣,我辈当揭竿而起—— Workflowy支持的搜索运算符
我就要花里胡哨:CSS
我有一个“这 APP 我不用了”列表,里面给 Worfkflowy 判的死刑是:纯文字虽好,但看起来费劲。
稍微试一下就能明白,Workflowy 的文本样式设置很麻烦,效果也不太好,大量文字与节点堆在一起时,阅读体验相当惨烈。原生的二三级标题等 Markdown 样式,在大纲上的排版表现更不尽人意,至少我不能接受,更不要提默认 Workflowy 的默认搜索高亮是亮黄色——亮黄色!
幸好 Workflowy 的本体是网页,是网页就能用插件,能用插件就能折腾,Obsidian 教育我们:笔记工具的外貌是最重要的,记不记笔记可以再议。
我用的工具是 WFx for WorkFlowy,相比 Stylebot、Code Cola 等插件,它的优势是可以将 CSS 直接嵌入进 Workflowy,只要在一处修改,其他设备即便不安装插件,也可以显示修改后的样式,几乎是原生体验。
添加方式可以参考:Custom CSS Widge,具体步骤为:
- 安装 WFX 插件,复制网页最末端代码
- 右键插件图标-选项-添加 Javascript,复制代码,并设置 Shortcut 为 css
- 在 Workflowy 页面按快捷键
Alt+w
打开插件,输入css
(刚设置的 Shortcut) - 编辑自己需要的 CSS 代码,保存后立刻显示在网页上。
我用的代码一部分是社群分享,一部分是 Chatgpt 写的,仅供参考,能用就行。
/* 修改TO-DO样式,去掉完成删除线,并加入完成庆贺Emoji */
.done.checkmark .content {
opacity: 1 !important;
text-decoration: none !important;
}
.done.checkmark .content::before {
content: '🎉';
}
/*修改镜像节点显示,使之更明显*/
.mirrorDiamondIcon{
color:#7d798f ; /*节点颜色*/
border: 1px dashed #7d798f; /*虚线颜色*/
border-radius: 50px;
}
/*展开所有的note*/
.notes .content {
display: block;
max-height:none;
color:#323232;
font-size: 15px;
line-height: 1.8;
}
/*调整节点行距*/
.children ._18v0h7c, .draggableNameClone > ._18v0h7c {
padding-top: 6px;
}
/* 为Tag加上🏷️ */
._1wsppdf .contentTag {
color: #1c765a;
font-weight: bold;
position: relative; /* 为 ::before 伪元素设置定位 */
padding-left: 1.4em; /* 为emoji留出空间 */
}
._1wsppdf .contentTag::before {
content: '🏷️'; /* 这里可以替换成你想要的emoji */
position: absolute;
left: 0;
font-size: 1em;
}
/* 在日期前加入📅 */
.monolith-pill .content-wrapper {
position: relative;
padding-left: 2em;
}
.monolith-pill .content-wrapper::before {
content: '📅';
position: absolute;
left: 4px;
font-size: 1em;
}
.notes .monolith-pill .content-wrapper {
line-height: 15px;
font-size: 14px;
padding-top: 3px;
padding-bottom: 3px;
}
/* 设置备注颜色为浅灰色 */
.notes .content {
color: rgb(183, 188, 191);
}
/* 设置高亮颜色为浅灰色 */
:root {
--wf-yellow-100: rgb(220, 224, 226);}
还有一些便利插件和调整可以参考 Workflowy 资料分享
顺便一提,在 Workflowy 的 Experimental features 中,有一项就叫做“Rich tags
(Allows emojis and some other characters in tags. )”,但我更喜欢 Emoji 在标签外侧的样式。
再找出一块拼图:日期节点生成
最后,诚挚敬献,Workflowy 日期节点生成器:Workflowy Calendar Generator
生成后复制到剪贴板,直接粘贴进 Workflowy 即可。Workflowy 支持编写 Date format 和 Time format,可以自由调整成自己喜欢的日期和时间格式。