Gatsby是React的现代网站生成器。它专注于性能和灵活的数据源。
如何在 Gatsby-plugin-image 中将图像路径作为 Gatsby 中的 prop 传递
我正在尝试将图像的路径作为道具传递给组件 注意:组件和索引页都可以通过相同的路径访问图像。当我将路径作为 p 传递时它不起作用...
Netlify“build.command”对于 gatsby 网站失败
我最近在我的 Gatsby 网站上更新了一些插件。它在本地工作正常,但在 Netlify 上部署失败。 我收到的错误是: “build.command”失败 - 命令被终止
在使用 React Three Fiber 的 Gatsby 应用程序中使用 Context 实例化网格时出错
在我的 gatsby 应用程序中,我尝试利用实例多次显示网格。为此,我使用 https://gltf.pmnd.rs/ 提供的以下代码: 导入 React, { useRef, useMemo, useContext,
我正在尝试使用 Gatsby 从解析到的数据自动生成页面,并在 url 生成中不断收到错误。如果我手动将它们输入浏览器,则数据很好,因为页面可以工作...
当我安装react-pdf时,出现以下错误: ModuleNotFoundError:找不到模块:错误:无法解析“/home/pegasus/Documents/Final_Website/blog/node_modules/pdfjs-dist/bui...”中的“canvas”...
我的组件有2个状态。第一个状态在用户交互时更新,然后使用 useEffect() 挂钩触发第二个状态的更新。这导致...
使用 gatsby js 时出现与 CSS commons 相关的奇怪错误
正如标题所示,我得到了一个非常奇怪的错误代码,它几乎没有描述错误本身(如下所示) 我收到的错误消息 我无法真正找出罪魁祸首,但我怀疑它有一些......
我正在尝试将 Trustpilot 小部件添加到我的 Gatsby.js 网站。需要从 Trustpilot CDN 加载外部脚本。 <p>我正在尝试将 Trustpilot 小部件添加到我的 Gatsby.js 网站。需要从 Trustpilot CDN 加载外部脚本。</p> <pre><code><script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> </code></pre> <p>我尝试了多种方法将此脚本添加到我的组件中。我尝试的第一件事是 React Helmet。我使用以下代码添加:</p> <pre><code><Helmet> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script> </code></pre> <p>当我最初加载页面时,脚本似乎会加载。一旦我导航到不同的页面,样式就会消失。当我重新加载时,它又回来了。</p> <p>我尝试在 componentDidMount() 中添加脚本</p> <pre><code>componentDidMount() { var addScript = document.createElement('script'); addScript.setAttribute('src', '//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js'); document.body.appendChild(addScript); } </code></pre> </question> <answer tick="false" vote="0"> <p>如果您希望脚本(或任何其他组件)在您的站点中持久存在,则需要使用 <pre><code>wrapPageElement</code></pre> 或 <pre><code>wrapRootElement</code></pre> API。建议将这两个 API 放置在 <pre><code>gatsby-browser.js</code></pre> 以及 <pre><code>gatsby-ssr.js</code></pre></p> 中 <p><em>免责声明:每次加载 DOM 树时都会触发 <pre><code>componentDidMount()</code></pre>,它不适用于您的用例。</em></p> <p>这里的问题是您添加的是非 React 资产,而不是组件。你可以尝试:</p> <pre><code>export const wrapPageElement = ({ element, props }) => { return <SomeWrapper {...props}>{element}</SomeWrapper>; }; </code></pre> <p>然后,创建一个名为 <pre><code>SomeWrapper</code></pre> 的组件并放置您的 <pre><code><Helmet></code></pre>:</p> <pre><code>const SomeWrapper = (props) =>{ return <div> <Helmet> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async /> </Helmet> {props.children} </div> } </code></pre> </answer> <answer tick="false" vote="0"> <p>我在基于反应的网站上遇到了这个问题。 Trustpilot 对于如何处理基于类和钩子的 React 项目有具体说明。一旦我实现了这一点,它就为我解决了问题。</p> <p>以下是说明链接: <a href="https://support.trustpilot.com/hc/en-us/articles/115011421468--Add-a-TrustBox-widget-to-a-single-page-application#add-a-trustbox-widget-with-a-react-application-1" rel="nofollow noreferrer">https://support.trustpilot.com/hc/en-us/articles/115011421468--Add-a-TrustBox-widget-to-a-single-page-application#add-a-trustbox-widget-with- a-react-application-1</a></p> <p>我会添加他们的 React 说明,但我不知道这样做是否是文案,所以只需检查 pg。</p> </answer> </body></html>
./src/templates/project-details.js 中的 ProjectDetails 函数出错:7
==无聊,但可能必要的环境条件== NetNinja 在 YouTube 上提供的 Gatsby 教程在网络上非常受欢迎,我到处都能看到对代码的逐字引用。为了...
Contentful Rich Text 从 Gatsby 和 GraphQL 接收的节点对象中没有引用字段
我正在使用 Gatsby 5 和 contentful/rich-text-react-renderer。 我有一个 ContentfulPost 类型,它有一些指向富文本中相关类型的链接。 我正在关注文档(来自 Gatsby 和 Contentfu...
(Gatsby) 在 MDX 组件中显示 frontmatter 数据
我正在尝试创建一个简单的署名组件,以在我的 MDX 帖子中使用,该组件使用 href="mailto:[email protected]" 和一个带有帖子发布日期的时间标签来显示网站作者。 .
在 git 存储库中为团队成员和自由职业者隐藏/限制部分源代码
我查看了许多相关/类似的问题,但找不到任何足够的答案来回答我的问题。 我有一个 Gatsby/React 项目,我有一个私有 git 存储库,托管在
我正在用 Gatsby 构建一个博客,我已经取得了一些进展,但是当我尝试在我的博客模板中渲染 mdx 时,它不会渲染任何内容。 我使用 createPages api,一切正常,例如...
嗨,我目前正在尝试在 sanity 文件夹中设置一个 sanity 环境变量。 根据理智文档,它说使用 process.env.SANITY_STUDIO_VARIABLE_NAME 但看起来它...
您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理此文件。请参阅 https://webpack.js.org/
当我尝试构建 gatsby 构建时出现此错误 编译 Gatsby 函数失败 - 6.195 秒 无法验证错误[错误[ValidationError]:“错误”必须是对象类型] { _原创...
渲染MDX时如何减少Gatsby中的___chunkMapping?
现在我有大约 50 页,每页都有 4 种语言的翻译。 我以编程方式创建页面。根据文档,我必须以这种形式为每个页面指定一个组件的路径...
GatsbyJS 和 graphql - 无法读取未定义的属性(读取“mdx”)
我有以下文件夹结构: 页面 索引.js about.js 档案 索引.js docu-{mdx.frontmatter__key}-{mdx.frontmatter__slug}.js 成分 单个文档部分 概述 概述.js 工业...
通过本教程创建帖子模板(我在第 4 部分): https://www.joaopedro.cc/blog-com-gatsby-e-react-parte-4 但是在执行“PostPage”查询时发生错误: 多...
Gatsby 5 要求您将 css 模块导入为导出成员或 * 作为 import * as styles from ‘./index.module.css’ 这一切在前端都运行良好并按预期显示,但是当 ...
我希望将 .md 文件中的内容包含到 gatsby 的组件中,但不确定查询应该是什么(发现这非常令人困惑)。 盖茨比-config.js [ { 解析:`gatsby-source-