0048 教你笔记分栏-Dataview

效果展示

Split-Screen.png

思路说明

Obsidian 有一个很细节的功能，叫做： callouts，这不是标准的 Markdown 语法，但是侵入性并不强，即：不解析或者只做基本解析后的可读性还是很不错的。

基本格式是引用块的开始加一个方括号来说明类型。后续内容都放在这个引用块里就可以了。这里有一个很重要的概念：块。Markdown 里面标记块的语法并不多，常用的只有代码块。所以，当我们需要分栏时，callouts 是个很不错的选择。

同时，在上面的官方帮助中，也给出了 callouts 的自定义方法，可见，官方也是支持自定义的。那么一切变得合理。

CSS Snippets

最简单直接的方式是用 CSS 代码片段，方法参见 0014 和 0029。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.callout[data-callout="split-2"],
.callout[data-callout="split-3"] {
  --callout-icon: "layout";
  float: left;
  width: calc(50% - 10px);
  margin: 5px;
  background-color: var(--background-primary);
  border: 1px solid rgba(128, 128, 128, .1);
  box-sizing: border-box;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
}
.callout[data-callout="split-2"] {
  width: calc(50% - 10px);
}
.callout[data-callout="split-3"] {
  width: calc(33% - 10px);
}
br { clear: both; }

代码讲解

说了是教你，所以讲一下代码，放心，不是要教会你如何写，而是有点理解能自己改。建议先把本篇内容用简悦弄进 Obsidian 再读，这样有代码高亮，好读。

split-2 和 split-3 是我自定义的类型，你可以随便写，叫 cat、dog、puppy 都没所谓。当然在插入 callouts 的时候要用对应的类型。

--callout-icon: "layout"; 自定义图标，其实也不是很有所谓，我也不知道在哪里找可用的图标，不过可以换成一个 svg 字符串。

说重点，就两个属性：

1
2
float: left;
width: calc(50% - 10px);

漂浮决定了横向排列，宽度 50%，就是一半儿。但是这时候两个块之间没有间隔，所以加 5px 外补（margin: 5px;），左边 5px， 右边 5px，所以实际宽度就是：50% - 10px，注意：减号两边必须有空格。

举一反三，如果想分三栏，就是 width: calc(33% - 10px);。

然后用浮动来实现横排必须在用完后清除浮动，我用了换行符 <br>，你在分栏之后加入一个换行符就好了，对内容没啥影响。可以不理解，但是要照做。

其他代码只是我希望卡片看起来素一点，自己加的样式，你随意。

某种强迫症

上面的方法几乎没什么额外的资源占用，只是会多加载这么点 CSS 而已。

但如果你只是在某一两篇笔记中分栏，但却要在每时每刻加载这些 CSS，确实存在性能的浪费（微乎其微，比装个插件小多了）。这时候可以用 Dataview 的自定义视图，添加方法参见：0014，0040。

这时候 view.js 文件为空，但是必须创建。

view.css 里面放上述代码。

使用的时候要在笔记中加入如下 dataviewjs 代码块：

1
await dv.view('SplitScreen-dataview')

记得把模板目录修改到对应的位置。

确实更麻烦了，但是做到了不使用不加载，强迫症满足。

一些细节

  • 没有写复杂的排版控制，所以效果一般，但是能用
  • 有需求可以自己做更复杂的样式控制
  • 推荐一篇笔记中就左右两栏就好，别像我演示中那样放很多，因为高度不一致时会很难看
  • 用 dataview 的自定义视图时，图标的修改不是完全起作用
  • 编辑时不是横向排列
  • 使用 Remotely Save 插件进行同步时，默认不同步配置文件夹，而且电脑端和移动端也确实不适合完全相同配置，这导致 CSS Snippets 不被同步，但是 dataview 的视图则无需额外关注，随笔记一起无缝同步