问题标签 [gatsby-plugin]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1491 浏览

reactjs - “gatsby-source-contentful”的插件选项无效

尝试打开通过 GitHub 分叉的项目时遇到以下错误。

我已经进行了几次编辑,但由于目前无法打开它,因此无法处理该项目。我确实有一个内容丰富的帐户,但对 Gatsby 来说还很陌生,我不知道如何为accessToken.

我需要通过 执行此操作process.env,还是我完全错过了该过程?

谢谢,任何帮助表示赞赏。

0 投票
1 回答
198 浏览

reactjs - 如何在 gatsby 中查询 grapghql 上的正文

我正在尝试使用 2019 年的教程创建一个博客,该教程使用contentful-plugin但我看到 gastby 已经更新了他们的文档,所以我不能做我在视频中看到的,我的问题是,我不太了解下面的文档。

当我开始使用http://localhost:8000/___graphql 之前查询时

现在我在 Contentful 文档上看到了 Note: Be aware that previous versions of the Gatsby Contentful source plugin used a json field. This got replaced with raw to give you more flexibility in rendering and to fix performance issues.

在 graphql 上我没有这个bodyRichText,我只有body { raw }但使用这个,比如:

不工作所以我错过了一些东西,但我找不到它是什么。

0 投票
1 回答
1197 浏览

reactjs - 使用查询变量时出现 Gatsby 运行时错误

我正在使用查询变量slug为 gatsby 中的特定页面进行路由。所以我使用模板project-datails.js来创建页面。

所以 project-datails.js 和 graphql 查询变量看起来像这样

当我记录数据时,它显示undefined。当我运行相同的查询时

它的显示数据。

因此,如果我在不使用 garaphql 查询变量或不从 garaphql 获取数据的情况下运行模板,例如仅在模板内打印这一行

它工作正常。

因此,当我使用查询变量时,它会显示运行时错误。

这个查询变量slug我从gatsby-node.js传递它

markdownfile dojo-coffee-house.md看起来像这样

更新

我在我的模板project-datails.js中收到警告

我无法弄清楚这里的错误是什么。那么有人可以帮忙吗?

0 投票
1 回答
194 浏览

environment-variables - 在 gatsby-source-contentful 上抛出错误,编译我的项目时遇到困难

我目前在运行时遇到以下错误gatsby develop

我的.env.development文件已启动并正在工作,我尝试在其中使用字符串文字gastby-config.js以及在我的空间 ID 和访问令牌周围使用刻度,以及没有刻度和字符串文字。我还将这些值硬编码到gatsby-config.js其中,但这也不起作用。

gatsby-source-contentful看起来像:

在这一点上,我的问题更多是这样的,这可能是我的代码在其他地方的问题,有没有人经历过类似的事情?

谢谢。

0 投票
0 回答
271 浏览

reactjs - Typescript & Gatsby:gatsby-plugin-ts + graphQL 查询集成

gatsby-plugin-ts用来为我的 graphql 页面查询生成类型。

我遇到的问题是生成的所有类型都T | undefined为所有字段返回一个类型,所以我需要在任何组件中使用它们之前检查所有查询子字段,否则编译器会抛出错误。

举个gatsby-plugin-image例子。给定一个查询:

结果data.banner应该传递给getImage函数,但如果您尝试这样做,打字稿可以理解地抛出以下错误,因为 undefined 不能分配给IGAtsbyImageData预期的getImage 打字稿错误

当涉及到更复杂的查询时,情况就更糟了,比如来自 markdownremark 插件的查询:每次都需要手动检查一个查询结果的所有子字段。有解决办法吗?

0 投票
1 回答
1569 浏览

gatsby - 如何在 Gatsby-plugin-image 中的 Gatsby 中将图像路径作为道具传递

我正在尝试将图像的路径作为道具传递给组件

注意:组件和索引页面都可以通过相同的路径访问图像。当我将路径作为道具传递时它不起作用

在下面的代码中,我尝试使用 GatbsyImage 和 StaticImage 标记似乎都失败了

index.js

组件/ImageOverlay.js

我使用 GatsbyImage 和 StaticImage 只是为了检查

我在这里先向您的帮助表示感谢

0 投票
1 回答
113 浏览

gatsby - Gatsby-plugin-offline - 服务工作者拦截表单 POST 请求

我有一个带有 gatsby-plugin-offline 的页面设置。

我终于让一切都脱机工作了(文档有点稀疏,所以这有点“反复试验”)。但我现在有一个我似乎无法解决的问题。

我对 Netlify 的联系表单的 POST 请求被服务人员拦截。我真的不需要任何离线功能——当用户离线时,我简单地将表单中的“发送”按钮“交换”为“网络离线”消息。但是,当页面在线时,serviceworker 仍然会启动。

我想我必须为 POST 请求进行某种替代路由,但我不确定如何解决这个问题?

到目前为止,这是我在 gatsby-plugin-offline 中按预期工作的设置:

该插件的文档意味着可以通过在选项下添加一行来将脚本附加到服务工作者:

我的想法是添加如下内容:

但我不确定?你能以某种方式过滤 event.request.method === 'POST' 或类似的强制任何 POST 请求只发送到网络吗?

0 投票
1 回答
1886 浏览

arrays - 使用带有数组的 gatsby-plugin-image 的 GatsbyImage 时出现问题

在我的函数中,我有一个包含 id、title 和 image 的数组:

使用该<img>标签,我只能查看来自网络的最后两个占位符图像。但我想使用gatsby-plugin-image。我已阅读文档并需要使用GatsbyImage标签,但是当我使用它时,看不到图像。

有谁知道我该如何继续?

0 投票
0 回答
19 浏览

gatsby - Gatsby-source-apiserver 2.1.0 实体数组

每当我使用

它将我的数据保存到一组对象中,但我的程序设置方式是从一个对象中读取。有什么我可以解决的吗?

0 投票
1 回答
342 浏览

javascript - DigitalGarden 笔记页面创建期间的 GraphQL 查询投诉

我正在尝试通过了解 Maggie Appleton 网站 (maggieappleton.com) 的运作方式来学习如何在 GatsbyJS 中构建数字花园,这是一个了不起的网站 imo。

mdx 笔记根据其性质(书籍、论文、插图或数字花园笔记)分类在不同的文件夹中。它们位于content文件夹中。

一般文件夹结构如下:

据我了解:在 中gatsby-node.jscreatePages首先查询frontmatter 和note 的内容,并根据特定模板(在模板文件夹中找到)生成页面。

这适用于所有页面,除了数字花园的注释。在这种情况下,必须在音符之间创建双向链接,这就是 Aengus McMillin 的 gatsby-them-brain 插件发挥作用的地方。

节点首先由onCreateNode插件创建并由插件使用以创建双向链接结构。我不确定如何生成注释页面(我相信通过 中的 MDXprovider 组件BrainNote.js)。

在运行 gatsby develop 时,我面临以下问题:

gatsby develop 工作正常,但从未生成注释页面。

notesQueryin似乎工作,gatsby-node.js因为笔记瓷砖正确显示在首页和数字花园页面上。但是,注释本身无法按照插件的逻辑和noteTemplate.js.

一定有我遗漏的东西,任何帮助将不胜感激!

重现步骤:

  1. https://github.com/MaggieAppleton/maggieappleton.com分叉
  2. 纱线安装
  3. 盖茨比发展

以下是gatsby-node.js内容:

BrainNote.js

Brain.js

noteTemplate.js