Как правильно обеспечить интернационализацию с помощью Gatsby + Netlify CMS

Я пытаюсь сделать многоязычный сайт и столкнулся с некоторыми проблемами.

Ожидаемое поведение:

  1. Язык автоматически меняется в зависимости от языка браузера

  2. Пользователь может переключать язык

    пример: https://tic-tac-toe-ai.surge.sh/

Я видел gatsby-plugin-i18nи следовал рекомендациям, как его использовать, но моя проблема в том, что я автоматически создаю страницы через Netlify CMS и не могу получить правильное имя файла при необходимости: page.lang.mdя собираюсь page-lang.md,

Мне было интересно, если кто-то уже работает подход или может сказать мне, что я делаю неправильно, и, возможно, gatsby-plugin-i18n не укладывается в этот стек вообще

заранее спасибо

Источник

0 ответов

Это было недавно, когда я последний раз работал над этим.

Похоже, эта тема все еще вызывает интерес у людей, поэтому я решил поделиться подходом, который я использовал, чтобы сделать возможной интернационализацию с помощью Netlify CMS и Gatsby.

Преимущества:

  • Реализация действительно проста и не требует никаких пакетов.
  • Обслуживание действительно простое…

Но если у вас уже есть рабочий проект Gatsby/Netlify CMS и вы хотите добавить языки, потребуется изменить структуру.

Это действительно чисто и просто, особенно когда над созданием страницы на определенном языке работают разные люди.

В моем случае у меня только EN и DE. И по два контент-менеджера для каждого языка.

Поскольку мне нужно создать страницы на английском и немецком языках только через CMS, я просто создал 2 коллекции в config.yml

#Blog-Post EN       
  - name: "blogEn"
    label: "Blog (english)"
    folder: `${your_folder}/blog`
    filter: { field: contentType, value: blog }
    create: true
    slug: "{{slug}}"
    identifier_field: slug
    fields:
      - {label: Template Key, name: templateKey, widget: hidden, default: templates/blog-post}
      - {label: Slug, name: slug, widget: string}
      - {label: Language, name: language, widget: hidden, default: en }
      - {label: Content Type, name: contentType, widget: hidden, default: blog} 

  #Blog-Post DE       
  - name: "blogDe"
    label: "Blog (deutsch)"
    folder: `${your_folder}/de/blog`
    filter: { field: contentType, value: blog }
    create: true
    slug: "{{slug}}"
    identifier_field: slug
    fields:
      - {label: Template Key, name: templateKey, widget: hidden, default: templates/blog-post}
      - {label: Slug, name: slug, widget: string}
      - {label: Language, name: language, widget: hidden, default: de }
      - {label: Content Type, name: contentType, widget: hidden, default: blog}

Вы могли заметить, что коллекции почти одинаковы, поэтому это означает, что вы также можете создать одну единственную коллекцию и заменить виджет поля языка hidden с select и поместите в него два варианта.

Результат должен быть:

АНГЛИЙСКИЙ

---
templateKey: templates/blog-post
slug: my little slugy
language: en
contentType: blog
title: My little Posty
---

НЕМЕЦКИЙ

---
templateKey: templates/blog-post
slug: my little slugy
language: de
contentType: blog
title: My little Posty
---

Примечание. * Ярлык одной и той же страницы на разных языках должен быть таким же, поскольку это ключ для нашего будущего Switcher (и, насколько я понимаю, хорош для SEO)

С этого момента gatsby-node должен фильтровать страницы по языку, очищать входную строку и преобразовывать ее в допустимый слаг.

Нам нужны эти ярлыки для страниц:

/my-little-slugy/

/de/my-little-slugy/

А наша дезинфекция и кебаб выглядит так:

  if (language === 'de') {
    return _.kebabCase(slug).length === 0 ? '/de/' : `/de/${_.kebabCase(slug)}/`
  } else {
    return _.kebabCase(slug).length === 0 ? '/' : `/${_.kebabCase(slug)}/`
  }

Не волнуйся - Lodash а также _.kebabCase() поставляется с gatsby-starter-netlify-cms, так что дополнительных пакетов по-прежнему нет.

Следующим шагом будет загрузка файла языка в ваш templates/blog-post.js вместе с другими необходимыми данными и передачей language в компонент LanguageSwitcher, где ссылка gatsby перенаправит вас с /my-little-slugy/ к /de/my-little-slugy/ и наоборот, зависит от текущего языка.

Я не поместил сюда всю логику шаблона и Компонента, потому что он довольно тяжелый, как и многие другие функции. Но я надеюсь, что вы уловили мою идею. • Если люди все еще заинтересованы, я создам репозиторий примеров.

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

UPD

Вот пример репозитория, в котором я делаю то же самое со страницами и сообщениями.

Вот демо, где вы можете увидеть, как это работает

Вот средний пост, в котором я описываю, как сделать то же самое со страницами.

Источник

Поскольку на момент написания этой статьи в NetlifyCMS отсутствует прямая поддержка локализации, в настоящее время вам придется редактировать отдельную копию каждого документа с измененным содержимым в зависимости от страны. Если у вас есть это, если вы редактируете их все в отдельных папках (например, у вас есть /blogposts/en а также /blogposts/de - CMS поддерживает две директории, но не заставляет авторов автоматически создавать обе версии или обновлять обе версии), вы можете использовать гео-перенаправления netlify, чтобы убедиться, что кто-то в Германии получает / blogposts / de / при попытке зайти на ваш блог, и кто-то из au,uk, то есть us, nz, получает версию сообщений /blogposts/en:

/blogposts/* /blogposts/en/:splat 301! country=au,uk,ie,us,nz /blogposts/* /blogposts/de/:splat 301! country=de Это означает, что вы можете ссылаться на сообщения как /blogposts/title, и посетители будут автоматически перенаправлены с HTTP 301 на соответствующий язык.

Вы должны рассмотреть вариант "по умолчанию" для посетителей из других не указанных стран. Они будут находиться в /blogposts/title и будут отображаться только с вышеуказанной конфигурацией, если посетитель не из ЛЮБОЙ из перечисленных стран.

Источник
Другие вопросы по тегам