如何更改 Markdown 链接相对路径作为 gatsby-transformer-remark 的预处理

Posted 2023-03-08

【中文标题】如何更改 Markdown 链接相对路径作为 gatsby-transformer-remark 的预处理

【英文标题】：How to change Markdown link relative path as preprocessing of gatsby-transformer-remark

【发布时间】：2018-07-11 05:04:12

【问题描述】：

我正在使用 Gatsby 开发一个静态博客。 它使用gatsby-transformer-remark和gatsby-plugin-i18n插件支持多种语言。

我正在按如下方式管理 GitHub 存储库中的文章。

/博客 /2017 /06 01-foo.en.md 01-foo.zh.md /09 01-bar.en.md 01-bar.zh.md

并且文章之间的链接是必要的。所以为了不让网页浏览器看GitHub时变成死链接，我们设置如下链接。

[link](/blog/2017/09/01-bar.en.md)

但是，使用 Gatsby 显示时会出现死链接的问题。 因为实际生成的浏览器中的URL如下。

/[gatsby-config.pathPrefix]/en/blog/2017/09/01-bar

所以，当我运行gatsby build 或gatsby develop 时，我想使用正则表达式替换文章之间的链接，作为通过gatsby-transformer-remark 分析Markdown 的预处理。

我该怎么做？

---

添加时间：2 月 2 日

我也尝试了相对链接。

[link](../09/01-bar)

但是网址是/[gatsby-config.pathPrefix]/en/blog/2017/06/09/01-bar，这是死链接。 因为 Gatsby 将 html 放置到 /[gatsby-config.pathPrefix]/en/blog/2017/06/09/01-bar/index.html。

所以我又添加了../。它奏效了。但是，这有一些问题。

我无法从 GitHub 中的 Markdown 导航到另一个 Markdown。因为相对路径不同。 另外，不加语言后缀（如01-bar.en.md）是无法导航的，但是我加了之后，这次就无法识别Gatsby，显示404或者raw Markdown。

【问题讨论】：

如果您使用相对 URL，那么它们应该可以在任何地方工作。

我试过了，但是没有用。我添加了它的详细信息，所以请查看它。谢谢。

【参考方案1】：

你可以为gatsby-transformer-remark创建一个插件

plugins/gatsby-remark-relative-linker/index.js:

const visit = require('unist-util-visit');
module.exports = ( markdownAST ) => 
  visit(markdownAST, 'link', node => 
    if (
      node.url &&
      !node.url.startsWith('//') &&
      !node.url.startsWith('http') &&
      node.url.startsWith('/')
    ) 
      node.url = node.url.replace(/(.*)\.(\w2).md(#.*)?$/, (match, base, language, hash) => 
        return `/$language$base$hash`
      )
    
  );

  return markdownAST;
;

plugins/gatsby-remark-relative-linker/package.json:

./gatsby-config.js:

...
plugins: [
  
    resolve: 'gatsby-transformer-remark',
    options: 
      plugins: [
        ...
        'gatsby-remark-relative-linker',
      ],
    
  
,

在这里，我从网址中删除 .md 并为语言添加前缀。 将您的网址保留在以/ 开头的markdown 中，例如[text](/blog/2017/09/01-bar.en.md)

【讨论】：

太棒了！我不知道使用本地插件。