javascript - 使用 gatsby-plugin-intl 调整 slug/路由

Question

我正在尝试将多语言添加到 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)被覆盖了，因此您最终只能为两条路线使用一种语言。如何解决这个问题？

相关 repo 是here

这是 slimmed down version of same project showing same issue

你可以看到问题直播here

例如。 amsterdamfurniturelab.nl/en/bear-desk/en变成 amsterdamfurniturelab.nl/nl/bear-desk/en但不显示 nl 翻译。

Answer 1

gatsby-plugin-intl仅支持字段级翻译，通过 Context 传递 JSON 翻译键。
来自 the plugin's README :

you don't have to create separate pages such as pages/en/index.js or pages/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

在您提供的 repo 中，您同时使用了 gatsby-plugin-intl和使用两个单独页面的“手动”翻译。
由于 /bear-desk/en/和 /bear-desk/nl/插件将其视为两个不同的页面，您实际上为每个 slug 生成 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 中描述了一个似乎与您的情况相近的示例。关于隐藏道。
如果您在实现过程中出现其他问题，请随时提出新问题，我很乐意为您提供帮助!
更新
我已经能够在 onCreatePage 中创建正确的 URL。接口(interface):

/*
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 上提出功能请求。 .祝你好运!