gatsby

Include sass in gatsby globally

由 房东的猫 提交于 2021-02-18 10:56:12
问题 I have the following project structure: gatsby-config.js /src /components layout.jsx /button button.jsx button.scss /pages /styles styles.scss _mixins.scss _variables.scss and gatsby-config.js and styles.scss are configured respectively in the following way: ... plugins: [ ..., `gatsby-plugin-sass` ] ... @import 'variables', 'mixins'; in order to access the mixins and variables, the styles.scss is being currently imported in all the components' scss files, e.g.: //button.scss @import './..

How to add Adsense to a website built with GatsbyJS?

由 梦想的初衷 提交于 2021-02-17 08:47:19
问题 I'd like to know where I should add the <script></script> provided by Google Adsense. They say to add it into the <head></head> , but in Gatsby you have Helmet as <head> . I tried also to add the script inside an html.js file where it's located a <head> tag with {``} to escape the <script> tag, but it outputs at the top of the website the script content. TL;DR: What is the optimal way to add Adsense to a website built with GatsbyJS? I've tried to use the react adsense package but I do not

GatsbyJS - Blog posts not loading on direct link

由 ╄→尐↘猪︶ㄣ 提交于 2021-02-17 07:05:47
问题 I've been playing with Gatsby for a while now and absolutely love it. I did come across a little issue that I have no clue how to fix. I'm rendering blogs posts from my markdown files. Functionality of the site works fine when you start the site by visiting the homepage / root. https://www.ronaldlangeveld.com/ However, I'm having issues with direct links to my blog posts. I can access the blog posts by clicking on links from the homepage. However, when trying to access a specific page via

conditionally render siteUrl property in Gatsby-config based on environment

由 我与影子孤独终老i 提交于 2021-02-17 04:30:36
问题 I would like to set up a simple expression in my gatsby-config.js that determines whether I am working locally or in production so that I can set the siteUrl property appropriately. My gatsby-config (with psuedo code) : module.exports = { siteMetadata: { title: "My title", description: "My description...", siteUrl: (process.env=DEVELOPMENT) ? "/" : "https://example.com /* something here */ }, { ... } Is this possible with simple JS, string literals, etc.. ? 回答1: Yes you can, by setting up

conditionally render siteUrl property in Gatsby-config based on environment

由 孤街醉人 提交于 2021-02-17 04:30:13
问题 I would like to set up a simple expression in my gatsby-config.js that determines whether I am working locally or in production so that I can set the siteUrl property appropriately. My gatsby-config (with psuedo code) : module.exports = { siteMetadata: { title: "My title", description: "My description...", siteUrl: (process.env=DEVELOPMENT) ? "/" : "https://example.com /* something here */ }, { ... } Is this possible with simple JS, string literals, etc.. ? 回答1: Yes you can, by setting up

2020 年你应该知道的 React 库

由 和自甴很熟 提交于 2021-02-16 07:29:44
声明：本文为译文，原文链接：https://www.robinwieruch.de/react-libraries React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者，你可能已经习惯了框架包含了所需要的所有功能， 然而对于 React 来说，它的核心并不是完善所有的可选库。这是优势还是劣势取决于你自己。当我从 Angular 切换到 React，我绝对经历了它作为 React 的优势。 只有通过 React，您才能使用函数组件和 props 构建组件驱动的用户界面。它带有一些内置的解决方案，例如，用于本地状态和副作用的 React Hooks。 下面的文章将向您提供一些自己总结的方法，以便从补充库中进行选择，从而构建一个全面的 React 应用程序。 如何开始 React 如果你是一个完全不熟悉 React 的初学者想创建一个 React 项目，加入 React 的世界。有许多工具包项目可以选择，每个项目都试图满足不同的需求。React 社区的现状是通过 Facebook 的 create-react-app(CRA)。它提供了一个零配置的设置，并给你一个开箱即用并且简单的启动和运行的 React 应用程序

Fetching remote images and converting them to gatsby images

由 ≡放荡痞女 提交于 2021-02-11 14:14:06
问题 I'm trying to fetch some images from WP because Gatsby doesn't work with woocommerece yet. My plugin below is able to convert the images and add them to .cache when building, but it doesn't add a field of localFile___NODE within the Gatsby graphQl. It doesn't seem to be adding any nodes at all for me to query with ImageSharp plugin. Graphql shows them being processed under ALLFiles but not within the wcProduct node I've created in Graphql...what is going on that this plugin is not creating

What is the best practice for creating pages programmatically in Gatsby?

由 不想你离开。 提交于 2021-02-11 14:13:25
问题 I'm starting a greenfield Gatsby project and my question is regarding creating pages programmatically. In general is it better to: query for just IDs (via the graphql(/* ... */) createPages API) and then use the ID to re-query related data per page query for the whole object and send it to the page via pageContext ? This is for an e-commerce + blog site with 500+ posts and products that need to be created programmatically. What method is better considering things like DX (e.g. startup times,

Gatsby XMLHttpRequest

由 自闭症网瘾萝莉.ら 提交于 2021-02-11 13:38:24
问题 In short: I want to use XMLHttpRequest in Gatsby, which works in development mode, but fails in production ( gatsby build ) mode, which I can't get fixed. Some more information: I want to access an API (to be precise the GitHub API). Therefore I make an HTTP request like that: const repoRequest = new XMLHttpRequest(); const repoUrl = "https://api.github.com/user/repos?visibility=all?type=all"; repoRequest.open("GET", repoUrl); repoRequest.setRequestHeader("Authorization", "token <here would

Styling custom component in GatsbyJS using styled-components

由 偶尔善良 提交于 2021-02-11 07:21:05
问题 I recently started using Gatsby for building my websites, previously I relied just on plain html and css, so I may be missing something really basic here... I am trying to style a custom header component that looks like this import React from "react" import MWidth from "./m-width" import logo from "../resources/images/logo.png" function Header() { return ( <> <MWidth> <div> <img src={`${logo}`}></img> </div> </MWidth> </> ) } export default Header after importing it inside the layout
订阅 gatsby