标签: gatsby

我正在创建一个个人网站/组合,我偶然发现了强大的gatsby.js软件包.

我还需要将一个复杂的数据集可视化用于研究目的,我想使用d3.js,并包括我在Gatsby供电网站中创建的仪表板.

可以在反应组件中使用d3 - > https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

从理论上讲,Gatsby应该能够支持d3集成,但到目前为止我的尝试都失败了.

这是我尝试过的:

完成Gatsby教程https://www.gatsbyjs.org/tutorial/

我正在使用gatsbyjs文档中已完成的第4个教程网站,并添加了以下内容

npm install --save d3

添加了utils/d3.js

文件内容

import d3 from "d3"
module.exports = d3

我还在gatsby-config.js插件中添加了d3.

我运行gatsby develop,并收到以下错误,挂起.

success delete html files from previous builds — 0.005 s
success open and validate gatsby-config.js — 0.003 s
(node:8725) UnhandledPromiseRejectionWarning: Unhandled promise rejection 
(rejection id: 2): Error: Unable to find plugin "d3"
(node:8725) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.
 In the future, promise rejections that are not handled will terminate …

我是node.js的新手并做出反应,但我喜欢gatsby.js.我已经按照我能找到的所有教程进行了操作,这是一个非常棒的工具.

然而,我想要使用它的一个主要原因是我有一个包含1000个不同记录的文件json,我想为每个记录生成一个新页面.

我相信我已经得出结论,我需要了解更多有关gatsby-node.js文件的信息,并且我知道以下资源,但是有关于此主题的任何教程或其他示例可能更容易理解:

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs

我目前正在学习Gatsby.js和GraphQL作为补充技术，并被查询所困扰。我想查询一个文件夹中的所有图像，将它们映射成槽并将它们显示在网格中的react组件中。我正在使用gatsby-source-filesystem，但不知道如何专门处理该文件夹并从中获取所有图像。

我为源文件系统设置的插件如下所示。

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/src/posts`,
    name: 'posts',
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/assets/images`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `photos`,
    path: `${__dirname}/src/assets/photos`,
  },
},

我的图片在src / assets / photos中

谢谢你的帮助！

我正在使用 gatsby 和 Netlify CMS 构建一个站点。我使用了 Gatsby Site Starter。

我不断收到“文件”类型的“GraphQL 错误字段”图像，必须选择子字段。您的意思是“图像 { ... }”吗？尝试部署到 Netlify 时出错。一切都在本地主机上完美运行，但图像似乎有些失败。我查看了 Netlify CMS 页面上提供的示例，发现有人具有完全相同的设置，一个列表小部件（充当画廊），里面有一个图像和描述，here。

配置文件

backend:
  name: git-gateway
  repo: grantballmer/gatsby-starter-netlify-cms
  branch: master

media_folder: static/img
public_folder: /img

