Javascript 需要帮助以支持来自Yaml文件的Gatsby站点中的多种语言吗 上下文

我有一个盖茨比项目，我使用盖茨比源文件系统从整个站点的YAML文件中获取内容，它不是一个大项目，最多有四个页面，没有博客

为什么是亚马尔？ YAML的选择是基于这样一个事实，即客户不希望有一个CMS支持它，而是需要编辑文件。由于无法判断编辑其内容的人是否具有编程或类似的背景，我们一致认为YAML格式将更容易、更简单地向团队解释，以便在完成后接管。 还需要支持以葡萄牙语（默认为葡萄牙语）和英语开始的语言。稍后，他们将决定是否需要添加其他语言

问题 我已经阅读了一些教程，并浏览了盖茨比插件目录，以获得react-i18next和react-intl对这些插件背后的大多数依赖性的支持。事实上，有一个非常具体的名字，听起来它对这个项目来说是正确的，但是它的文档记录得很差，并且在github上查看它的文件，我无法真正理解它背后的含义，这意味着它很难实现

i18n i18n方法的问题在于，我们还不知道默认文本是什么，这意味着主页内容将来可能会发生变化，因此翻译其内容可能是一个问题

我们理解，需要的是在我们的代码中指出每个实例的位置，以便盖茨比在构建过程中使用每种语言选项，如果这有意义的话

可能的解决办法 综上所述，我认为最好的方法是为区域设置单独的文件，并根据用户切换到或不切换到的语言获取它们的内容，以防出现默认情况 例如：

这两个文件都有相似的结构，因此编辑可以阅读这两个文件并关联其中的文本。比如：

# homepage.pt-br.yaml
titulo: "titulo principal"
texto: "texto corrido"
...
# homepage.en-us.yaml
titulo: "main header"
texto: "text fill"

