gatsby | 易学教程

“document.createElement('script').onError” always executes with local fuckadblock script, but not with identical script on cdnjs.cloudflare.com

阅读更多关于 “document.createElement('script').onError” always executes with local fuckadblock script, but not with identical script on cdnjs.cloudflare.com

问题 Background I have a hook that uses fuckadblock. This is the code for the hook and it works correctly. It detects adblock when adblock is on, and does not detect adblock when adblock is not on. It calls a script from a server, but I want to store the script and run fuckadblock locally. I'm using the Gatsby framework. import { useEffect } from 'react' /** * Detects of addBlock is enabled * @param addBlockDetected What to do when addBlock is detected */ export default function(addBlockDetected)

给徒弟说一下前端开发工程师的19个救生工具

阅读更多关于给徒弟说一下前端开发工程师的19个救生工具

今天看见徒弟写个css属性这么慢，是在是看不下去了，就问了他有没有用过一些辅助工具，他说没有，额。。。我也是很无语，没办法，谁叫我是他师傅呢。还是要尽到一个师傅的责任。所以就利用休息时间给他讲了19个辅助工具，满满的干货呀。我这也是第一次给别人说这么多，这么详细，想想还不错，教给别人东西的感觉是不一样的，别说是徒弟呢。 CSS代码生成器我："你曾经是不是想记住如何声明渐变，文本阴影，Flexbox或Grid的CSS属性。徒弟："是的" 我：“那你还真是不容易呀，你如果不是一直在用某些css功能和属性，不然很难记住这些玩意儿呀，除非你是记忆大师，但是你也不是呀。就算是精通css的人有时也要进行属性的复习。师傅我就是这样，不断去复习，不是说看一遍就ok了。这里师傅就给你推荐一个辅助工具，css生成器” 徒弟：“谢谢师傅” 我：“都是打工的，别说客气话，做技术的要懂得分享嘛。如果都掖着藏着，也很难提升自己。来，看这，仔细听好了” CSS3 Generator “CSS3 Generator 是一款免费的在线应用，它可以让你快速编写一些现代CSS功能的代码，如Flexbox、渐变、过渡和变换等。输入所需的CSS值，实时预览结果，复制并粘贴生成的代码。此外，此应用程序还会显示支持CSS代码的浏览器及其版本的列表。 ” 终极CSS Generator “CSS Generator

How to create a second blog template to my Gatsby Site

阅读更多关于 How to create a second blog template to my Gatsby Site

问题 My Gatsby Site need 2 blog templates: stories-template.js products.template.js I have the stories-template running for my stories, but I am unsure how to tweak and change my existing codes in gatsby-node + products.template.js to make a second (different) template for my products. I've tried all the solutions and past questions but no luck. my code in gatsby-node.js: const path = require('path'); exports.createPages = ({actions, graphql}) => { const { createPage } = actions const postTemplate

How to make a script working the first time for a special component with gatsby?

阅读更多关于 How to make a script working the first time for a special component with gatsby?

问题 I am working on a static website project using Gatsby. I have several markdown pages, and only one is using a script through a cdn call. Instead of calling my script wherever i am on the website, I only to want to call and use my script when I need to update my <head> . That's why I started to use logical inside my Helmet component. Actual version (calling on every pages): return( <Layout> <Seo /> <Helmet> <script src="myScriptForOnePage.js" /> </Helmet> .... </Layout> ); Excepted version:

Where to put theme file when using the gatsby-plugin-material-ui with gatsby?

阅读更多关于 Where to put theme file when using the gatsby-plugin-material-ui with gatsby?

问题 I can't seem to get my theme file to have any effect on my components in a Gatsby app. I'm using gatsby-plugin-material-ui relevant part of gatsby-config.js `gatsby-plugin-netlify-cms`, { resolve: `gatsby-plugin-material-ui`, options: { pathToTheme: 'src/theme.js', }, theme.js import { createMuiTheme } from '@material-ui/core/styles'; import indigo from '@material-ui/core/colors/indigo'; import pink from '@material-ui/core/colors/pink'; import red from '@material-ui/core/colors/red'; const

How to change Markdown link relative path as preprocessing of gatsby-transformer-remark

阅读更多关于 How to change Markdown link relative path as preprocessing of gatsby-transformer-remark

问题 I am developping a static blog using Gatsby. It use gatsby-transformer-remark and gatsby-plugin-i18n plugin to support multiple languages. I am managing the articles in the GitHub repository as follows. /blog /2017 /06 01-foo.en.md 01-foo.zh.md /09 01-bar.en.md 01-bar.zh.md And links between the articles is necessary. Therefore, in order not to become a dead link when looking at GitHub with a Web browser, we set up a link as follows. [link](/blog/2017/09/01-bar.en.md) However, this has the

Gatsby Build Fails on Netlify Deploy

阅读更多关于 Gatsby Build Fails on Netlify Deploy

问题 My site is built using Gatsby with continuous deployment to Netlify. I haven't touched my Gatsby site in two months. So, when I ran updates and added new content and deployed I ran into a breaking error on Netlify build. Tried many things and spent too many hours on it already. Originally I was using only npm. After banging on that for a while I switched to yarn as was suggested on some online threads. Getting a different error message now with yarn, but still no luck with the deploy to

Gatsby Build Fails on Netlify Deploy

阅读更多关于 Gatsby Build Fails on Netlify Deploy

useStaticQuery: Invalid hook call. Hooks can only be called inside of the body of a function component

阅读更多关于 useStaticQuery: Invalid hook call. Hooks can only be called inside of the body of a function component

问题 I'm trying to get values via useStaticQuery from gatsby-config.js. My codes are the followings. Could anyone have any ideas to solve this issue? Thank you in advance repo https://github.com/koji/portfolio package.json "dependencies": { "@babel/core": "^7.5.5", "gatsby": "^2.13.28", "gatsby-link": "^2.2.2", "gatsby-plugin-react-helmet": "^3.1.2", "gatsby-plugin-sass": "^2.1.3", "gatsby-plugin-typescript": "^2.1.2", "gatsby-source-filesystem": "^2.1.8", "gatsby-source-instagram-all": "^2.0.5",

Running SASS on Gatsby not working

阅读更多关于 Running SASS on Gatsby not working

问题 Yesterday, I was able to setup a starter-pack instance of gatsby and deploy to github pages. Since then, I've updated my react/js files locally, which seemed to run fine locally. Now I want to compile my sass: I can't find a decent solution which works: Here's the sass compiler I tried to install: sass --watch assets/scss/main.scss:assets/css/style.css Node sass watch runs, but doesn't actually compile anything. I get an error instead: Problems: 1) Since installing the sass ./src/assets/scss