(Gatsby) 在每个文档的基础上从 `SEO.defaultProps` 分离的最简单方法？

Question

我网站上的大部分页面都是挪威语—

Seo.defaultProps = {
  lang: `no`,
  ...
}

不过，有些文章是英文的。

我在我的网站上使用了一些自动 CSS 断字。因此，我需要在这些文档的 head 中将 HTML lang 设置为英文，以便单词正确中断。

我对构建全面的多语言站点不感兴趣。我只想能够在每个文档的基础上偏离默认语言属性。

最简单的方法是什么？我需要更改我的 gatsby-node.js 文件吗？或者我可以将我的 template.js 文件设置为在每个 MDX 文件中请求 lang 吗？或者我可以在我希望更改的文章中插入一个 seo-english.js 组件吗？

Answer 1

我认为最简单的方法是将使用上下文 (pageContext) 编写的语言传递给每篇文章。

在您的 createPage 函数中：

  createPage({
      path: node.slug,
      component: blogPostTemplate,
      context: {
        lang: node?.lang ?? 'en',
      },
    })

在你的blogPostTemplate中：

function BlogTemplate({ pageContext }) {
  const { lang } = pageContext
  return (
    <div>
      Language is: {lang}
    </div>
  )
}

我认为这是最直接的解决方案，因为您已经循环遍历所有文章以创建所有页面，因此您正在利用循环来获取每种特定语言的数据。那么，你只需要把它收集起来即可。

该方法与在每个特定 MDX 文件中添加语言并在模板中获取它非常相似，它不会改变解决方法。最后，您需要以某种方式将它添加到 MDX 文件中。如果它不存在，它将使用 en 作为后备 (node?.lang ?? 'en')。

使用其中一种方法，您仍然可以相应地在 SEO 组件或其他组件上呈现。

Answer 2

我发现在那些我希望与默认道具不同的帖子中使用 Helmet 最简单。

<Helmet
    htmlAttributes={{
        lang: 'en'
    }}
/>

(Gatsby) Easiest way to diverge from the `SEO.defaultProps` on a per-document basis?