如何使用 Gatsby + Netlify CMS 正确提供国际化

Question

我正在尝试制作一个多语言网站，但遇到了一些问题。

预期行为：

语言根据浏览器语言自动更改
用户可以切换语言

示例：https://tic-tac-toe-ai.surge.sh/

我看到了gatsby-plugin-i18n并遵循了如何使用它的建议，但我的问题是我通过 Netlify CMS 自动创建页面并且无法根据需要获得正确的文件名：page.lang.md 我得到 page-lang.md.

我想知道是否有人已经有了可行的方法，或者可以告诉我我做错了什么，也许 gatsby-plugin-i18n 根本不适合这个堆栈

提前致谢

Answer 1

由于 NetlifyCMS 当前 lacks direct localization support as of this writing, you'll currently have to edit a separate copy of each document with changed content by country. Once you have that, if you edit them all in separate folders (e.g. you have /blogposts/en and /blogposts/de - the CMS supports two directories but no automatic forcing of authors to make both versions or update both versions), you could then use netlify's geo redirects 以确保德国的某人在尝试访问您的博客时获得 /blogposts/de/，而澳大利亚、英国、即、美国、新西兰的某人获得 /blogposts/en 版本的帖子：

/blogposts/* /blogposts/en/:splat 301! country=au,uk,ie,us,nz /blogposts/* /blogposts/de/:splat 301! country=de 这意味着您可以 link 以 /blogposts/title 的身份访问帖子，访问者将自动使用 HTTP 301 重定向到适当的语言。

您应该考虑为来自其他非特定国家/地区的访问者提供 "default" 版本。这些将居住在 /blogposts/title 中，并且只有当访问者不是来自任何列出的国家/地区时才会显示上述配置。

Answer 2

我上次做它已经有一段时间了。

似乎这个话题仍然没有引起人们的兴趣，所以我决定分享我使用 Netlify CMS 和 Gatsby 实现国际化的方法。

优点：

实现非常简单，不需要任何包‍♀️
维护真的很简单

但是，如果您已经有了可用的 Gatsby/Netlify CMS 项目并且想要添加语言，则需要更改结构。

它真的很简洁，特别是在用不同的人使用的特定语言创建页面时。

在我的例子中，我只有 EN 和 DE。每种语言都有两个内容管理员。

因为我只需要通过 CMS 创建英语和德语页面，所以我只在 config.yml

中创建了 2 个集合

#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
---

注意*不同语言的同一页面的 slug 应该是相同的，因为这是我们未来 Switcher 的关键（据我所知对 SEO 有好处）

从这一点开始，gatsby-node 应该按语言过滤页面，清理输入字符串并将其转换为有效的 slug。

我们需要这些页面的 slugs:

/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 link 会将您从 /my-little-slugy/ 重定向到 /de/my-little-slugy/，反之亦然，这取决于传入的当前语言。

我没有把模板和组件的全部逻辑放在这里，因为它有很多其他功能，非常繁重。但我希望你明白我的想法。如果人们仍然感兴趣，我将创建一个示例存储库。

关于根据位置进行重定向 - 据我了解，SEO 在开始时使用默认语言很好（但我可能是错的），如果用户想用德语阅读 - 去点击 Switcher。

UPD

这是 example repo 我对页面和帖子执行相同操作的地方

这里是demo，你可以在这里看到它是如何工作的

这里是 a medium post，我在其中描述了如何对页面

执行相同的操作

如何使用 Gatsby + Netlify CMS 正确提供国际化

How to provide internationalization properly using Gatsby + Netlify CMS

gatsby

netlify

netlify-cms