如何在 Gatsby 中处理有内容的内容数据

Posted 2023-03-08

【中文标题】如何在 Gatsby 中处理有内容的内容数据

【英文标题】：How to handle Contentful content data in Gatsby

【发布时间】：2016-10-15 11:27:43

【问题描述】：

我有兴趣使用Gatsby 使用来自Contentful 的内容构建一个Netlify 静态网站

Netlify 有这个很好的 Gatsby 入门指南： ​​https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify

但我有点不确定如何将 Contentful 融入其中。我是否需要编写脚本来将我的 Contentful 内容转换为 Gatsby 'markdown'？

任何想法、想法、链接表示赞赏！

【参考方案1】：

自从发布这个问题以来，一个官方的 Contentful 插件被添加到 Gatsby 的收藏中（官方由 Gatsby 团队创建，不是 Contentful）：https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful

一个示例站点的源代码在这里：https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful

该插件通过gatsby-transformer-remark 处理markdown 并生成生成的html，您可以通过Gatsby 的GraphQL 服务器使用来自the example proj 的类似查询来访问它：

 contentfulProduct(id:  eq: $id ) 
      productName 
        productName
      
      productDescription 
        childMarkdownRemark 
          html
        
      
      price
    

您可以使用该插件连接到 Content API（用于已发布的资产/内容）和/或 Preview API（用于已发布的和草稿内容/资产）。

我们使用 NODE_ENV 从开发中的 Preview API 和生产中的 Content API 中提取。

【讨论】：

嗨，如果我必须获取 2 个 id（或更多）的数据，查询格式是什么。有没有像“in”这样的东西。请帮忙。

【参考方案2】：

这是我用来从 Contentful 中提取数据的脚本： https://gist.github.com/ivanoats/e79ebbd711831be2536d1650890055c4

我在 gatsby 构建之前通过一个 npm 运行脚本运行它。

我很想开发一个插件或获得有关此过程的更好架构的想法。

我在Aerobatic blog 上写了一篇关于这种架构的文章，更详细地介绍了

【参考方案3】：

目前最好的选择是编写一个脚本，将 Contentful 中的内容同步到 Gatsby 网站的 pages 目录。

不过，我们计划在 Gatsby 中添加支持，以实现半自动。早期的日子还在这里！更多内容请参见本期https://github.com/gatsbyjs/gatsby/issues/324

【讨论】：

我喜欢 webpack 加载器的想法。