如何增强 Dynalist.io 大纲笔记工具,使它具备“卡片套卡片”的界面样式?

本文介绍了一项专门针对 Dynalist.io(或同类工具 Workflowy.commubu.com 等)大纲笔记工具重度用户的使用小技巧,在 Dynalist.io Web 原生界面基础上增加了自定义 CSS 样式,使笔记管理工具的界面显得更像生活中的 “知识卡片” 或 “即时贴”并且通过 “卡片套卡片” 的方式组织在一起,让它们看上去更整齐而且有层次感,从而提高云端笔记整理的效率。本讲解视频基于百分浏览器(CentBrowser),但对谷歌浏览器(Chrome)也适用。

博主在以前的文章中曾介绍过 Workflowy 大纲笔记管理工具,这类笔记工具非常适合进行 “碎片化信息” 管理,它们界面简洁,交互过程直观易懂,只需进行极少的鼠标或键盘操作,就能在笔记条目之间来回切换,修改条目之间的父子关系,创建或划掉待办事项列表等(实际的功能展示可以在 Workflowy 笔记工具用法介绍视频 中看到)。

但随着时间推移,博主发现 Workflowy 的功能更新频率很低,而且手机 App 的体验也有明显不足。幸运的是,后来博主偶然接触到了一款功能非常类似,但在一些细节上更有优势的替代产品 Dynalist.io,手机 App 也更完善,而且还支持一键搬家功能,所以就直接迁移过来了。

经过一段时间的使用,博主发现这类大纲笔工具有一个明显的缺点,就是不同层次的笔记条目之间,以及同一层次上的相邻笔记条目之间,在视觉上很难区分。一旦笔记多起来时,容易让人觉得眼前一片混乱。这时博主突然想到,自己曾经使用过 一款工作流分析软件 Sciral Flying Logic,它的任务分层呈现界面区分度比较高,一眼望去感觉很清晰,为什么不去借鉴它的信息组织方式呢?

想到这里,博主就开始利用自己粗浅的 HTML / CSS 知识开始 Hack Dynalist.io 的界面,试图为它增加一层 “卡片套卡片式” 的 “皮肤”。经过两天多的努力,博主终于实现了预想的视觉效果。为了让 集智俱乐部·知识管理群 的群友们也能尽快享有这种新的笔记工具使用体验,博主在斗鱼平台上进行了 20 多分钟直播讲解,下面这段视频就是直播讲解的回放。

点击此处,跳转到 B站 观看。

对于那些非软件研发背景的人来说,上述讲解可能还是有点难以操作。不过好消息是,从 Dynalist.io 的官方开发路线图看来,不久的将来他们会在自己的产品中提供内置的 CSS 样式设置功能。到那时,只需要把博主在文末给出的 CSS 代码粘贴到设置界面内,就可以达到同样的效果。所以,让我们共同期待 Dynalist.io 的新版本发布吧!

.Node {
 border-top: 1px dotted #AAAAAA !important;
 border-right: 1px dotted #AAAAAA !important;
 border-bottom: 2px solid #AAAAAA !important;
 border-left: 2px solid #AAAAAA !important;
 border-radius: 8px !important;
 margin: 10px !important;
 background-color: rgba(240,180,0,0.12);
 }

.Node-children {
 border-left: 1px dashed white !important;
 }

.node-line.Node-contentContainer, .Node-content.node-line.needsclick {
 padding-bottom: 3px !important;
 }

.Node-renderedNote, .Node-note {
 line-height: 180% !important;
 }

.node-tag {
 border: 1px dotted silver !important;
 border-radius: 5px !important;
 background-color: #eeffff !important;
 padding-left: 5px !important;
 padding-right: 5px !important;
 text-decoration: none !important;
 }
 .node-displayed-image {
 border: 1px solid lightgray !important;
 border-radius: 10px !important;
 padding: 5px !important;
 }

发表评论

电子邮件地址不会被公开。 必填项已用*标注