本文已收录至 Butterfly 主题美化教程

为什么选择 Obsidian

放弃 Typora 的理由：

  • Typora 已经收费，目前使用的免费版本已长久不更新，且偶尔出现 Bug。
  • Typora 适合关注于一个 Markdown 文件，不适合文件之间的链接与知识库管理。对于博客或笔记来说，互相链接将有助于加强内容联系，形成自己的知识体系
  • 插件？没听说过也没用过

选择 Obsidian：

  • 关注于知识库的整理，有双向链接的特色
  • Obsidian 对个人用户免费（也有付费方案）并时常维护
  • 有活跃的社区和第三方插件市场
  • 半 WYSIWYG，写文档不至于预览困难
  • 在与博客框架 Hexo 协同工作中具有潜力
  • 在不影响 Markdown 核心语法的情况下也有很多提高编写效率插件

下文将介绍如何无缝把写作工具迁移到 Obsidian 中。

写作习惯继承及效率提升

快捷键——指尖习惯复刻

一些快捷键先设置好。

比如小标题设置：Ctrl + Alt + num：Ctrl + num 的快捷键 Obsidian 给了跳转，刚好 Ctrl + Alt + num 的小标题设置快捷键符合主流编辑器（Word、飞书）的设置。反观 Typora 的快捷键就有点反人类。image.png

其他统一的快捷设置参考：

  • Ctrl+Shift+8：无序列表。 和飞书统一。记法：无序列表开头为 *。为此你可以多设置一个快捷键 Ctrl+Shift+-，原因是无序列表开头也可以是 -。（因为接受这种设定后，我老是按中这个键）。
  • Ctrl+Shift+7：有序列表。和飞书统一。记法：在无序列表的旁边。
  • Ctrl+Shift+>：引用块。和飞书统一。记法：引用块的开头是 >。
  • Ctrl+Shift+X：删除线。和飞书统一。记法：X 掉？
  • Ctrl+Alt+C：插入代码块。和飞书统一。记法：Code。
  • Ctrl+Alt+S：分割线。和飞书统一。记法：Slash？Separate？
  • Ctrl+Shift+↑：上移当前行。和 JetBrains 统一。
  • Ctrl+Shift+↓：下移当前行。和 JetBrains 统一。

