Отрегулируйте slug / routing с помощью gatsby-plugin-intl

Question

Я пытаюсь добавить в этот шаблон gatsbyjs несколько языков, используя gatsby-plugin-intl.

Перевод на уровне поля: каждое поле, помеченное как translatable, будет иметь перевод, и у вас будет один элемент контента для всех переводов.

Многообразный перевод: у каждого перевода будет свой собственный контент, и переводы будут сохранены в разных папках.

Страницы в pagesпапка использует перевод на уровне поля и работает полностью как надо. Страницы вcontentпапка использует перевод нескольких деревьев с использованием файлов уценки, но не работает полностью так, как хотелось бы. Их маршрутизация отключена.

В основном я бы хотел, чтобы эти страницы следовали этой маршрутизации:

• /en/mypage/ должен дать английскую версию
• /ko/mypage/ должен дать корейскую версию

Однако теперь для исходных страниц уценки я получаю следующее:

• /en/mypage/en/ а также /ko/mypage/en/ дать английскую версию
• /en/mypage/ko/ а также /ko/mypage/ko/ дать корейскую версию

Я попытался переименовать ярлык в одном из хуков (onCreatePage, onCreateNode, createPages), но пока безуспешно. При попытке кажется, что одна из версий (en/ko) перезаписывается, поэтому в итоге вы получаете только один язык для обоих маршрутов. Как это решить?

• Соответствующее репо здесь
• Это уменьшенная версия того же проекта, демонстрирующая ту же проблему.
• Вы можете увидеть проблему здесь

Например amsterdamfurniturelab.nl/en/bear-desk/en превращается в amsterdamfurniturelab.nl/nl/bear-desk/en но не показывает nl-перевод.

Answer 1

gatsby-plugin-intl поддерживает только переводы на уровне полей, передавая ключи перевода JSON через Context.

Из README плагина:

вам не нужно создавать отдельные страницы, такие как pages/en/index.js или pages/ko/index.js [...] плагин будет создавать статические страницы для каждого языка

Итак, если у вас 2 языка, скажем NL и EN, плагин будет генерировать 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's createPage API в gatsby-node.js и убедитесь, что вы создаете правильные страницы с правильными URL-адресами.

Есть несколько способов сделать это. Если вам нужно вдохновение, один пример, который кажется вам близким, описан в разделе Создание многоязычного статического сайта с помощью Gatsby на Hiddentao.

Если во время вашей реализации возникнут другие проблемы, не стесняйтесь задавать новый вопрос, и я буду рад помочь!

 Обновить

Мне удалось создать правильные URL-адреса в onCreatePage API:

/*
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не знает об этом. Это означает, что вам нужно вручную реализовать переключение языков и привязку к нужному языку.

Очевидно, что это не лучшее решение, но поскольку плагин не поддерживает этот тип локализации, я не уверен, что есть более интегрированный способ сделать это (возможно, у других будут лучшие идеи).

Еще одна вещь, которую я предлагаю, - это сделать запрос функции в репо. Удачи!