8

我正在使用 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 buildor时gatsby develop，我想使用正则表达式替换文章之间的链接，作为分析 Markdown 的预处理gatsby-transformer-remark。

我该怎么做以上？

添加：2 月 2 日

我也尝试了相对链接。

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

但是 URL 是/[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。
4

1 回答 1

12

您可以为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从 url 中删除并为语言添加前缀。将您的网址保持在降价中，以/like开头[text](/blog/2017/09/01-bar.en.md)

于 2018-02-19T10:36:25.813 回答