与其他文档型笔记软件相比,思源的列表功能实现是独树一帜的严谨。一方面这为复杂嵌套等各种进阶用法提供了可能,另一方面则比较容易产生初见杀,对新人用户的困扰可能仅次于同步问题。链滴上一搜就有各种关于列表的提问:
- 列表创建合并问题:有点奇怪的列表项逻辑 | 由普通文本转换成的无序列表的 tab 缩进问题
- 列表项、列表块区分问题:有关 列表快(无序和有序)和 列表项块 的区别
- 列表 Markdown 语法问题:关于“无序列表”的几个问题
- 容器块搜索问题:【已解决】列表项的别名和命名无法搜索、引用,以及临时解决方案
- ......
思源笔记的列表之所以不同于传统文档型笔记,是因为它同时兼顾了 Markdown 列表语法的底层原理与所见即所得块形态编辑,也可以说兼具原教旨输入范式和高简洁表达范式,而这两者对路人用户算得上两重门槛,靠自己摸索阻碍重重。因此,本文简单介绍思源笔记中列表功能的基本用法、层级逻辑、操作技巧与一些进阶处理,希望读者能凭此自如运用列表,理解容器块的使用理念。
列表基本使用
如果对思源笔记不算熟悉可以继续阅读本节。若只是对列表相关功能逻辑有困惑,可以跳到下一节直接了解列表容器的本质。
- 输入(创建)列表
思源有三种列表分别为无序列表、有序列表、任务列表。在空白段落块的开头,输入 -
或 *
或 +
新建一条无序列表,输入 1.
或 1)
新建一条有序列表,输入 []
或 【】
新建一条任务列表。注意在创建无序列表和有序列表时要在符号后加空格,而任务列表的中括号末尾不需要空格。
以上为模拟 Markdown 的输入方法,也可以按 /
启动内容块菜单,从中选择列表创建。
任务列表可以点击方框图标切换完成状态,默认快捷键为 Ctrl+回车
。除了这一点,三种列表的特性基本相同,下文默认用无序列表描述。
- 列表延续
编辑焦点位于某项列表行末时,回车会在该项下方延续下一条列表。在空列表项上回车会使本条列表项消失(降级),想要连续回车延续列表可以启用番茄工具箱插件相关功能。
但是,如果是在列表下方通过 -
另起炉灶创建新列表,则新列表并不会与现有列表相连,而是视为位置相邻的两个独立列表,看上去近距离贴贴实则不相往来,不能视为一份列表,不能进行下文的缩进折叠。为什么有这种特性会在后文解释。
怎样判断列表是否连续?参考帮助文档,鼠标光标在块上时左侧会出现块图标。将鼠标光标放到列表首条时,左侧会出现列表块的块标,而如果是不在第一项的列表项只会有形如单横叹号的列表项块标。只要看到列表块图标就能知道这是又一个列表。
这里已经能看出来列表块作为一个整体、列表项作为其中一项,两者明显不同。后文对此有更详细的介绍。
- 列表缩进&折叠
列表中的非首项可以 Tab
缩进增加嵌套层级,首项列表可以 Shift+Tab
反向缩进减少层级。对某项列表进行缩进或反向缩进时,会连带其子层列表一同移动。在设置中启用列表大纲反向缩进会将列表反向缩进到上层列表末尾,否则是在原位置变动。
如果某条列表项下方有子级内容,则鼠标光标在列表项上时左侧会出现三角形折叠图标,可以点击图标折叠子层列表,默认快捷键为 Ctrl+↑
。对列表项块标或列表符号 Alt+点击
可以折叠当前列表块内的同层级列表,对三角形折叠图标 Alt+点击
可以折叠当前列表项的子层列表。如果对列表块图标而非列表项图标 Alt+点击
,会将列表块像普通块一样折叠。
- 列表聚焦
与其他块操作一致,对列表项图标或列表符号 Ctrl+点击
可以聚焦进列表项,默认快捷键为 Alt+→
;Alt+←
返回上层块。后文提供聚焦进折叠列表后自动展开显示的方法。此外,如果列表里有标题,那么通过 Alt+→
聚焦到标题会自动展开其子层列表。
- 列表 移动
与其他块移动操作一致,按住列表项块标或列表圆点拖动可以移动列表项,按住列表块块标拖动可以移动整个列表块。列表项可以移动到其他列表项中间作为同层或子层,列表块不能通过移动与其他列表合并,往列表项中间移动时只能作为其子层。
到此已经给出了除块转换外的列表基本操作。对「列表块」和「列表项」的进一步理解在于其容器块本质。
列表容器详解
一句话解释列表容器的层级逻辑结构,就是存在 列表块/列表项/其他块
三级,第一级指向列表整体,第二级带有列表圆点图标,第三级则是实际呈现的列表内容。例如,在思源里输入一个列表,使用自定义块样式插件设置其列表块、列表项、段落块均启用块轮廓,会出现里外三层轮廓:
打开开发者工具查看元素内容代码:
HTML 中的 div 元素约等于“块级元素”,从 div 元素的 data-type
能对应到思源的真·块级元素的类型上。所以最外层的 data-type="NodeList"
就是列表块,里面一层的 data-type="NodeListItem"
就是列表项,再里面一层的 data-type="NodeParagraph"
就是段落块,这条列表中的文字其实在这个段落块里,而列表项除了放置段落块,还在其前方安排了一个 protyle-action
显示圆点图标。
无序列表、有序列表、任务列表本质上只是 data-type
为 NodeList
而 data-subtype
不同的各种最外层列表块,其内的列表项结构一致,所以一个列表块能通过块菜单在不同类型间切换;而列表内容其实在列表项内部的其他块里,比如纯文字列表就是列表项里的段落块,所以列表块转换成段落就会剥除列表块、列表项两级容器,而不会改变段落原本内容。这就是列表块块类型转换的本质。虽然不能在无序列表内将某几项列表项直接转成有序列表,但可以将其多选拖动出来生成新列表块,再将这个列表块转换为有序列表。
从其他软件迁移进思源的用户可能不太理解为什么列表的结构会这么复杂,不过这并不是思源自创的范式,而是 Markdown 列表语法的规范实现,更底层上 HTML 的列表就是这样设计的,列表块是放置列表项的容器,列表项是放置列表内容的容器。思源严格执行了这样的规范。如果不考虑其他问题,列表项应该最接近常规理念上的列表用法。
列表块-列表项-内部块的嵌套逻辑源于正统 Markdown 语法,而相邻列表块不自动合并则更多是块形态编辑器的分块理念对列表的异化结果,并被保留下来成为了一种特性。在思源中创建两个相邻列表块后复制内容粘贴到其他编辑器,能发现虽然列表项间只有换行分隔、列表块间有空行分隔,但各种 Markdown 引擎往往还是会将其解析渲染成同一个列表。不过原生 Markdown 还是能创建相邻而独立的列表的,方法是采用不同的列表符号,比如先用 -
写一个列表,再用 *
写下一个,就会自动切成两份列表。思源这方面的问题在于没有方便的列表合并方法,先转段落块再合并回列表的方法会使引用挂掉,所以确实有改进空间。
列表结构是一种嵌套容器结构,一个列表块内可以放置若干列表项,一个列表项内可以放置若干其他内容块。列表项的第一个子层块会跟在圆点图标后方,其他子层块在其下方缩进呈现为列表项的子层内容。如果列表项的子层有列表块,该列表块自然就是传统意义上的子层列表。而思源笔记的列表还能嵌套列表以外的其他内容,实现比常规大纲笔记更丰富的用法。
例如,思源支持在列表中使用标题,这样标题既能出现在大纲面板获得全局总览,又能用列表折叠代替标题折叠,规避标题折叠不保留子层折叠状态的问题。此外,可以像这里或帮助文档这样融合列表与段落,将列表视为一个顶层有带圆点图标的伪标题的可折叠的区域性容器。回车新建列表项后 Backspace
可以转成子层段落,此时有个技巧是先新建一个分隔线或空段落作为子层的结尾,再回到上方回车就能正常创建新段落写作,不用反复按 Backspace
;这也能让不同列表块的视觉区分更明显,如下图所示。
类似的,也可以在列表里嵌套公式,形成层级结构表达:
可以说,思源用所见即所得的编辑形态实现了纯文本编辑形态的灵活性和层级大纲编辑形态的舒适操作。这种层级内容形态可以视为广义的大纲笔记,而传统意义上的文档流笔记只是只有一个最外层文档容器的线性形态笔记。按这种理解,康奈尔笔记法、方格注记本质上都与广义大纲笔记无异,也都能在思源用列表容器搭建。
以上介绍了列表容器的一些用法特性,实际使用中还有一个常见问题就是多层容器结构带来的搜索多重命中问题。
列表引用搜索
假设一个列表里有一段内容 aaa
,那么在搜索 aaa
时会得到什么?首先 aaa
自身位于段落块里,其次这个段落块必然位于列表项里,最后这个列表项必然位于列表块里,所以直接搜索 aaa
至少会返回一个段落块、一个列表项、一个列表块三个不同层级的块,这就是思源祖传的“一炮三响”问题。
目前对搜索重复问题的基本解决方案是对引用、搜索设置类型过滤,在设置-搜索菜单可以设置 ((
引用时可以查到的块类型,在搜索界面的搜索类型上可以设置 Ctrl+P
搜索时可以查到的块类型,排除容器块带来的重复命中。对于搜索而言,希望尽可能呈现不同内容,所以可以将搜索类型设为排除列表项、列表块等容器块;对于引用而言,希望被引用块稳定存在不易消失,且最好每次都引用同一层次的同一块,避免不同层级引用角标重叠,所以引用类型可以只使用列表项(和文档)而不使用叶子块和其他块类型,同时列表项有圆点图标所以 Alt+拖曳
生成块引也更便捷,谁让不知道哪个小聪明把最内层块标给去了。 SQL 等其他进阶搜索处理可以参考社区相关讨论如这篇帖子。
思源笔记 3.1.20 以后改进了父级容器块反链传递。对于列表项而言,当前逻辑为:如果列表项直接子层块内只有块引用,则该块引的反链会展示整个列表项及其子层内容,也就是纯块引单元指向其上层块。前文有张示例图就采用了这种方法。特别的,目前直到 3.1.25 版本,如果想在一个段落内写多个块引用后仍能传递上层列表项,需要在这些块引用之间加空格。反链过滤面板插件也支持这种传递上级块情形下的筛选过滤。
除了上面的实用技巧,还有一些与列表样式外观有关的优化方法,个人体会其实可有可无。
列表样式优化
- 列表转导图看板
列表大纲与思维导图一键转换是幕布的看家本领,可以将大纲笔记切换为各种结构和配色的思维导图,充分展现了什么叫做一份内容多样呈现。思源笔记中的 Savor 主题与自定义块样式插件都有个类似功能,可以将列表块显示为默认列表、思维导图、表格、看板视图。这里有人给出了从 Savor 主题提取的功能代码。自定义块样式插件的转换样式如下。
幕布的转导图功能好用有两个原因。首先这软件没有大纲面板,想要快速跳转只能从导图上快速移动或者采用批量折叠,所以导图的全局性视角必不可少。其次导图视图对移动端交互非常友好,列表视图层级深了会有大量缩进,严重削减竖屏客户端可用空间,聚焦也只能稍有缓解。而导图能让横向空间利用率超过 100%做到任意值,还能快速切换上下文,完美解决了横向缩进问题。思源里将列表转为其他视图主要也是为了增加水平空间利用率,提升显示区域信息密度。至于思源的移动端,在它删除横划打开左右侧栏的交互之前手机端对我只能是个伺服启动器,但凡用手机端看过公式块等需要水平移动的内容都能体会到这玩意多么令人无语。
- 列表子弹线
列表子弹线功能在 Logseq 非常出名,其将编辑焦点所在列表到顶层列表的层级路径高亮显示,效果如下。
思源里有面包屑可以查看块路径,不过列表子弹线引导观感确实更好。集市有 Bullet threading 插件,这里有从 Savor 主题提取的功能代码,链滴也能找到更早的子弹线代码片段如这篇帖子。
- 列表层级图标序号
思源默认主题的无序列表图标都是圆点,有序列表序号都是阿拉伯数字,不会随层级变化。在没有子弹线时这种全同图标序号可能不方便定位层级,除此之外个人实在不认为这东西有什么变化的必要,每层列表从容器块来理解应当是完全等价的。Savor 主题、Asri 主题都支持无序列表图标按 ● ○ ■
循环,有序列表按 1. a. i.
循环;不过循环层级深度有限,而且聚焦会从第一级开始计算。社区也有其他自定义编号代码如这篇帖子。
- 折叠列表聚焦展开
正统大纲笔记都有聚焦到某条列表的功能,且从外层看是折叠状态的列表在聚焦进去之后会自动显示为展开状态,退出聚焦又能自动恢复折叠,从而兼顾微观与宏观视野。思源笔记想实现聚焦进折叠列表项自动临时展开有两种方案。其一是在列表里使用标题,此时的折叠操作是对列表项执行的,如果用 Alt+→
聚焦到标题块就会越过列表项折叠将子层内容展开,不影响列表本身的折叠状态。另一种方法是使用这篇帖子的 CSS 实现。旧版本的 Savor 主题还能通过浮窗预览折叠列表不过后来移除了,个人体感这个功能有点影响主题流畅性,列表多了页面性能会低于 Asri。
默认折叠列表图标不是很明显,可以参考这篇帖子改成环绕虚线。个人写的 CSS:
.protyle-wysiwyg [data-node-id].li[fold="1"]>.protyle-action::after{ border: 1px dashed var(--b3-font-color1); transform: scale(1.35); }
- 隐藏无序列表图标
这个功能源自番茄工具箱插件,效果是移除无序列表前的圆点图标和层级竖线,使列表项形如可以缩进的段落块。其结构化组织的效果与基于标题组织内容颇为相似,不过列表项很容易批量调整层级,也没有标题折叠不保留子层折叠状态的问题,充分体现了容器块的功能优势。
由于番茄工具箱的列表样式简化在移动端不生效,个人写了一个功能类似的 CSS 片段,能隐藏无序列表的圆点图标、层级竖线,而不影响折叠列表图标,同时兼容 Savor 主题的列表子弹线。
/* 隐藏层级竖线 */ .li[data-subtype="u"]::before { content: none !important; } /* 隐藏无序列表图标,子弹线特化 */ /* 对默认主题生效 */ .protyle-wysiwyg .li[data-subtype="u"]:not(.en_item_bullet_actived)>.protyle-action svg { color: transparent; } /* 对Savor主题生效 */ .protyle-wysiwyg .li[data-subtype="u"]:not(.en_item_bullet_actived)>.protyle-action::before { content: "" !important; } /* 对Asri主题生效 */ .protyle-wysiwyg .li[data-subtype="u"]:not(.en_item_bullet_actived)>.protyle-action::after { content: "" !important; }
效果如下,图中所有内容均在列表项内。
以上介绍了思源列表的使用、个人对列表层级容器的理解,以及一些外观效果配置。最后一节写得像 Savor 主题推广一样,可见其外观设计确实可圈可点。总之思源笔记的列表功能大约在所见即所得形态编辑器中位居顶点,复杂严谨强大好用,只有移动端一如既往令人残念。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于