问题标签 [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.
reactjs - 静态 React 应用程序/网页多语言
我花了一周的时间来解决这个问题，目前我正在使用 gatsby 生成我的静态 Web 应用程序。我已经尝试过
这是一种作品，但仍然不是完美的解决方案。我正在考虑 impelent React-Intl，但我不确定。静态应用程序/网页可以吗？
还有其他建议吗？
facebook - Gatsby js/React js 中的 Facebook 像素
我最近使用 gatsbyjs 开发了网站，我想在网站上使用 facebook 转换像素（以及 Google 分析）。我需要一些想法或帮助来使它们发挥作用，以便我可以投放转化类型的广告。如果你像一个 5 岁的孩子那样跟我说话，那会很有帮助。
呈现的代码<head>是：
我的 facebook 像素看起来像这样：
javascript - 如何在 Gatsby.js 中为 body 标签添加动态类？
显然，这不是一件容易的事，因为默认情况下模板文件中唯一更改的html.js是头部元标记和内容。
元标记由 Helmet 组件 ( {head.title.toComponent()}and {head.meta.toComponent()}) 处理，模板内的 HTML 更改由 React 管理。( <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)
然而，body 标签超出了 React 的范围，这就是为什么当我从一个页面导航到另一个页面时，我无法弄清楚如何即时更改它。这正是我所需要的，因为我想为每个页面应用不同的正文背景。
我知道我可以通过使用exports.onRouteUpdatein来解决这个问题gatsby-browser.js，但是即使浏览器中禁用了 JS，我也希望该类存在。意味着即使我在没有bundle.js文件的情况下导出它，我也希望它在那里，只生成静态站点 HTML。
webpack - 如何在 Gatsby 中将 Stylus 转换为 CSS 文件？
我不想让我的 CSS 变成一个字符串以嵌入到网站的 HTML 中，而是想要生成一个常规的、老式的 CSS 文件，就像bundle.js我想要的bundle.css那样。
我对 Webpack 不熟悉，但我认为如果我将一个.styl文件放在下面pages/并设置一个 Stylus 加载器，gatsby-node.js这会神奇地发生，但它似乎没有发生。
gatsby - Gatsby console.log 语句不被打印
我试图通过在console.log执行构建的代码的关键部分上放置一些语句来解决盖茨比的问题。但是，这些语句不会打印到控制台。
我也尝试过使用debug()Gatsby 本身使用的功能来打印"Generating Static HTML"控制台之类的东西，但它也不起作用。
我正在使用本地安装的 Gatsby 并使用./node_modules/.bin/gatsby build.
观察：gatsby/bin/gatsby.js确实会打印日志语句，但不会打印日志语句gatsby/lib/bin/cli.js或由它导入的任何其他文件。
reactjs - 在 Gatsbyjs 中分配模板，而不考虑“相同文件夹”范式
是否可以通过其他方式将模板分配给 Gatsbyjs 中的页面 (_template.js)，而不是让它们与被它们转换的页面位于同一文件夹中？我可以想象想要跨文件夹使用通用模板，但不一定总是相同的模板。我宁愿只有一个“模板”文件夹并以某种方式分配它们。
javascript - 将 gatsby 项目从 css 转换为 scss，遇到丢失网格预处理的问题
我正在采用一个 gatsby 入门项目，该项目使用Lost grid并从 css 转换为 scss 以获得一些收益。这是入门项目： https ://github.com/wpioneer/gatsby-starter-lumen
本质上，我正在将项目转换为 scss，因为我更喜欢它的结构并且希望摆脱所有 css 文件。现在，我只是：
- 已安装
sass-loader,scss和node-sass - 将所有 css 文件重命名为 scss 文件
并修改
/li>gatsby-node.js为以下内容：
不幸的是，虽然这确实允许我使用 scss 构建和运行项目，但我注意到我可爱的 Lost 网格已经消失了。经过调查，我注意到它.sidebar仍在lost-column: 1/3浏览器中读取（例如），所以我可以看到对丢失网格至关重要的预处理没有发生。
老实说，这可能是 Lost 网格之外的问题，而是我如何构建的问题gatsby-node.js，但我希望能深入了解我所缺少的内容。解决此问题后，我不介意为 gatsby 上传scss/lost 入门项目。
javascript - 如何将材质 ui 添加到 gatsby 站点生成器
我尝试设置 Gatsby 工具包，并与这个站点生成器和材料 ui 框架进行深入反应。我搞砸了什么？我有错误
我用 npm 安装了材料 ui
将组件添加到我的帖子 index.js 和 MyAwesomeReactComponent.js
MyAwesomeReactComponent.js
css - 滚动不起作用：react-grid-layout：0-showcase 示例
我正在尝试复制react-grid-layout的0-showcase示例，一切正常，除了包含网格及其组件的主要 HTML 元素不可滚动。我尝试将溢出-y 滚动到正文和后续元素，但无济于事。我正在使用 Gastsby 静态站点生成器来加快开发速度。因此，在我的页面中，直接在 Gastby 文件夹结构中，我创建了一个grid.js文件，其中包含以下反应代码。几乎所有内容都与此处示例代码中的定义相同。这可能是我没有得到的一个小的 CSS 修复，但我真的不明白我在这里缺少什么。提前致谢！
css - GatsbyJS/ReactJS & AOS（滚动动画）导致构建问题
根据 GatsbyJS 的创建者，这似乎是一个常见问题。这是 GitHub repo 上已解决问题的引用：
您有引用窗口对象的代码（您自己的或正在使用的模块）。服务器渲染时失败，因为您不在浏览器中，因此窗口不存在。这是一个相当普遍的问题。解决方案是在 componentDidMount 中运行对窗口的代码引用，您可以确保您现在在浏览器中。
我只看到少数几个在 ReactJS 中设置 AOS 或在 GatsbyJS 中设置类似东西的示例，但没有什么是我真正需要的。我提出的配置不适用于生产版本，即“gatsby build”......这是我的代码：
我尝试了一些变体，我在 props 构造函数中将变量设置为 AOS，然后使用 componentDidMount 将变量设置为 AOS.init()，还尝试使用 this.state 并进行设置，但都没有任何区别。那么执行所需操作的正确方法是什么？我知道我将使用 componentDidMount 但除此之外我不知道。任何帮助深表感谢...