3 年前（2023 年），为了尽可能弥补 Obsidian 与 Hexo 之间语法功能适配的隔阂，我探索及开发了 站内文章多款插件，试图缩小两个强大软件的语法隔阂。其中，对于双链功能的语法适配插件 hexo-filter-titlebased-link 最为核心。当时的插件已经可以识别双链的语法结构，并正确链接到文章；后来，自定义链接 HTML 模板功能为链接样式提供更多客制化选项。实质上，这个插件的潜力还没有发挥出来：我们可以读取文章 Front-Matter 中的信息注入到渲染后的双链中；也可以把插件工作时整理的双链信息提取出来，供网站所有者进行数据洞察和数据分析，实现更多有趣的功能。
自 hexo-filter-titlebased-link v0.3.0 版本之后，插件支持 Front-Matter 信息注入；提供双链信息的获取方式，为 Hexo 主题定制提供页面信息，也可以导出全局 JSON 数据。
项目地址：uuanqin/hexo-filter-titlebased-link
本文可以看做是 hexo-filter-titlebased-link 插件的（非正规的）中文文档，介绍了插件的基本功能，并通过一些示例介绍这些功能可能的玩法。同时欢迎大家提供插件相关的建议，或展示更多有趣的奇思妙想~
通过使用这个插件，每个人都可以打造属于自己的数字花园！我也把一些相关功能的实现思路写了出来。由于代码量以及修改点、个人定制项比较多，所以文章可能不会出现保姆级的详细代码实现，敬请谅解！如有疑问，可留下评论或邮件咨询~
博客项目下打开终端输入并运行以下命令：
1 | npm install hexo-filter-titlebased-link --save |
然后在 _config.yaml 中加入以下配置：
1 | titlebased_link: |
在接下来的章节中，我将会对这些主要的功能进行说明。
插件可以识别页面或文章中的形如 [[Title]] [[Title#Anchor]] 或 [[Title|Alias]] 的双向链接（Wiki Links，Internal Links[1]）语法，并将其渲染为指向实际文章的链接，就如同在 Obsidian 中展现的那样。
例子：
1 | 这是 文章 B, |
经过 Hexo 渲染后，HTML 将会为：
1 | <p>这是 文章 B, </p> |
可见，插件就是把双向链接的语法直接「翻译」为指向正确链接的 <a> 标签。
插件会排除代码块、公式块、行内代码、行内公式中 Wiki Link 的识别和渲染。测试文章详见：站内文章双链渲染测试。
为了能够渲染成更复杂的形式，插件预留有插槽供用户自主定制——通过 custom_html 参数进行配置：
1 | ` |
例如：
1 | titlebased_link: |
得到的链接是这样的：
1 | <span class="bilink-pop-up">弹窗</span> |
关于这个「气泡链接」的小项目，详见 站内文章这篇文章。虽然文章中介绍的是另一个插件，但是自定义插槽的功能是一样的。
通过插槽的方式，我们可以实现链接前后 HTML 块的添加、<a> 属性的添加（如添加 class 属性以调整样式）。但如果我们要求根据文章的特征进行不同形式双链的渲染，那么可以考虑后面的 attribute_mapping 选项进行实现。
通过配置 attribute_mapping，我们可以将文章的 Front-Matter 信息，以 data-xxx 的形式注入到链接中。示例配置如下：
1 | titlebased_link: |
利用这一点我们可以生成不同样式的链接。比如：
更进阶地，我们可以将链接指向的文章封面和描述嵌入到相关属性中，并实现小窗预览效果：
我认为导出图谱信息这个功能是插件最有用的地方。有了文章的双链信息，我们可以把握住网站文章之间的基本拓扑结构。更自然地，我们会想到实现文章关系拓扑图的绘制。
当插件进行以下配置时，我们可以在博客构建时将双链信息存储在内存供主题使用：
1 | titlebased_link: |
例如，在 Hexo-Butterfly 主题源代码中，我们可以通过 page.bi_links 可获取当前文章的出链入链信息。其信息结构示例如下：
1 | inbounds: |
这里通过一个小小例子，展示如何将双链信息融入页面中。
在主题源代码目录下 \themes\butterfly\layout\includes\header\post-info.pug 相应位置增加以下内容：
1 | // 双链信息页 |
然后根据需要，微调 \themes\butterfly\source\css\_layout\head.styl 的样式即可。
我们可以将这个双链信息以 JSON 的形式进行导出，可以导出到 Hexo 生成的 public 目录，或本地电脑中的其他位置。
当我们进行如下配置时：
1 | titlebased_link: |
JSON 文件将会输出到：
public 目录下的 api/backlinks.json 中，博客发布时我们可以通过 https://your-domain.com/api/backlinks.json 进行访问。D:\abc\Desktop\link.json 文件中。JSON 格式示例：
1 | { |
hexo-filter-titlebased-link 插件对草稿箱的文章怎么处理？
对于草稿箱文章，其实处理起来很灵活，每个人都有不同的需求。插件实现了较为通用的形式，如果你有更多的定制化需求，或觉得当前这种形式不够好，欢迎 Issues & PRs！也欢迎直接邮件联系我~
目前插件处理草稿箱文章的方式：
draft_post/。如有此类「链接到草稿文章」情况，请博主处理好相应页面，或配置好 404 页面。有了双链信息，我们可以轻松的使用各种可视化库绘制博客文章的关系图，比如本站的 站内文章关系图谱：
或者在主题侧边栏中提供当前文章的关系视图：
首先我们通过插件的 generate_json 将双链信息导出，使其在网络环境下可以访问。为提高性能，可以在 CDN 端设置本地缓存减少网络请求。
全局关系图的实现方式为，在需要插入关系图的页面的 Markdown 中，写好 HTML+CSS+JavaScript 代码，使用 force-graph 库进行关系图绘制。
Hexo-Butterfly 主题的侧边栏关系图的实现不需要修改主题源代码，因为 Butterfly 主题原生自带自定义 widget 的方式进行定制，具体见 自定義側邊欄 | Butterfly。思路也是 HTML+CSS+JavaScript，使用 force-graph 库，通过判断当前路径从而确定显示哪个中心节点，并由此向外展示一级节点。
目前无需在 highlight.exclude_languages、prismjs.exclude_languages 中添加额外配置，插件也正常运作。当然，为了保险起见，你也可以进行相应配置。
更多 Obsidian 语法在 Hexo 中的适配详见 站内文章这篇文章；Hexo+Obsidian 工作流协同请看 站内文章这篇文章。
导出双链信息真的只是顺手的事情，想象中的 Obsidian Like 博客其实也没有那么难…
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。