问题标签 [gatsby-plugin-intl]

我正在尝试使用gatsby-plugin-intl向这个 gatsbyjs 模板添加多语言。

字段级翻译：由可翻译标记的每个字段都将有一个翻译，并且所有翻译都有一个内容项。

多树翻译：每个翻译都有自己的内容项，翻译保存在不同的文件夹中。

文件夹中的页面pages使用字段级翻译并且完全按应有的方式工作。文件夹中的页面content使用降价文件使用多树翻译，但不能完全按预期/应该工作。他们的路由已关闭。

基本上我想让这些页面遵循这个路由：

• /en/mypage/应该给英文版
• /ko/mypage/应该给韩版

但是，我现在得到以下降价源页面：

• /en/mypage/en/并/ko/mypage/en/给出英文版
• /en/mypage/ko/并/ko/mypage/ko/给出韩文版

我尝试在其中一个钩子（onCreatePage、onCreateNode、createPages）中重命名 slug，但到目前为止没有成功。尝试时，似乎其中一个版本（en/ko）被覆盖了，因此您最终只能为两条路线使用一种语言。如何解决这个问题？

• 相关的回购在这里
• 这是显示相同问题的同一项目的精简版本
• 你可以在这里看到问题

例如amsterdamfurniturelab.nl/en/bear-desk/en变成amsterdamfurniturelab.nl/nl/bear-desk/en但不显示 nl 翻译。

我正在尝试使用支持两种语言的 gatsby 创建一个静态站点，我希望所有内容都由降价文件处理。

我从使用此https://www.gatsbyjs.org/packages/gatsby-plugin-intl/的 plugin-gatsby-intl 开始 - 工作得很好。

但我不知道如何使用降价，我猜是因为 gatsby-plugin-intl 改变了路径。当我尝试访问 localhost:8000/blog 时，它会更改为 localhost:8000/en/blog，并在 graphql 查询返回 null 的模板中引发错误。

我理解这个问题，但我无法理解如何解决它。我想我需要为每个语言制作 2 个降价文件并更改 gatsby-node.js 以正确管理路径，但不知道该怎么做。我在网上找到的唯一信息是https://hiddentao.com/archives/2019/05/07/building-a-multilingual-static-site-with-gatsby 但是按照他的步骤，我不工作

将不胜感激任何帮助

我的 gatsby-node.js：

我的模板：

和我的 blog.md：

我正在使用 gatsby，我需要为给定实体显示多个图像。图像路径存储在 MySQL 表中，我可以很好地获取它们。

我的查询如下所示：

这给了我这样的结果：

所以，问题是：如何修改我的架构以反映这些字段实际上是图像？我的意思是，这就是我要走的路，但我不知道该怎么做。

基本上，我需要将图像作为文件抓取，以便与 gatsby 的内置 Img 组件一起使用。

为了翻译我的网站，我intl在 layout.js 文件中注入了这样的内容：

但是在我添加gatsby-plugin-layout到我的项目之后（基于这个例子）我得到了这个错误：
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

如何在保留翻译的同时摆脱此错误？

这是相关的 gatsby 配置部分：

有人可以帮我怎么做吗？那是我通过获取数据来获取数据的代码，我如何将其导出到另一个文件并对其进行查询并在 UI 中呈现它？
那就是代码：

有谁知道为什么我会收到以下错误：

其余设置似乎正在工作，不确定我为什么会收到以下错误。之前的部署有效。该站点也可以在我的本地设置上运行，也许我应该对配置区域进行更新，但据我所知，当前的似乎是正确的。

我的配置：

构建配置

请指导我如何解决以下问题。谢谢！

我正在尝试使用 gatsby-plugin-intl 本地化页面。.js 文件没有问题，如下所述，但我应该如何为 .mdx 文件制作它？

我试图在这里做出类似的逻辑：

我正在使用Gatsby，我想建立一个单页网站，所以没有创建页面。为此，我gatsby-node.js使用以下代码进行了编辑：

在这种情况下，每个请求都会重新路由到index.js唯一的页面。然后，在index.js我的页面中：

如您所见，我有不同的路由器根据 url 加载特定组件。我已经为每个区域添加path了当前语言环境的前缀以匹配正确的路径。此机制仅适用于主页，但对于其他链接不起作用。事实上，如果我访问类似：

必须加载Collection组件，站点只需重定向到：

并再次显示该Home组件。

我做错了什么？

更新

页面结构：

正如你所看到的，我只index.js处理了我在gatby-node.js. 如果我删除本地化插件，至少使用此配置：

而且我没有在 url 前面加上前缀intl.locale，一切正常。但是添加redirect: true插件配置，并在链接前加上语言环境，站点将我重定向到主组件。

我需要创建多语言网站，并且需要使用成帧器动作来使用动画和页面转换。

我使用了最流行的 gatsby 插件来实现多语言功能gatsby-plugin-intl。为了实现页面转换，我使用了本文中提到的方法。我用过

在gatsby-browser.js中，然后将布局内容包装在：

不使用gatsby-plugin-intl一切正常：

但是当我开始使用 intl 包并且因为我将 Link 组件从

至

成帧器运动的存在动画停止工作。卸载组件时没有任何动画。

我对此进行了一些搜索，并在 github 上找到了pull request 。由于那个时候包的代码被改变了，问题仍然存在。

现在 intl 的包 Link 的代码如下所示：

如何解决？

PSyarn add gatsby-plugin-intl安装版本 0.3.3。github repo 中的最新版本是 0.3.1。安装的代码与 repo 中的代码不同。

我想在我的网站上制作一个双语表格并按照本教程进行操作。我不确定这里有什么未定义，尽管我认为它与gatsby-plugin-intl（我想可能是因为我的非英语内容没有 json 文件，但我添加了一个 zh-TW.json 和仍然得到相同的错误。调用localhost:8000而不是localhost:8000/contact) 时我也得到相同的错误。错误仅在运行npm run extract -- 'src/**/*.js*' --out-file src/intl/en.json --format simple命令后出现。

盖茨比-config.js

浏览器

终端

src/components/Form.js

src/intl/en.json

src/intl/zh-TW.json

src/pages/contact.js