gatsby

问题 So I'm very new to Gatsby, react, GraphQL, etc. In the past I've used pure CSS, HTML, and javascript to make my sites. Although, I was interested in Gatsby and the capabilities of it, so I decided to challenge myself and learn it. I'm putting together a portfolio site for myself and for ease of updating, I would like to be able to add new projects through creating new folders, running a build script, and dropping the built site into my FTP. This is how my folder structure for projects is set

问题 I am not sure this is about CSS. In gatsby-starter-blog links( ) have additional underline. I mean, when you look at the source code, you will see text-decoration: none; And this works! (You can try to change it underline, line-through etc), however, there are additional lines for links and I cannot get rid of them. 回答1: They have a box-shadow prop giving the underline (That way it's spaced a little wider and gives a nicer look instead of a tight underline): a { /* This first prop */ box

问题 I am following this documentation to render rich text from Contentful. So far I have installed gatsby-source-contentful , now I am querying the rich text content with a graphQL query, before adding to my template. Issue: I cannot query the references field. From my understanding there was a recent breaking change that required the raw subfield to be queried...but unfortunately I can't query any subfield within raw . I am not sure what the issue can possibly be. Query { allContentfulArticle {

问题 I created website in Gatsby (my first one) and I have trouble with the Gatsby's Link on the deployed page. I am using a gatsby-starter-react-bootstrap which includes gatsby and react-bootstrap as the name says :) I located Links in the NavDropdown.Item which is an element of the react-bootstrap. import React from "react" import {Link} from "gatsby" import {Navbar, Nav, NavDropdown, Image} from "react-bootstrap" import Logo from "../images/Logo_White_RGB_200x42px.png"; import customer_logo

问题 I have a problem with my gatsby site with graphcms where I can navigate my site just fine by clicking the various links in my site. For example, loading the landing page at / and then clicking a link to /foo loads the foo page just fine. However, if I directly navigate to the /foo page in my url bar, none of the page's data shows. None of the data that is stored in page-data.json is showing in the browser. Seems very similar to: Gatsby - page refresh corruption GatsbyJS - Blog posts not

问题 I am currently doing this: class Checked extends React.Component { render() { return ( <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24"> <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/> </svg> ); } } But I would like to be doing something like this: import imgTable from '../img/catering_table.svg' class Checked extends React.Component { render() { return imgTable; } } Why does this not work? Am I returning the variable here and not the actual contents? I would have

问题 I have a link in a nav-bar that takes me to an anchor on the index page. Currently I don't know how to put an id onto the component, so I have to wrap the component in a div and give it an id for it to work. Ideally, I would like to simply put the anchor on the component itself. This works fine for me, but I'm wondering if this is the way to do an anchor with React/Gatsby or is there a better way? //Navbar, which is part of Layout export default class NavBar extends Component { render() {

问题 I need redirect page after it load and get param from URL. I can do by button click. But I want redirect page automatic (without user input). I am use window.addEventListener('load', () => handleClick()) and it work well on Chrome. But on Safari (desktop and mobile) it not always fire (only sometimes it fire - not always). I can see this by add alert('Beginning'); in handler - on Chrome this fire automatic after page load, but not on Safari. How I can solve this? Thanks! const handleClick =

问题 When attempting to pass custom props from layout to children, I am receiving the following: TypeError: props.children is not a function Layout (functional component summary) import React, { useState } from 'react' import { useStaticQuery, graphql } from 'gatsby' export default (props) => { const {site} = useStaticQuery( graphql` { site { siteMetadata { title } } } ` ) const globals = {title: site.siteMetadata.title} return ( <> {props.children({...props, ...globals})} </> ) } Child (also a

问题 I have an iframe that loads a third party widget. I only want to display this iframe after my page has loaded, because I don't want to slow down my page load speed. I followed a medium article which describes how to do this, but their solution doesn't work because the onload function, finishLoading , is never called export default ({src, width, height}) => { const [loading, stillLoading] = useState(true) const finishLoading = () => { alert('finished loading') stillLoading(false) } ... return(