Obsidian

林一二2022年05月10日 21:25

Ob 是目前高级块所见即所得做得最好的应用,丰富的社区插件也让它有各种各样的高级块用例。

Obsidian截图-iFrame源码.png
Obsidian截图-iFrame展示.png
Obsidian截图-HTML源码.png
Obsidian截图-HTML展示.png
Obsidian截图-dataview源码.png
Obsidian截图-dataview展示.png

Ob 的编辑和预览在简单块(图片、嵌入)里共存,复杂块(DataView、HTML)不共存。

复杂块的编辑与预览不共存

通过光标是否在块里来判断当前块的状态是编辑还是预览,可以用方向键把光标移动到块内触发编辑。

Ob 在文本上取消了点击事件,文本、图片元素之外的区域点击了也会触发编辑模式,并把光标自动移动进去。但通过 <input /> 标签创建出的输入框点击后也会触发编辑模式。

DataView 这种插件提供的展示内容是全局拦截点击事件的,只有点击右上角的紫色代码按钮才会打开编辑模式。这个编辑按钮会遮挡部分的交互元素,不过插件设计者一般会适配这一点吧。

Code
Ob 是目前高级块所见即所得做得最好的应用,丰富的社区插件也让它有各种各样的高级块用例。

<<image-pretty "Obsidian截图-iFrame源码.png" width:"calc(50% - 1.4em)" caption:"Obsidian截图-iFrame源码.png" align:"left">> <<image-pretty "Obsidian截图-iFrame展示.png" width:"calc(50% - 1.4em)" caption:"Obsidian截图-iFrame展示.png" align:"right">>
<<image-pretty "Obsidian截图-HTML源码.png" width:"calc(50% - 1.4em)" caption:"Obsidian截图-HTML源码.png" align:"left">> <<image-pretty "Obsidian截图-HTML展示.png" width:"calc(50% - 1.4em)" caption:"Obsidian截图-HTML展示.png" align:"right">>
<<image-pretty "Obsidian截图-dataview源码.png" width:"calc(50% - 1.4em)" caption:"Obsidian截图-dataview源码.png" align:"left">> <<image-pretty "Obsidian截图-dataview展示.png" width:"calc(50% - 1.4em)" caption:"Obsidian截图-dataview展示.png" align:"right">>

Ob 的编辑和预览在简单块(图片、嵌入)里共存,复杂块(DataView、HTML)不共存。

!!!! 复杂块的编辑与预览不共存

通过光标是否在块里来判断当前块的状态是编辑还是预览,可以用方向键把光标移动到块内触发编辑。

Ob 在文本上取消了点击事件,文本、图片元素之外的区域点击了也会触发编辑模式,并把光标自动移动进去。但通过 `<input />` 标签创建出的输入框点击后也会触发编辑模式。

DataView 这种插件提供的展示内容是全局拦截点击事件的,只有点击右上角的紫色代码按钮才会打开编辑模式。这个编辑按钮会遮挡部分的交互元素,不过插件设计者一般会适配这一点吧。