其他博主个人自用快捷键设置：

  • Ctrl+`：行内代码。省略一个 Shift 更加好按
  • Ctrl+Shift+$：行内公式。
  • Ctrl+Shift+!：标注块。

文章模板——免写 Font-Matter 或在 Hexo 中敲命令

Obsidian 新建文章时可以快速使用模板。

打开设置 ->模板，插入模板文件夹位置（巧合的是，Hexo 有专门放模板的地方，scaffolds。不过这个需要自己创建，详情查看这篇文章 写作 | Hexo

image.png

一般 scaffolds 文件夹包含 draft、page、post 这三个 Markdown 文件。它们分别对应不同的模板。

比如 post 可以这样写：

1
2
3
4
5
6
7
8
9
---
title: 
date: {{date}} {{time}}
tags:
category:
cover:
description:
top_img:
---

后文将提到，安装 hexo-auto-category 插件后 category 字段还可以免写：xu-song/hexo-auto-category: Generate categories automatically for each post in Hexo (github.com)

因此创建新文章的流程就是：

  1. 新建页面
  2. 输入标题
  3. 点击 Obsidian 左侧的模板按钮
  4. 选择相应的模板即可

当然，创建文章时可以使用 hexo 原生命令。但是由于模板更改可能还需手动修改部分内容。

图床——和 Typora 图片上传方法一致 易嵌入

配置好 PicGo 图床后 [1]，安装 Obsidian 第三方插件：renmu123/obsidian-image-auto-upload-plugin: auto upload image with picgo (github.com)，记得还要点一下启用插件。

依照说明进行配置 PicGo。然后试着上传图片就行。

Obsidian 第三方插件——用更少的时间写 Markdown

以下插件不会对 Markdown 核心语法造成影响、不会引入奇奇怪怪的语句，但它们可以提升你的写作速度，或以更少的时间排版出更好的版面。

使用此插件可以更方便绘制 Markdown 表格（准确来说属于 GFM）：tgrosinger/advanced-tables-obsidian: Improved table navigation, formatting, and manipulation in Obsidian.md (github.com) 至少我觉得比 Typora 鼠标点来点去方便。 现在新版本 Obsidian 自带自己的表格工具了，这个插件的用处就不是特别大了。

文本规范化插件：

让列表支持鼠标拖动以及键盘顺畅调整：vslinko/obsidian-outliner: Work with your lists like in Workflowy or RoamResearch (github.com)

直接粘贴网址到选中文字：denolehov/obsidian-url-into-selection: Paste URLs into selected text “notion style” (github.com)

Hexo 与 Obsidian 的所见即所得

其实做到上面的内容后，使用原先 Markdown 语法写作就可以了。在基本的 Markdown 写作之上，我们可能还有更多的语法、样式、功能需求。如果能将 Obsidian 里看到的和 Hexo 博客网页中看到的基本达成一致，那么我们的写作方式可以进行统一，并可将其语法的运用纳入到我们长期的使用习惯中。

也正是因为追求这种统一，我才会 忌讳 使用所谓 Hexo 特有的标签语法[2]。但实现统一的代价是会导致很多丰富功能的实现设置了障碍。本小节将针对这种一致性进行努力探索。

Hexo 对于 Obsidian Flavored Markdown 的渲染

如果想将 OFM 运用于 Hexo 中，提升文本丰富性，那么强烈推荐你阅读这篇文章：Hexo 博客适配 Obsidian 新语法

文本绘图 Plant UML 支持

安装与使用

语法：

1
2
3
4
5
6
7
8
9
10
{% plantuml %}@startuml
Bob -> Alice : hello
Alice -> Wonderland: hello
Wonderland -> next: hello
next -> Last: hello
Last -> next: hello
next -> Wonderland : hello
Wonderland -> Alice : hello
Alice -> Bob: hello
@enduml{% endplantuml %}

两端各自插件实现：

两端插件的部分不同之处：

Obsidian 插件 obsidian-plantuml Hexo 插件 hexo-filter-plantuml
语法使用 只支持 Markdown 的代码语法块 支持 Markdown 语法块外还支持标签语法
PlantUML 不一定需要 @startuml 括住内容 必须使用 @startuml

博主提醒：Hexo 插件 hexo-filter-plantuml 配置中，link 配置不建议为默认的 inline 选项，该选项会将 svg 图片硬编码到文章文本中，Hexo 不会对齐进行居中调整或夜间模式下的变灰操作。

本地部署

使用 Hexo 插件 miao1007/hexo-filter-plantuml 需注意，当安装该插件并不做任何配置时，插件需要联网使用 PlantUML 接口，且并不是所有国内的 IP 地址都能成功访问这个接口，这就导致了平时 Hexo 本地部署调试时会出错。

错误例子如：

部署失败6546565132.png

image.png

我的解决方法是将 Plantuml 部署在本地。具体本地部署 Plantuml 的方法详见：本地部署 PlantUML

注意：本地使用 PlantUML 的效率相较于使用服务器 API 的效率低。

如果选择了本地部署，记得在配置文件 _config.yml 中新增：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
plantuml:
	# Local or PlantUMLServer.
	render: "Local"

	# "inline": <svg>xxx<svg/>
	# "inlineUrlEncode": <img src='data:image/svg+xml;>
	# "inlineBase64": <img src='data:image/svg+xml;base64>
	# "localLink": <img src="/assert/puml/xxxx.svg">
	link: "inline"

	# where your dot binary
	# GraphvizDotFile: "/usr/local/bin/dot"  # 不需要此项配置
	# where your jar
	PlantJar: "你的plantuml.jar" 路径

	# common options: svg/png
	outputFormat: "svg"

	# class-name for element style. The default style is center-aligned block
	className: "plantuml"

Obsidian 插件 joethei/obsidian-plantuml 使用本地 jar 包配置方法：

image.png

可能出现的问题：找不到 dot 执行文件

如果你使用了一些特殊语法，可能会报找不到 dot 的错误。

关于这一点报错我没有深究。只是把两个插件渲染从本地替换为 PlantUML Server。

本文参考

  1. PicGo(app) 配置腾讯云 COS 图床 ↩︎

  2. 标签插件（Tag Plugins） | Hexo。搞笑的是，我发现 部分插件开发者 称其为「Ugly」的 😂 ↩︎