在 AeroPaper 中使用 Obsidian 进行文章书写

前言

Obsidian 是一个现在十分流行的 Markdown 编辑器。它的核心功能完全免费，只有部分需要服务器开销的功能付费（例如，同步功能），此外它还有一个活跃的开源插件社区，有很多好用的插件。所以，Obsidian 也是本人最推荐的 Markdown 文本编辑器。

一、Obsidian 的基本逻辑

Obsidian 并不像很多常见的文本编辑器一样，它没有一个全局的设置选项，这意味着每一个仓库都会有一个独立的设置和插件系统，相关的数据全部存储在.obsidian文件夹中。这个设计降低里仓库传输的插件配置成本（毕竟所有的相关文件都在仓库中），同时这个设计也导致了我们需要重复地安装和配置插件。

二、插件推荐

这里推荐三个我经常使用的插件：

1. Excalidraw

Excalidraw 本身不是 Obsidian 的原生开源插件，它是一个开源前端无限绘图的白板软件。但是由于它优秀的绘图体验和与 Obsidian 的完美集成，所以我还推荐给大家，通过这个插件，您可以很方便地在 Obsidian 中绘制 SVG 矢量图。

Excalidraw 原项目仓库：

Obsidian Excalidraw 插件项目仓库：

2. Paste Image Rename

这个是一个对粘贴图片进行重命名的插件，可以将粘贴的图片自动命名为 {{fileName}}-{{自增后缀}} 形式，省去手动命名的烦恼。

将Always add duplicate number和Auto rename打开即可。

3. TinyPNG Image

这个插件是 TinyPNG 的 Obsidian 集成，但是它需要 Tinify 的 API，如果您有相关的 API 的话，这个插件还是很好用的（如果你需要手动压缩你的图片）

三、Obsidian 目录配置

1. Excalidraw 相关配置

我在src/data/blog/目录中创建了_obsidian文件夹，在这个文件夹中存储临时的文件（temp/）和 Excalidraw 的绘图数据文件（Excalidraw/）。（这里的临时文件指的其实是我在 Excalidraw 中插入的图片文件）

因此你需要修改 Excalidraw 配置中的基本 -> Excalidraw 文件夹配置为_obsidian/Excalidraw

2. 修复 Obsidian 图片预览问题

由于，Astro 通常只会读取src/assets/和public/中的图片资源文件，所以为了保证 Astro 正常构建，我们没办法将图片放在src/data/blog/中的任何位置。

为了防止博客中的图片被 Astro 压缩，图片相关的资源文件按应该被放置在public/文件夹中。

因此，我通过软链接的方式，在src/data/blog/中创建了一个文件夹的软链接到public/的同名文件夹中。这方式同时解决了 Astro 对图片的压缩问题和 Obsidian 的图片预览问题。

1
# 相关的命令：
2
# PowerShell
3
cmd /c mklink /J D:\keatsu-top-blog\src\data\blog\blog-assets D:\keatsu-top-blog\public\blog-assets
4

5
# cmd
6
mklink /J D:\keatsu-top-blog\src\data\blog\blog-assets D:\keatsu-top-blog\public\blog-assets

接下来在 Obsidian 中按下图中的配置来设置，就可以实现对图片的预览和粘贴图片自动放入blog-assets文件夹中

四、Astro 配置

因为您修改了src/data/blog/的内容，由于 Excalidraw 的绘图数据文件你不符合现有的 Aero Paper 配置，所以，你需要对 Astro 的配置进行微调。

6 collapsed lines
1
import { defineCollection, z } from "astro:content";
2
import { glob } from "astro/loaders";
3
import { SITE } from "@/config";
4

5
export const BLOG_PATH = "src/data/blog";
6

7
const blog = defineCollection({
8
  loader: glob({ pattern: "**/[^_]*.md", base: `./${BLOG_PATH}` }),
9
  loader: glob({
10
    pattern: ["**/*.md", "!_obsidian/**", "!.obsidian/**", "!blog-assets/**"],
11
    base: `./${BLOG_PATH}`
12
  }),
18 collapsed lines
13
  schema: ({ image }) =>
14
    z.object({
15
      author: z.string().default(SITE.author),
16
      pubDatetime: z.date(),
17
      modDatetime: z.date().optional().nullable(),
18
      title: z.string(),
19
      featured: z.boolean().optional(),
20
      draft: z.boolean().optional(),
21
      tags: z.array(z.string()).default(["others"]),
22
      ogImage: image().or(z.string()).optional(),
23
      description: z.string(),
24
      canonicalURL: z.string().optional(),
25
      hideEditPost: z.boolean().optional(),
26
      timezone: z.string().optional(),
27
    }),
28
});
29

30
export const collections = { blog };

同时，如果你有使用 Git 进行版本管理，我建议你将src/data/blog/blog-assets添加进.gitignore中，毕竟你也不想自己的文件被存储两遍吧。