Question

我正在使用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

文章之间的链接是必要的。因此，为了在使用Web浏览器查看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，这是死链接。因为盖茨比将HTML置于/[gatsby-config.pathPrefix]/en/blog/2017/06/09/01-bar/index.html。

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

我无法从GitHub中的Markdown导航到另一个Markdown。因为相对路径不同。
此外，如果不添加语言后缀（例如01-bar.en.md），则无法导航，但是当我添加时，Gatsby此时无法识别，并且会显示404或原始Markdown。

Answer 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(/(.*)\.(\w{2}).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并为语言添加前缀。将您的网址保持为与/ [text](/blog/2017/09/01-bar.en.md)

一样的降价标记

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

1 个答案: