我发现我之前进入了一个误区,明明知道 Obsidian 上的双链格式可以使用传统的 Markdown 链接上的格式,切换成这种格式的话,在用 Hugo 生成静态页面时就可以让 Obsidian 上的双链也变成一个超链接,这时也解决了 Hugo 默认的 Markdown 渲染引擎不渲染双中括号的尴尬。
我之前觉得 Obsidian 上的双链就要使用 Wiki 链接这样的格式才显得有灵魂,就强行去各种折腾。这明显是错的,人类为何选择各式各样的工具呢?原因就在于它们能够带来便捷。所以灵魂不灵魂的都是扯蛋,应该怎么方便怎么来。
之前我的方案是利用 JavaScript 将页面上匹配正则的值里的双中括号删除,后来觉得应该也加个超链接返回对应的标签,最终的效果也能正确的执行,就是相对的多此一举了。而且我还发现在很致命的问题,由于 JavaScript 在页面加载完成后再进行替换的动作,替换后的字符比渲染前减少了,进行重新排版后就会将页面拉扯,虽然这个过程很短暂,但还是挺明显的。这个小问题居然直接触发了我的强迫症,尝试了好几个方法感觉都不太理想。例如添加一个加载动画,将内容先隐藏起来,设定一个时间值作用给加载动画的隐藏与内容页面的打开。这样就可以将因替换造成的页面拉扯给过渡过去了。但是实际测试后显然对此不是很满意,不想无缘无故给页面增加几百毫秒的加载过程。不过这期间我想到,此法若用在加载网络字体的话,体验应该不错,有空研究一下。
话说回来,既然之前的坑已经埋下了,那么现在只能想办法填了。注意的是,我在 Obsidian 上的双链都是基于标签的形式,请根据自己实际情况判断以下内容是否适合使用。
替换所有内容下已有的 Wiki 链接
判断目录下的文件是否为 Markdown 文件,如果是就读取文件里的内容并匹配对应的值进行替换。
1const fs = require('fs');
2const path = require('path');
3const directoryPath = __dirname;
4
5function replaceMarkdownLink(filePath) {
6 if (path.extname(filePath).toLowerCase() !== '.md') {
7 return;
8 }
9
10 const content = fs.readFileSync(filePath, 'utf-8');
11 const replacedContent = content.replace(/\[\[(.*?)\]\]/g, '[$1]($1.md)');
12
13 fs.writeFileSync(filePath, replacedContent, 'utf-8');
14}
15
16function processDirectory(directoryPath) {
17 const files = fs.readdirSync(directoryPath);
18
19 for (const file of files) {
20 const filePath = path.join(directoryPath, file);
21
22 if (fs.statSync(filePath).isDirectory()) {
23 processDirectory(filePath);
24 } else {
25 replaceMarkdownLink(filePath);
26 }
27 }
28}
29
30processDirectory(directoryPath);
将文件保存到笔记仓库运行即可。
1node replace.js
替换页面 a 标签中 href 值
这样 Obsidian 上的双链格式就会从 [[生活]]
变成 [生活](生活.md)
这样的格式,很显然,转换后的格式可以被 Hugo 正确渲染成超链接。
1<a href="生活.md">生活</a>
这时需将之前的替换代码修改一下,让其输出为以下的结果。
1<a href="/tags/生活" title="查看与「生活」相关的内容">生活</a>
1const contentDiv = document.querySelector('.article-content');
2
3if (contentDiv) {
4 const paragraphs = contentDiv.querySelectorAll('p');
5
6 paragraphs.forEach(p => {
7 const links = p.querySelectorAll('a[href$=".md"]');
8
9 links.forEach(link => {
10 const href = link.getAttribute('href');
11 const title = link.textContent;
12 const newHref = href.replace('.md', '').toLowerCase();
13 const newLinkHtml = `<a href="/tags/${newHref}" title="查看与「${title}」相关的内容">${title}</a>`;
14
15 p.innerHTML = p.innerHTML.replace(link.outerHTML, newLinkHtml);
16 });
17 });
18}
End…