11

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

预期行为：

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

  2. 用户可以切换语言

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

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

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

提前致谢

4

2 回答 2

7

当我最后一次工作时，已经有一段时间了。

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

优点：

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

但是，如果您已经拥有正在运行的 Gatsby/Netlify CMS 项目并且想要添加语言，则需要更改结构。

它真的很干净和容易，尤其是在使用不同的人工作的特定语言创建页面时。

就我而言，我只有 EN 和 DE。每种语言都有两个内容管理器。

由于我只需要通过 CMS 创建英文和德文页面，因此我只是在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 应该是相同的，因为这是我们未来 Switcher 的关键（据我了解，对 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

这是示例 repo，我对页面和帖子做同样的事情

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

这是一篇中型帖子，我在其中描述了如何对页面执行相同操作

于 2020-02-08T23:15:06.153 回答
3

由于在撰写本文时 NetlifyCMS 目前缺乏直接的本地化支持，因此您目前必须编辑每个文档的单独副本，并按国家/地区更改内容。一旦你有了它，如果你在单独的文件夹中编辑它们（例如你有/blogposts/en- /blogposts/deCMS 支持两个目录，但不会自动强制作者制作两个版本或更新两个版本），你可以使用 netlify 的地理重定向来确保德国的某个人在尝试访问您的博客时会得到 /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 中，并且仅当访问者不是来自任何所列国家/地区时，才会显示上述配置。

于 2018-12-27T15:28:02.587 回答