gatsby

问题 Summarize the problem The goal is for the styling of the header/navbar to change as the viewer scrolls down the page. The header is already sticky/fixed in place, but I want the background/text color to change once the user scrolls down. All other components are adhering to the styling that I want so far, but trying to figure out this header has really been confusing for me. Describe what you've tried I tried to use a hook that I found online here https://www.ibrahima-ndaw.com/blog/build-a

问题 I'm struggling to find out how <StaticContent> behaves. If I disable javascript in my app, everything inside a <StaticContent> will not be rendered. Is this the intended behavior? There is a way to workaround it? A partial code sample: const Sample = (props: any) => ( <StaticQuery query={graphql` query { site { siteMetadata { siteTitle siteTitleShort } } } `} render={(data) => ( // THIS CODE WILL NOT BE RENDERED IF JAVASCRIPT IS DISABLED // YOU'LL NOT BE ABLE TO FIND IT BY LOOKING INTO THE

问题 The root issue I'm running into is IE11 fails with Object doesn't support property or method 'find' . It seems I need to import babel-polyfill, but I can't find the right place to do the import. I've tried importing in the layout index.js, but when I do then gatsby build fails with Module build failed: Error: only one instance of babel-polyfill is allowed . I've tried requiring in gatsby-browser.js and gatsby-node.js, which builds, but when I do that then the error in IE still occurs as if

问题 Minimum Reproducible Example on Github (The images don't show in this MRE, but that's ok and doesn't matter because the problem I'm wondering about has nothing to do with that) Problem: Every time the slide index changes, the screen scrolls to the top of the page. It happens automatically. This happens when incrementing the slide number by 1 when decrementing the slide number from 3->1 or from 2->0 But does not happen when incrementing the slide number from slide 2 to slide 3 (slides numbered

问题 I'm getting the diagnostic on PageSpeed Insights Ensure text remains visible during webfont load Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more. URL Potential Savings …v1/aWB4m0aac….woff2(fonts.gstatic.com) 10 ms …v21/nuFvD-vYS….woff2(fonts.gstatic.com) 10 ms …v13/6xK3dSBYK….woff2(fonts.gstatic.com) 10 ms And I'm trying to correct it by changing <link rel="stylesheet" href="https://fonts.googleapis.com" /> to <link rel="stylesheet"

问题 I want to add image url in meta tag for SEO. But how can I create image link to add in meta tag? I am using gatsby. I have src/img/img1.png image and now I want to create image URLs like this https://website.com/src/img/img1.png How can I do it in gatsby-config.js file? 回答1: Most of Gatsby starters comes with a SEO component, that saves you to build one from scratch. Internally, it uses <Helmet> , a component that puts everything that is wrapped inside, in the <header> tag. So, given: import

问题 I've got a site built on Gatsby/Netlify that just recently started having an intermittent issue where some of the js assets return a 404. The issue seems to appear and go away on its own. Here's a screenshot of the devtools console: What kinds of things should I check? 回答1: Chances are you have gatsby-plugin-offline installed and it is caching old files. The Gatsby community is still looking for ways to 100% solve this issue, but there is a temporary solution that other websites have been

问题 I created a website with gatsby-starter-ghost. I noticed that by default the CSS is put into the head of every HTML file as an inline style: <style>.every-thing-is-in-here {}</style> I want to serve the CSS in its own file and not alongside every HTML file. How can I disable this behaviour and use <link> for CSS instead? 回答1: It seems this is not configurable. I found a solution on Github. Basically in your gatsby-ssr.js rewrite the style elements like this: export const onPreRenderHTML = (

问题 I created a website with gatsby-starter-ghost. I noticed that by default the CSS is put into the head of every HTML file as an inline style: <style>.every-thing-is-in-here {}</style> I want to serve the CSS in its own file and not alongside every HTML file. How can I disable this behaviour and use <link> for CSS instead? 回答1: It seems this is not configurable. I found a solution on Github. Basically in your gatsby-ssr.js rewrite the style elements like this: export const onPreRenderHTML = (

问题 I'm trying to paginate the blog tags list page in a Gatsby site, the tags are defined in the frontmatter of the MDX files: --- title: Blog Post Title date: 2020-05-20 tags: ["Markdown", "Gatsby", "JavaScript"] --- Paginating the posts is easy using limit and skip passed in the page context object: query Posts($limit: Int!, $skip: Int!) { allMdx( sort: { fields: frontmatter___date, order: DESC } limit: $limit skip: $skip ) { nodes { ... } } But this doesn't apply for paginating the tags list