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

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

和link之间的文章是必须的。因此，为了不至于用Web浏览器看GitHub时变成死link，我们设置一个link如下。

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

但是这个在用Gatsby显示的时候有死linking的问题。因为实际生成的浏览器中的URL是这样的

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

因此，当我运行 gatsby build 或 gatsby develop 时，我想使用正则表达式替换文章之间的 links，作为预处理以通过 gatsby-transformer-remark.

我怎样才能做到以上几点？

添加：2 月 2 日

我也试过亲戚 links.

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

但是URL是/[gatsby-config.pathPrefix]/en/blog/2017/06/09/01-bar，已经死了link。因为 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。

Answer 1

你可以create a plugin for 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 像 markdown 一样以 / 开头，比如 [text](/blog/2017/09/01-bar.en.md)

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

How to change Markdown link relative path as preprocessing of gatsby-transformer-remark

markdown

gatsby

remarkjs