
不引入astro wiki plugin实现链接跳转的思路
/ 3 min read
Updated:摘要(由llm生成)

背景
obsidian 是我的进行笔记编辑的主力软件,并且 wiki 语法,也就是 [[某个笔记]]
的语法使用的频率很高。
与此同时,我还需要将笔记发布到基于 astro 框架搭建的个人博客上, 由于以下原因,实现起来比较困难。
- astro 本身不支持 wiki 语法,wiki 语法需要引入 remark 插件,对 wiki 语法进行解析。
- 在 astro 中,我使用 slug 字段作为笔记的唯一标识,而 wiki 语法中,
[[某个笔记]]
的语法,实际上是使用笔记的 title 作为唯一标识的。如果使用插件,它的处理方式是把名称中的空格转化为下划线,并且将 title 转换为小写。
以下是 GitHub - landakram/remark-wiki-link: Parse and render wiki links. 的文档。

所以这与我的需求不符合,我需要的是使用 slug 字段作为笔记的唯一标识,并且使用 wiki 语法进行链接跳转。
也就是 [[Test Page]]
转化为了 /page/test_page
。
假设我的中文笔记的信息是:
于是目前开源的插件不满足我的要求,我需要自己实现 wiki 语法的转化或者解析。
实现
这是我之前的输出和部署工作流,首先在 obsidian 中编辑,笔记有一个属性叫做 toAstro,值为 true 的时候表示需要输出到 astro 中。

那么实现的方式有两种,一种是从 obsidian 中输出到 astro 的时候,对于要输出到 astro 的笔记中的 wiki 做预处理 (即转化为普通的 md 语法),另一种是使用 remark 插件,在 astro 中解析 wiki 语法。
由于比较赶时间,我首先选择了第一种方式,后续再考虑引入 remark 插件。
于是流程就变成了下图。

对于预处理 link,具体操作是:

这样在输出的到 astro 的笔记中,wiki 语法就变成了普通的 md 语法,同时也保留了 title。
效果展示
在 obsidian 中使用了 wiki link 写法

经过转化:

在 astro 中的效果

