我正在尝试将多语言添加到 this gatsbyjs template使用gatsby-plugin-intl 。
字段级翻译:每个由可翻译标记的字段都会有一个翻译,并且您对所有翻译都有一个内容项。
多树翻译:每个翻译都有自己的内容项,并且翻译保存在不同的文件夹中。
pages
文件夹中的页面使用字段级别翻译并完全按预期工作。 content
文件夹中的页面使用 Markdown 文件进行多树翻译,但并不完全按照期望/应该的方式工作。他们的路由已关闭。
基本上我想让这些页面遵循这个路由:
/en/mypage/
应该给出英文版本/ko/mypage/
应该提供韩文版本
但是我现在得到以下 Markdown 源页面:
/en/mypage/en/
和/ko/mypage/en/
提供英文版本/en/mypage/ko/
和/ko/mypage/ko/
提供韩文版本
我尝试在其中一个钩子(Hook)(onCreatePage、onCreateNode、createPages)中重命名 slug,但到目前为止没有成功。当尝试时,似乎其中一个版本(en/ko)被覆盖,因此最终两条路线都只有一种语言。怎么解决这个问题?
- 相关仓库是 here
- 这是 slimmed down version of same project showing same issue
- 您可以实时查看问题 here
例如amsterdamfurniturelab.nl/en/bear-desk/en
变成 amsterdamfurniturelab.nl/nl/bear-desk/en
但不显示 nl 翻译。
最佳答案
gatsby-plugin-intl
仅支持字段级翻译,通过 Context 传递 JSON 翻译键。
you don't have to create separate pages such as
pages/en/index.js
orpages/ko/index.js
[...] the plugin will create static pages for every language
因此,如果您有 2 种语言,例如 NL 和 EN,则插件将为每个 slug 生成 3 个页面。因此,如果您有一个 /bear-desk/
页面,您将得到:
"/en/bear-desk/" <-- EN locale
"/nl/bear-desk/" <-- NL locale
"/bear-desk/" <-- default: either redirects or renders the default locale based on plugin settings
在您提供的存储库中,您在两个单独的页面上同时使用 gatsby-plugin-intl
和“手动”翻译。
由于 /bear-desk/en/
和 /bear-desk/nl/
被插件视为两个不同的页面,因此您实际上生成了 6 个页面对于每个段:
For your /bear-desk/en/ page (no JSON translations found, all will be in EN)
"/en/bear-desk/en/"
"/nl/bear-desk/en/"
"/bear-desk/en/"
For your /bear-desk/nl/ page (no JSON translations found, all will be in NL)
"/en/bear-desk/nl/"
"/nl/bear-desk/nl/"
"/bear-desk/nl/"
如果您想更改此行为,您可以使用 Gatsby 的 createPage
手动创建页面。 gatsby-node.js
中的 API 并确保您在正确的 URL 处创建正确的页面。
有多种方法可以做到这一点。如果您需要灵感,Building a multi-lingual static site with Gatsby 中描述了一个似乎与您的情况接近的示例。关于Hiddentao。
如果您在实现过程中遇到其他问题,请随时提出新问题,我很乐意为您提供帮助!
更新
我已经能够在 onCreatePage
API 中创建正确的 URL:
/*
here's what we want to do:
- for /nl/<slug>/nl/ create both /<slug>/ and /nl/<slug>/
- for /en/<slug>/en/ create /en/<slug>/
- for the rest of pages including <slug>, delete
*/
// note: optimally you would grab slugs from the fs or via graphql
const slugs = ["bear-desk", "cnc-explained"]
exports.onCreatePage = async ({
page,
actions: { createPage, deletePage },
}) => {
slugs.forEach(slug => {
if (page.path === `/nl/${slug}/nl/`) {
// create page in the default language (NL) at /slug
const defaultPage = { ...page, path: `/${slug}/` }
createPage(defaultPage)
console.log(`Created default page in NL at ${defaultPage.path}`)
// create a page for /nl/slug
const nlPage = { ...page, path: `/nl/${slug}/` }
createPage(nlPage)
console.log(`Created NL page at ${nlPage.path}`)
// delete the page with duplicate locale
deletePage(page)
console.log(`Deleted ${page.path}`)
}
else if (page.path === `/en/${slug}/en/`) {
// create a page for /en/slug
const enPage = { ...page, path: `/en/${slug}/` }
createPage(enPage)
console.log(`Created EN page at ${enPage.path}`)
// delete the page with duplicate locale
deletePage(page)
console.log(`Deleted ${page.path}`)
}
else if (page.path.includes(slug)) {
// delete all other pages with that slug
deletePage(page)
console.log(`Deleted ${page.path}`)
}
})
}
您将获得您想要的路线:
"/en/<slug>/" <-- EN locale
"/nl/<slug>/" <-- NL locale
"/<slug>/" <-- default (NL locale in your case)
尽管这会在正确的路由上创建正确的页面,但有一个主要限制:gatsby-plugin-intl
不知道这一点。这意味着您需要手动实现语言切换并链接到正确的区域设置。
这显然不是最好的解决方案,但由于该插件不支持这种类型的本地化,我不确定是否有更集成的方法来做到这一点(也许其他人会有更好的想法)。
我建议的另一件事是在 the repo 上提出功能请求。祝你好运!
关于javascript - 使用 gatsby-plugin-intl 调整 slug/routing,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60691650/