Question

我试图建立一个多语言网站并遇到一些问题。

预期行为：

语言自动更改取决于浏览器语言
用户可以切换语言

示例：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创建英文和德文页面，所以我仅在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
---

请注意*同一页上用不同语言编写的标签应该相同，这是我们未来切换台的关键（据我所知，这对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

这是example repo，在这里我也处理页面和帖子

在这里demo，您可以看到它的工作原理

这里是a medium post，在这里我将介绍如何处理页面

Answer 2

由于NetlifyCMS当前为lacks direct localization support，因此您当前必须编辑每个文档的单独副本，并按国家/地区更改内容。有了这些文件后，如果您将它们全部编辑在单独的文件夹中（例如，您拥有/blogposts/en和/blogposts/de-CMS支持两个目录，但是不会自动强制作者同时制作两个版本或更新两个版本），然后，您可以使用netlify的geo redirects来确保在德国的某人尝试访问您的博客时获得/ blogposts / de /，而在au，uk，ie，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中，并且仅当访问者不是来自所列国家中的任何一个时，才显示以上配置。

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

2 个答案: