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

Question

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

预期行为：

1. 语言自动更改取决于浏览器语言

2. 用户可以切换语言

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

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

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

提前致谢

Answer 1

我上次做这件事已经有一段时间了。

似乎这个话题仍然让人们感兴趣，所以我决定分享我用来通过 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
---

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

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

我们想要这些页面的 slug：

/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 在开始时使用默认语言是可以的（但我可能是错的），如果用户想用德语阅读 - 去点击切换器。

UPD

这是示例存储库，我对页面和帖子执行相同操作

这是演示，您可以在其中看到它是如何工作的

这是一篇中等文章，我描述了如何对页面执行相同操作