虽然我不确定是否有可能从我的简单配置中获取这个，只使用gatsby源文件系统。这个想法来自之前的一次经验，我们使用了contentfulcms，在graphql查询中为每个节点和数组结果分别获取区域设置。我不记得是怎么回事了 完成了，但它类似于{['pt-BR'].title之类的东西。然后我必须配置gatsby-node.js，根据我们拥有的语言创建上下文，设置默认值，使用适当的slug等构建页面。这样每个页面都会调用适当的lang，用户可以从开关中选择它

我不确定从哪里开始。我过去曾使用CreateResolver API处理同一Contenful无法处理的节点，但我不确定是否可以使用它为每种语言构建节点

有没有合适的方法呢？我会为此阅读任何文档吗？ 如果这个问题看起来太“不合适”，我很抱歉。我正在努力更深入地学习React和Gatsby

---

如果您有任何意见、建议和问题，我们将不胜感激。

我在以前的i18n Gatsby项目中使用了类似的设置，在该项目中，我们还使用文件名来分隔不同的语言，即main.en.md、main.ko.md

1.为每个内容文件创建一个元字段 例如，查询main.en.md将显示类似{u meta:{lang:'en'}，title:'hello'，…}

对于您的情况，您可以在createSchemaCustomization或onSourceNode中执行此操作，获取yaml的父文件节点，然后检查它是否包含语言字符串。我们在createSchemaCustomization可用之前执行了此操作，因此在onSourceNode中使用了createNodeField

2.在页面和模板上以编程方式调用createPage 我们有一份已知语言的清单

['en'，'ko'，'ja'].forEachlang=>{ 创建页面{ //生成url，如“site.com/ko/main” path:path.join'/'，lang，slug， 组件：组件路径， 上下文：{lang，otherContext} } } 对于src/pages文件夹中的页面，我们使用onCreatePages向上下文和url添加语言：

exports.onCreatePages={page，actions}=>{ const{createPage，deletePage}=actions if！page.componentPath.includes'src/pages'{ 回来 } languages.forEachlang=>{ 创建页面{ 页 path:path.join'/'，lang，page.path， 上下文：{lang} } } 删除网页 } 3.模板中按语言字段查询数据： 4.使前端导航工作正常 这是最复杂的部分，我们为语言创建一个React上下文，用它包装根，然后编写一个自定义链接组件，该组件围绕GatsbyLink进行包装，以确保站点中的所有链接都指向相同的语言部分

另一件事是存储用户语言选择，然后在页面加载时重定向，如果他们在站点的“错误”语言部分

我们的解决方案在实践中也稍微复杂一些，因为我们 在单独的main.en.md文件中包含i18n数据的页面和在同一文件中包含该信息的页面

我们还希望有一个好的默认url www.site.com/about，所以我们的createPage逻辑也考虑了这一点

---

这绝对是混乱的-我们在早期的盖茨比2.0中就这样做了，当时没有好的i18n解决方案，否则我肯定会首先寻找替代方案。

我在以前的i18n盖茨比项目中使用了类似的设置，在那里我们还使用文件名来分隔不同的语言，即main.en.md、main.ko.md

// this code can be used to create your Gatsby JS site multilingual as well as you can pass id or data which you require to send as a parameter. to make this code works create a page name colors in your pages directory and this is now you can access your single page with multiple urls.

// http://localhost:8001/en-us/color/984 => for en-us language
// http://localhost:8000/en-ca/colour/987 => for en-ca language
// http://localhost:8000/fr-ca/couleur/987 => for fr-ca language
 
const path = require(`path`);
// language locales
const locales = ["en-us", "en-ca", "fr-ca"];
// names of pages in different locales
const colorPageNames = ["color", "colour", "couleur"];

// this method will automatically execute on every page creation
exports.onCreatePage = ({ page, actions }) => {
  // destruct createPage and deletePage methods from actions
  const { createPage, deletePage } = actions;
  // Grab the keys of locales and map over them
  colorPageNames.map((pagename, index) => {
    // condition to match page path
    if (page.path.match(/^\/color/)) {
      // first delete the incoming page that was automatically created by Gatsby. if path is matched
      deletePage(page);
      // use the values defined in "locales" to construct the path
      const localizedPath = `${locales[index]}/${pagename}`;
      // match the url format of page
      page.matchPath = `/${locales[index]}/${pagename}/:id`;
      // call a function createPage to construcut new pages with multiple routes
      return createPage({
        // pass on everything from the original page
        ...page,
        // path use to create path for the new page
        path: localizedPath,
        // pass in the locale and pagename as context to every page
        context: {
          locale: `${locales[index]}`,
          pagename: `${pagename}`,
        },
      });
    }
  });
};

1.为每个内容文件创建一个元字段 例如，查询main.en.md将显示类似{u meta:{lang:'en'}，title:'hello'，…}

对于您的情况，您可以在createSchemaCustomization或onSourceNode中执行此操作，获取yaml的父文件节点，然后检查它是否包含语言字符串。我们在createSchemaCustomization可用之前就这样做了，所以我们在onSourceNode中使用了createNodeField

2.在页面和模板上以编程方式调用createPage 我们有一份已知语言的清单

['en'，'ko'，'ja'].forEachlang=>{ 创建页面{ //生成url，如“site.com/ko/main” path:path.join'/'，lang，slug， 组件：组件路径， 上下文：{lang，otherContext} } } 对于src/pages文件夹中的页面，我们使用onCreatePages向上下文和url添加语言：

exports.onCreatePages={page，actions}=>{ const{createPage，deletePage}=actions if！page.componentPath.includes'src/pages'{ 回来 } languages.forEachlang=>{ 创建页面{ 页 path:path.join'/'，lang，page.path， 上下文：{lang} } } 删除网页 } 3.按模板中的语言字段查询数据： 4.使前端导航正常工作 这是最复杂的部分，我们为语言创建一个React上下文，用它包装根，然后编写一个自定义链接组件，该组件围绕GatsbyLink进行包装，以确保站点中的所有链接都指向相同的语言部分

另一件事是存储用户语言选择，然后在页面加载时重定向，如果他们在站点的“错误”语言部分

我们的解决方案在实践中也稍微复杂一些，因为我们在单独的main.en.md文件中有包含i18n数据的页面，在同一个文件中有包含该信息的页面

我们还希望有一个好的默认url www.site.com/about，所以我们的createPage逻辑也考虑了这一点

---

这绝对是一团糟——我们在《盖茨比2.0》早期就这样做了，当时没有好的i18n解决方案，否则我肯定会首先寻找替代方案。

谢谢您的回答！我期待着尝试一下。首先组织回购分支，这样我就可以在这里正确地使用它并进行测试。很快就会收到反馈。谢谢你的回答！我期待着尝试一下。首先组织回购分支，这样我就可以在这里正确地使用它并进行测试。我们很快就会收到反馈。

// this code can be used to create your Gatsby JS site multilingual as well as you can pass id or data which you require to send as a parameter. to make this code works create a page name colors in your pages directory and this is now you can access your single page with multiple urls.

// http://localhost:8001/en-us/color/984 => for en-us language
// http://localhost:8000/en-ca/colour/987 => for en-ca language
// http://localhost:8000/fr-ca/couleur/987 => for fr-ca language
 
const path = require(`path`);
// language locales
const locales = ["en-us", "en-ca", "fr-ca"];
// names of pages in different locales
const colorPageNames = ["color", "colour", "couleur"];

// this method will automatically execute on every page creation
exports.onCreatePage = ({ page, actions }) => {
  // destruct createPage and deletePage methods from actions
  const { createPage, deletePage } = actions;
  // Grab the keys of locales and map over them
  colorPageNames.map((pagename, index) => {
    // condition to match page path
    if (page.path.match(/^\/color/)) {
      // first delete the incoming page that was automatically created by Gatsby. if path is matched
      deletePage(page);
      // use the values defined in "locales" to construct the path
      const localizedPath = `${locales[index]}/${pagename}`;
      // match the url format of page
      page.matchPath = `/${locales[index]}/${pagename}/:id`;
      // call a function createPage to construcut new pages with multiple routes
      return createPage({
        // pass on everything from the original page
        ...page,
        // path use to create path for the new page
        path: localizedPath,
        // pass in the locale and pagename as context to every page
        context: {
          locale: `${locales[index]}`,
          pagename: `${pagename}`,
        },
      });
    }
  });
};

// this code can be used to create your Gatsby JS site multilingual as well as you can pass id or data which you require to send as a parameter. to make this code works create a page name colors in your pages directory and this is now you can access your single page with multiple urls.

// http://localhost:8001/en-us/color/984 => for en-us language
// http://localhost:8000/en-ca/colour/987 => for en-ca language
// http://localhost:8000/fr-ca/couleur/987 => for fr-ca language
 
const path = require(`path`);
// language locales
const locales = ["en-us", "en-ca", "fr-ca"];
// names of pages in different locales
const colorPageNames = ["color", "colour", "couleur"];

// this method will automatically execute on every page creation
exports.onCreatePage = ({ page, actions }) => {
  // destruct createPage and deletePage methods from actions
  const { createPage, deletePage } = actions;
  // Grab the keys of locales and map over them
  colorPageNames.map((pagename, index) => {
    // condition to match page path
    if (page.path.match(/^\/color/)) {
      // first delete the incoming page that was automatically created by Gatsby. if path is matched
      deletePage(page);
      // use the values defined in "locales" to construct the path
      const localizedPath = `${locales[index]}/${pagename}`;
      // match the url format of page
      page.matchPath = `/${locales[index]}/${pagename}/:id`;
      // call a function createPage to construcut new pages with multiple routes
      return createPage({
        // pass on everything from the original page
        ...page,
        // path use to create path for the new page
        path: localizedPath,
        // pass in the locale and pagename as context to every page
        context: {
          locale: `${locales[index]}`,
          pagename: `${pagename}`,
        },
      });
    }
  });
};