collections:

  - name: "gallery"
    label: "Gallery"
    folder: "src/pages/services"
    create: true
    fields: 
      - { label: "Template Key", name: "templateKey", widget: "hidden", default: "gallery" }
      - {label: "Title", name: "title", widget: "string"}
      - label: "Grid"
        name: "grid"
        widget: "list"
        fields: 
          - {label: "Image", name: "image", widget: "image"}
          - {label: …

我有一个在 Gatsby@2.2.10 中完成的网站。当我运行gatsby build并检查生成的 html 时，对于每个页面，我看到的只是一个空的 div: <div id="___gatsby"></div。html 包含样式表、javascript 文件和运行应用程序所需的一切（顺便说一下）。

即使我curl是生产网址，也会出现相同的 div 并且完全为空。我也尝试禁用 javascript，但得到的只是一个空白页面。我的配置不包含任何花哨的内容：

module.exports = {
    siteMetadata: {
        title      : `MyApp`,
        description: ``,
        author     : ``,
    },
    plugins     : [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/static/images`,
            },
        },
        {
            resolve: `gatsby-plugin-less`,
            options: {
                javascriptEnabled: true,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sass`,
        `gatsby-plugin-sharp`,
        `gatsby-plugin-typescript`,
        `gatsby-plugin-styled-components`,
        {
            resolve: `gatsby-plugin-google-fonts`,
            options: {
                fonts: [
                    `Montserrat\:200,400,600,800`,
                ],
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name …

在 Gatsby 项目中，我有一个标题组件，它在每个页面上都是持久的。标题有一个模式来显示导航。每当路线更改时，我都需要将 isOpen 状态设置为 false，以便导航模式关闭。由于路线不仅可以通过单击模式中的链接来更改，还可以通过使用浏览器上的后退按钮来更改，因此我不希望在链接上使用事件来关闭模式。

在 Gatsby 中，我可以使用 gatsby-browser.js 中的 onRouteUpdate 来检测路由更改，这很有效。但是我需要将事件传递给我的组件，这就是我遇到困难的地方。我已经简化了下面的代码来显示设置。

gatsby-browser.js：

import React from "react"
import Layout from "./src/components/layout"

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

export const onRouteUpdate = () => {
  console.log("onRouteUpdate") // this works
}

布局.js：

import React from "react"

import Header from "./header"
import Footer from "./footer"

const Layout = ({ children }) => (
    <>
      <Header />
      <main>
        {children}
      </main>
      <Footer />
    </>
  )

export …

所以基本上我有一个 onbeforeunload 函数来照顾并警告用户是否决定重新加载或关闭选项卡。我的代码如下

  useEffect(() => {
   
    //this will prevent users from accidently refreshing / closing tab
    window.onbeforeunload = () => {
      return "Are you sure you want to do this yada yada yada yada?";
    };
  }, []);

我试图开玩笑地测试它，但 return 语句从未被执行。我的测试如下

window.location.reload();
expect(window.onbeforeunload).toHaveBeenCalled();

即使我嘲笑 onBeforeunload 它也不起作用。任何帮助表示赞赏。谢谢。

我是 React 的新手，目前我正在 Gatsby 站点上工作，在那里我有一个 Layout.js(Parent) 和 Menu.js(Child)，当 Menu 上的状态发生变化时，我希望它传递给 Layout.js .

我想要做的是当菜单处于活动状态时，布局中的文本会发生变化。

菜单.js

import React, {useState, createContext} from "react"
const MenuContext = createContext(1)

const Menu = (props) => {
  const [active, setActive] = useState(1)
  const clickHandler = () => {
    setActive(!active);
  }
  return(
    <div className={(active ? `open` : `close`)} onClick={clickHandler}></div>
  )
}

export { Menu, MenuContext }

布局.js

import React, {useContext} from "react"
import { Menu, MenuContext } from "../components/menu"

const Layout = ({ children }) => {

  const …

我正在使用 React 的上下文 api 来存储一组项目。有一个组件可以通过 useContext() 访问这个数组并显示数组的长度。还有另一个组件可以访问该函数以通过 useContext 更新此数组。将项目添加到数组时，组件不会重新渲染以反映数组的新长度。当我导航到应用程序中的另一个页面时，组件会重新呈现并反映数组的当前长度。每当上下文中的数组发生变化时，我都需要组件重新渲染。

我曾尝试使用 Context.Consumer 而不是 useContext 但是当数组更改时它仍然不会重新呈现。

//orderContext.js//

import React, { createContext, useState } from "react"

const OrderContext = createContext({
  addToOrder: () => {},
  products: [],
})

const OrderProvider = ({ children }) => {
  const [products, setProducts] = useState([])

  const addToOrder = (idToAdd, quantityToAdd = 1) => {
    let newProducts = products
    newProducts[newProducts.length] = {
      id: idToAdd,
      quantity: quantityToAdd,
    }
    setProducts(newProducts)
  }

  return (
    <OrderContext.Provider
      value={{
        addToOrder,
        products,
      }}
    >
      {children}
    </OrderContext.Provider> …

我正在关注这个关于 Medium 的教程，让 Gatsby 与 Prismic 一起工作。

在 GraphiQL 资源管理器中，下面的两个查询都产生相同的结果，并且想知道我什么时候应该使用一个而不是另一个（即edge.node.data与nodes.data）：

查询#1：

query Articles {
  articles: allPrismicArticle {
    edges {
      node {
        data {
          title {
            text
          }
          image {
            url
          }
          paragraph {
            html
          }
        }
      }
    }
  }
}

查询#2：

query Articles {
  articles: allPrismicArticle {
    nodes {
      data {
        title {
          text
        }
        image {
          url
        }
        paragraph {
          html
        }
      }
    }
  }
}