我正在使用 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
- /06
- /2017
文章之间的链接是必要的。因此,为了在用Web浏览器查看GitHub时不成为死链接,我们设置如下链接。
[link](/blog/2017/09/01-bar.en.md)
但是,使用 Gatsby 显示时存在死链接的问题。 因为实际生成的浏览器中的URL如下。
/[gatsby-config.pathPrefix]/en/blog/2017/09/01-bar
因此,当我运行 gatsby build
或 gatsbydevelop
时,我想使用正则表达式替换文章之间的链接,作为分析 gatsby Markdown 的预处理-变压器备注
。
我怎样才能做到以上?
<小时/>添加时间: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或原始Markdown .
最佳答案
您可以create a plugin对于 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',
],
}
}
},
在这里,我从 URL 中删除 .md
并添加语言前缀。
保持您的网址以 /
开头,如 [text](/blog/2017/09/01-bar.en.md)
关于markdown - 如何更改 Markdown 链接相对路径作为 gatsby-transformer-remark 的预处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48553146/