问题标签 [gatsby]

我正在尝试添加request模块来获取一些数据，但是我遇到了麻烦，因为它以某种方式依赖于fs模块安装它并要求它给我这个错误： This dependency was not found: fs, tls, net To install it, you can run: npm install --save fs tls net 安装 tls 和 net 似乎可以修复它们（因为它们没有t 之后出现）但 fs 问题仍然存在。我已经检查了多个关于 Webpack 和 request 的问题，但是修改我的 webpack 配置并没有多大帮助。

如何获得在 Gatsby 网站上工作的请求？谢谢你，美好的一天

我正在使用gatsby一个小型应用程序。到目前为止它工作得很好，但是在我安装了一些额外的模块后，npm我得到了两个错误Module not found: Error: Cannot resolve module 'fs' in...

由于gatsby运行在webpack并且没有webpack.config.js您可以更改设置的 -file，Gatsby 建议添加自定义 webpack 配置文件。

从进一步的研究看来，将其添加到 webpack 配置文件中

将解决问题。因此，我尝试将 thsi 添加到我的gatsby-node.js文件中：

但它什么也没解决，我仍然遇到同样的错误。有没有人遇到同样的问题，或者有人可能有解决方案？

提前致谢

我似乎找不到如何包含babel-loader在我的 gatsby 项目中。我需要使用transform-imports插件babel来简化开发模式下的导入，同时不牺牲生产构建中的大小。

在我的其他项目中，我执行以下操作：

我用 gatsby.js 创建了一个网站。我使用bounce.js 为一些图像制作动画，它是一个为DOM 制作动画的javascript 库。

在我的本地计算机上一切看起来都很好，但是当我将它部署到实时服务器时，我遇到了以下问题：图像应该在页面加载时淡入。当我加载网站时，您可以在它们应该结束的位置看到图像一秒钟，然后像我想要的那样消失并淡入。

图像出现在那里一秒钟的原因可能是什么？我该如何避免或规避它？

编辑：

这是一些代码：

这是我正在使用的scss：

我开始使用 Gatsby 和 GraphQL 来返回一个查询，该查询列出了属于特定类别的所有画廊。在此示例中，该类别称为“生活方式”。这一切都成功了，我得到了一个包含该类别中所有画廊的数组。我还需要根据名为“日期”的子字段对该数组进行排序。这可以通过 GraphQL 查询本身来实现吗？我尝试添加(sort: { fields: [date], order: DESC })到画廊字段，但没有奏效。

关于如何实现这一点的任何想法，或者这是否与 GraphQL 一样接近可以让我得到我需要的东西？

提前感谢您的帮助。仍在尝试围绕 GraphQL。

瑞安

我当前查询的示例

我使用了本教程：https ://github.com/gatsbyjs/gatsby/blob/master/docs/docs/environment-variables.md

我遵循的步骤：

1）安装dotenv@4.0.0

2）在根文件夹中创建两个文件：“.env.development”和“.env.production”

3）“按照他们的设置说明”（dotenv npm docs上的示例）

在gatsby-config.js：

不幸的是，当我运行时gatsby develop，NODE_ENV尚未设置：

当我手动设置它时它可以工作：

我需要 gatsby-config 中的环境变量，因为我将敏感数据放在此文件中：

如何让它发挥作用？

PS：附加问题 - 这让我想到，我知道我不应该将密码和令牌放在 github 上，但是当 netlify 从 github 构建时，还有其他安全的方法吗？

GraphQL，Gatsby 插件敏锐和反应：我正在尝试在我的查询中包含对 device.width 的 javascript 计算，但我似乎无法让它工作。目标是根据客户端的设备屏幕宽度进行查询，以便站点可以提供响应式图像。我试图让它像这样工作，deviceWidth 返回一个 Int，并将它作为 responsiveSizes 的参数传递给查询：

我正在使用 Gatsby-plugin-sharp 根据客户端的设备宽度自动使用最佳图像尺寸，但我似乎无法做到这一点。在 gatsby-plugin-sharp 的描述中，它说“ResponsiveSizes 为图像创建尺寸（宽度）。如果渲染的降价文件的容器的最大宽度为 800 像素，则尺寸将为：200、400、800 , 1200, 1600, 2400 – 足以为每种设备尺寸/屏幕分辨率提供接近最佳的图像尺寸。”

第一个问题：如何设置渲染的markdown文件的最大容器宽度？这引出了下一个问题：如何动态设置此宽度？假设客户端的窗口大小为 400px，我希望加载 400 的图像宽度。我该如何做到这一点？

当前 Graph QL 查询：

我正在使用 Gatsby JS，并且正在尝试制作一个使用 Markdown 文件生成博客文章的博客。我的博文模板中有不同的部分，我想将它们放入我的博文模板中的不同部分。但我不确定如何在我的 Markdown 文件中单独访问它们。

我知道如何获取整个文本以及如何获取我的frontmatter 的单独部分，但我不知道如何从我的文本中获取例如“成分”信息。

现在我正在通过将博客文章的不同部分直接包含在 frontmatter 中来解决这个问题，所以我可以使用 graphQL 访问这些部分，但我知道这不是 frontmatter 应该用于的。

有没有办法将我的 Markdown 文本的一部分拆分为多个部分，以便我可以在 GraphQL 查询中使用这些单独的部分？

这就是我所拥有的：

我想做这样的事情：

然后以某种方式能够获取这些单独的信​​息片段以在博客文章模板中使用。

我想在 Gatsby 博客中设置分页。在我的pages/index.js页面中，我存储了帖子、“分块”帖子（例如每页 4 个帖子的块）和当前页码：

目前，如果我localhost:8000指向这个组件，加载前 4 个帖子并显示它们。我希望能够去localhost:8000/page2并让这条路线指向同一个组件。目前它带我到404页面。如何修改路由以使所有pageX路由都转到同一个index.js组件？