问题标签 [gatsby]
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.
javascript - React:子组件 div 也适用于兄弟。为什么?
这是我的一个组件的渲染方法:
它只是一个带有全屏下拉菜单的 div 和一些子项。时showDropdown===true
,显示下拉菜单。现在在使用该组件的其中一个页面中,直接子级的格式存在一些问题,因此我包含了一个padding: 50px
. 这解决了这个问题。但是现在我的下拉组件也获得了 50px 的填充,这将我的下拉菜单项向下移动并破坏了下拉的格式 - 但我不知道为什么?这是正常行为吗?
父级的 CSS:
孩子的代码
孩子的CSS:
下拉代码:
下拉菜单的 CSS:
macos - 由于缺少 regenerator-runtime/runtime 模块,gatsby 失败
我正在尝试盖茨比
这是我的安装方式gatsby-cli
:
然后当我尝试打印版本以查看是否安装成功时,我得到了这个:
我的 npm 和 node 版本
操作系统平台是 macOS High Sierra
在安装过程中我错过了什么?
graphql - 对另一个结果执行 GraphQL 查询
我正在尝试获取 Gatsby 中的文件夹名称列表,以及其中的文件名称。
以下是我可以使用的 2 个查询:
和
另外,查询正在运行,我可以获得良好的结果。
在我的代码中,我想为第一个查询返回的每个目录执行第二个查询。
关于如何做的任何想法?
javascript - 加载 Fonts.com Web-Font 在 Chrome 中不起作用(但仅在部署时?)
我目前正在通过 GitHub Pages 托管一个 React/Gatsby 项目,我一直在弄乱 fonts.com 和他们的网络字体系统来获取 Rockwell 字体。我按照将脚本标签输入到我的代码部分的说明进行操作:
在引用我的域时,我遵循了他们的所有建议,并且遇到了这个有趣的错误。
字体在 Firefox 中正常加载。一个。更新:这不是真的,它也被缓存在那里。
当我运行“gatsby develop”并让我的项目在 localhost:8000 中运行时,字体也会加载
一个。(我知道它可以在 localhost 中工作,因为我使用了 Chrome 的漂亮的“空缓存和硬重新加载”功能。)
然而,当我在 Chrome 中拉出页面时,出现以下错误
/li>
所以要么出现,要么我得到一个 403 错误。(我已经按照他们发布的解决 403 错误的建议。)
我用谷歌搜索并弄乱了无济于事。我发现了一个类似的问题,建议在 css 中使用 @import,但这不起作用,因为它是一个 javascript 文件
据我所知,它与加载字体的 woff2 部分特别有关,但我不能删除该部分,因为它是一种网络字体。不知何故,这导致了一个 net::ERR_ABORTED。这可能与盖茨比的出版方式有关吗?或者 React 如何处理在 ?
感谢您提供的任何建议!
更新: Firefox 已将其缓存。这让我相信 Webpack 正在弄乱脚本标签/下载的东西。
graphql - GatsbyJs - 如何处理来自 Contentful 插件的空 graphql 节点
我正在 Gatsbyjs 中构建一个站点,该站点通过 gatsby-source-contentful 插件获取信息,但我在 graphql 方面苦苦挣扎。
例如,如果我在 Contentful 中有一个 Content 模型,其中包含一个覆盖默认描述的字段 - 那么如果没有任何内容使用该内容,但如果我尝试将其包含在我的查询中,graphql 会引发错误。
反正有没有短路graphql查询?
例子
如果不存在带有描述的页面模型,这将中断,但是一旦一个页面获得描述,它就会起作用。
typescript - Gatsby + tsc 不会转译休息运算符
我试图让 Gatsby 使用 TypeScript,按照此处的说明进行操作,但由于某种原因,tsc
它没有转换其余 ( ...
) 运算符,而是引发以下错误:
如果我从命令行运行tsc
,则文件被正确编译,替换...
为对__rest
.
这是我的tsconfig.json
:
如您所见,它非常小。我尝试使用一堆lib
s (来自Compiler Options)和其他选项,但似乎没有任何效果。
reactjs - 如何将谷歌字体添加到 gatsby 网站
Gatsby 入门 - 当我使用 google 字体向 public/index.html 添加链接标签时,它在开发模式下工作。当我构建站点时, index.html 会被重置。所以我想还有另一种添加字体的正确方法?
gatsby - Gatsby JS 节点并不总是正确创建以供 createPages 使用
在我的 gatsby 项目中,我gatsby-node.js
导出了两个 Bound Action Creator:onCreateNode 和 createPages。通常这些运行正常 - 当 onCreateNode 运行时,我使用一些现有节点来创建我想要的节点,然后 createPages 使用其中一些节点来创建页面。
但是,有时gatsby develop
在终端运行时,我得到:
GraphQLError: Cannot query field "allBusiness" on type "RootQueryType". Did you mean "allBusinessesJson"?
和
TypeError: Cannot read property 'published_issues' of undefined
allBusiness
是在 createNode 中创建的节点,并且published_issues
是使用 allMarkdownRemark 进行查询的 graphql 别名(请参阅下面的完整代码)。
然而,经常gatsby-node.js
稍微改变代码(例如添加控制台日志)将解决问题并且项目将正确构建。尽管我已经接近生产并且显然在 Netlify 中的计划构建(例如)并不总是有效,但这工作正常。
我无法确定 createPages Bound Action Creator 是异步的,而 onCreateNode 不是这样的问题。
gatsby-node.js
代码:
并构建日志:
javascript - 在 Gatsby.js 中使用 GraphQL 从 WP 获取 ACF 灵活内容
我将 Gatsby.js 与 Wordpress 插件结合使用来查询 Wordpress REST-API。我无法弄清楚如何使用一个查询的结果来创建另一个有效循环返回数组的动态查询。
由于我在 wordpress 中使用 ACF 灵活内容,因此在进行第一次查询之前我无法知道数据的结构。第一个查询返回已添加到 CMS 中的灵活布局的 __typenames 数组,然后我执行第二个查询,该查询返回上述每个布局的 ID。
这是我遇到砖墙的地方 - 我如何循环遍历 IDs 数组并使用现在已知的 __typename 进行查询以获取 ACF 灵活内容中列出的所有字段?
如果我没有非常清楚地解释这一点,我深表歉意 - 我很感激任何人都可以提供的任何指示。
reactjs - 如果 redux 状态发生变化,组件 props 不会在状态后更新
因此,我阅读了许多似乎与我涵盖相同主题的帖子,但是在尝试了他们所有的解决方案之后,我根本无法使其工作,所以就这样吧。
我有一个简单的搜索过滤器,我用它来按名称过滤一些食谱。我有一个 Redux Store 来处理搜索过滤器的状态(值)。在输入字段中输入值时,我的操作对 reducer 很好,它会更新状态(我可以通过 console.logs 和 Redux DevTools 看到这一点)。但不知何故,这不会更新我的道具,这些道具是用 connect 和 mapStateToProps 映射的
我遇到的所有以前的答案都指向变异状态,但是我尝试过我的减速器的多次迭代,但话又说回来,我可能只是忽略了一些东西。
我的过滤器动作调度:
我的减速机:
我的食谱列表容器:
我的 RecipeList 组件:
我知道我的过滤器还没有做那么多,但我已经让它变得简单了,所以我可以看看它是否得到了更新。如果我更改减速器的初始值,它会正确过滤。所以不应该这样。
另外,我在 GatsbyJS 中使用它,但根据他们的文档和示例,这应该不是问题。但我可能是错的?
提前非常感谢!如果我错过了一些让您找到解决方案的东西,请告诉我,我是在 SO 上发帖的新手。