Files
kazoottt-blog-v2/src/content/post/不引入astro wiki plugin实现链接跳转的思路.md
2025-04-28 16:25:32 +00:00

3.6 KiB
Raw Blame History

toAstro, astroType, published, toWexin, toJuejin, toZhihu, date_created, date_modified, title, date, author, tags, finished, category, slug, description, excalidrawFile
toAstro astroType published toWexin toJuejin toZhihu date_created date_modified title date author tags finished category slug description excalidrawFile
true post true null null null 20250221 20250304 不引入astro wiki plugin实现链接跳转的思路 2025-02-09T00:00:00.000Z KazooTTT
astro
obsidian
remark
wiki-link
true 前端 redirect-links-without-astro-wiki-plugin 在 Obsidian 中Wiki 语法 (某个笔记) 使用频率较高,但 Astro 默认不支持。由于现有 remark 插件无法满足需求,我选择在导出到 Astro 时预处理 Wiki 链接,将其转换为标准 Markdown 语法,并使用 slug 作为唯一标识,从而实现正确的链接跳转。 不引入astro wiki plugin实现链接跳转的思路.excalidraw

!IMG-2F53DF7357EC28522945C58351B62D96.png

背景

obsidian 是我的进行笔记编辑的主力软件,并且 wiki 语法,也就是 [[某个笔记]] 的语法使用的频率很高。

与此同时,我还需要将笔记发布到基于 astro 框架搭建的个人博客上, 由于以下原因,实现起来比较困难。

  1. astro 本身不支持 wiki 语法wiki 语法需要引入 remark 插件,对 wiki 语法进行解析。
  2. 在 astro 中,我使用 slug 字段作为笔记的唯一标识,而 wiki 语法中,[[某个笔记]] 的语法,实际上是使用笔记的 title 作为唯一标识的。如果使用插件,它的处理方式是把名称中的空格转化为下划线,并且将 title 转换为小写。

以下是 GitHub - landakram/remark-wiki-link: Parse and render wiki links. 的文档。

alt text

所以这与我的需求不符合,我需要的是使用 slug 字段作为笔记的唯一标识,并且使用 wiki 语法进行链接跳转。

也就是 [[Test Page]] 转化为了 /page/test_page

假设我的中文笔记的信息是:

于是目前开源的插件不满足我的要求,我需要自己实现 wiki 语法的转化或者解析。

实现

这是我之前的输出和部署工作流,首先在 obsidian 中编辑,笔记有一个属性叫做 toAstro值为 true 的时候表示需要输出到 astro 中。

IMG-BDEFC1C365AE18FDB400CF95414BEFD2

那么实现的方式有两种,一种是从 obsidian 中输出到 astro 的时候,对于要输出到 astro 的笔记中的 wiki 做预处理 (即转化为普通的 md 语法),另一种是使用 remark 插件,在 astro 中解析 wiki 语法。

由于比较赶时间,我首先选择了第一种方式,后续再考虑引入 remark 插件。

于是流程就变成了下图。

alt text

对于预处理 link具体操作是

Pasted image 20250209190633

这样在输出的到 astro 的笔记中wiki 语法就变成了普通的 md 语法,同时也保留了 title。

效果展示

在 obsidian 中使用了 wiki link 写法

IMG-D4D0136CE577530F2CA29510B83DF689

经过转化:

IMG-1E36E72DE9CBDBB8D880E4B31D136342

在 astro 中的效果

IMG-6B67FFDA95C7E30D1A1139F5E390F6F3