在Gatsby中使用ParticleJS
ParticleJS是一个用于创建漂亮的粒子动画效果的JavaScript库。它可以在网页上创建各种有趣的粒子效果，比如雪花、星星、烟花等。
在Gatsby中使用ParticleJS可以为网站添加吸引人的动画效果，增加用户体验和视觉吸引力。下面是在Gatsby中使用ParticleJS的步骤：
步骤1：安装依赖 首先，你需要安装ParticleJS库和相关的依赖。在终端中进入你的Gatsby项目根目录，运行以下命令：
npm install particles.js react-particles-js步骤2：创建组件 在src目录下创建一个新的组件文件，比如"Particles.js"。在该文件中，引入所需的库和样式：
import React from "react"
import Particles from "react-particles-js"
import particlesConfig from "./particles-config.json"
import "./particles.css"
const ParticlesComponent = () => {
return <Particles params={particlesConfig} className="particles" />
}
export default ParticlesComponent步骤3：创建配置文件 在组件所在的目录中，创建一个名为"particles-config.json"的配置文件。该文件包含了ParticleJS的配置选项，可以根据需要进行调整。以下是一个示例配置：
{
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#000000"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#000000",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}步骤4：添加样式 在组件所在的目录中，创建一个名为"particles.css"的样式文件，并添加以下样式：
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}步骤5：在页面中使用组件 在你想要使用ParticleJS效果的页面组件中，引入并使用刚才创建的Particles组件：
import React from "react"
import ParticlesComponent from "../components/Particles"
const HomePage = () => {
return (
<div>
<h1>Welcome to my website!</h1>
<ParticlesComponent />
</div>
)
}
export default HomePage以上就是在Gatsby中使用ParticleJS的完整步骤。通过这些步骤，你可以在Gatsby网站中添加漂亮的粒子动画效果，提升用户体验。
推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）、腾讯云对象存储（https://cloud.tencent.com/product/cos）。
请注意，以上答案仅供参考，具体的实现方式可能因项目需求和技术栈而有所不同。
相关·内容
D：\gatsby现场>npm运行开发
默认@0.1.0开发D：\盖茨比站点盖茨比开发
错误
有一个问题，加载插件“盖茨比-插件-锐利”。也许你需要安装它的软件包？使用--详细查看实际错误。
错误#10226配置
无法找到"D:\gatsby-site\gatsby-config.js“中声明的”gatsby- plugin“插件。
尝试在D：\gatsby站点\plugins\中寻找本地插件。
尝试在以下路径中查找已安装的包：
D:\gatsby-site\node_modules\gatsby\dist\bootstrap\load-themes\node_modules\
浏览 2提问于2021-03-23得票数 0
我已经用gatsby-source-contentful成功地获取了数据，但是我想不出如何用markdownRemark扩展内容丰富的查询，如官方中所示。
我在gatsby-config.js中添加了gatsby-config.js，运行了gatsby clean && gatsby develop，但仍然看不到Graphiql中的childMarkdownRemark。
gatsby-config.js
module.exports = {
siteMetadata: {
title: 'Test Contentful and MarkdownRem
浏览 1提问于2019-11-24得票数 3
我已经将gatsby-plugin-layout安装到我的项目文件中，创建了src/layouts/index.js，并将gatsby-plugin-layout添加到gatsby-config.js中。Gatsby应用程序编译并可以在开发服务器上服务，但是通过我的布局组件的console.log输出，我看到布局组件仍然在每个页面加载上重新挂载。我的目标是让布局组件在反应应用的过程中只挂载一次。
src/layouts/index.js
import React from "react"
import Header from "../components/header&
浏览 0提问于2019-10-04得票数 1
回答已采纳
我试着在盖茨比运行Graphql游乐场。
我的配置：
"scripts": {
"develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby c
浏览 12提问于2022-11-14得票数 0
我正试图用strapi和gatsby获得一个快速的原型。所有的初学者似乎都不起作用，所以我在strapi网站上尝试了快速启动的方法。
首先，我遵循了这个快速启动指南，以获得strapi后端。
然后这个让盖茨比跑了。
并且遇到了两个错误。
"gatsby-source-strapi" threw an error while running the sourceNodes lifecycle:
Request failed with status code 403
...
warn The gatsby-source-strapi plugin has generated n
浏览 13提问于2022-05-26得票数 0
1回答
我已经使用gatsby文档步骤在我的mac上安装了gatsby。使用此命令行"npm install -g gatsby-cli“。但我无法创建gatsby项目。我在终端中遇到"-bash: gatsby: command not found“错误。另外，尝试"sudo npm install gatsby-cli -g“，但我得到了相同的错误。我可以在堆栈溢出上看到类似的问题，但那里提供的解决方案并不能帮助我解决。
浏览 10提问于2019-08-01得票数 1
我打算通过添加在标记中使用id属性的可能性来扩展gatsby-transformer-remark。
当我尝试在本地gatsby存储库中启动yarn watch --scope=gatsby-transformer-remark，并在我的测试站点目录中并行启动gatsby-dev和gatsby develop时，由于缺少gatsby-transformer-remark的安装依赖项而导致构建失败。
在此之前，我按照本指南编写了environment - 。
如何使用gatsby-dev-cli处理包依赖关系
浏览 0提问于2018-09-24得票数 0
我正在尝试构建一个使用gatsby-source-filesystem来获取图像的gatsby主题。
我已经为开发设置了一个纱线工作区，我的文件夹结构如下所示。
workspace/
├─ example.com/
│ ├─ src/
│ │ ├─ pages/
│ │ │ ├─ test.js
│ ├─ gatsby-config.js
│ ├─ package.json
├─ gatsby-theme-example/
│ ├─ src/
│ ├─ images/
│ ├─ gatsby-config.js
│ ├─ gatsby-node.js
│ ├─ pac
浏览 3提问于2022-07-11得票数 1
回答已采纳
1回答
概述
我使用盖茨比环境。
由于gatsby中使用graphql，所以使用了useStaticQuery。
它在开发环境(gatsby develop)中工作很好，在构建后的环境(gatsby build && gatsby serve)中，出现了类似标题的错误。
错误文本
错误:无法获取此StaticQuery的结果。
这可能是盖茨比中的一个错误，如果刷新页面没有修复它，请在中打开一个问题。
错误码
const data = useStaticQuery(
graphql`
query {
allArticle(sort: { order:
浏览 3提问于2021-11-11得票数 2
回答已采纳
我想要实现的
在打字稿中使用“Gatsby插件-暗模式”
我至今所做的一切
yarn add gatsby-plugin-dark-modeinclude‘gatsby-plugin--在gatsby-config.js中安装“gatsby插件-暗模式”
module.exports = {
plugins: ['gatsby-plugin-dark-mode'],
}
定义了ThemeToggler组件并导入了ThemeToggler
import React from 'react'
import { ThemeToggler } from 'ga
浏览 2提问于2021-04-09得票数 1
回答已采纳
7回答
我设置了.env文件和gatsby-config.js，如下所示。
// .env.development
GATSBY_API_URL=https://example.com/api
// gatsby-config.js
console.log(process.env)
...
...
尽管何时运行gatsby develop，它显示了包括GATSBY_API_URL: 'https://example.com/api'在内的所有env，但是浏览器上没有env。
// client side
console.log(process.env) // => this w
浏览 0提问于2018-12-12得票数 30
回答已采纳
我有一个GatsbyJS应用程序，由NodeJS快递服务器使用gatsby-plugin-nodejs提供服务。我在云铸造厂中设置了一个env变量为GATSBY_MY_ENVIRONMENT="Production“。
我的NodeJS使用的是快递，它有以下代码。
const express = require('express');
const app = express();
const gatsby = require("gatsby-plugin-nodejs")
const cfenv = require('cfenv');
c
浏览 3提问于2021-05-29得票数 4
我正在使用Gatsby插件夏普和其他插件的备注图像。下面提供了包json。 奇怪的是，构建在MacOS上运行良好，但是在尝试获取PNG镜像的元数据时，在Debian docker容器中失败了。gatsby-plugin-sharp面临此错误 仅包含package.json依赖项 "dependencies": {
"@buzz/as-components": "^1.0.3",
"@dx/continuum-footer": "^1.5.1",
"@marcom/ac-sasski
浏览 42提问于2021-02-12得票数 0
回答已采纳
我有问题的svgs作为进口的I盖茨比网站。一切似乎都很好地发展，建立和服务的方式。当我将站点部署在与netflify集成的gatsby云上时，导入的所有svg都不能作为内联html代码正常工作。奇怪的是，我在构建/部署过程中没有发现任何错误。有人能帮忙吗？下面是我的依赖项和在站点上使用svg的示例。
"dependencies": {
"@mdx-js/mdx": "^1.6.6",
"@mdx-js/react": "^1.6.6",
"babel-plugin-styled-components"
浏览 1提问于2020-07-13得票数 0
回答已采纳
如何使用playground而不是graph-i-ql？ gatsby docs - using graphql playground 我已经尝试了几种方法来加载游乐场而不是图-i-ql，更新xcode，使用不同的浏览器，全局安装游乐场，重新启动，等等。我的项目在我的鱼壳中运行gatsby develop后，仍然在http://localhost:8000/___graphql加载图-i-ql。 my github repo {
"name": "gatsby-bootcamp",
"private": true,
"des
浏览 8提问于2019-04-22得票数 1
回答已采纳
最近我开始使用Gatsby，现在我正在尝试使用MDX，在我的MDX文件中，我可以通过GraphQL使用Gatsby，但是我想使用中的静态图像，我收到了这样的错误：
react_devtools_backend.js:2557图像未加载
当我试图在.tsx中实现这个映像时，它可以工作，所以我想知道它是否可能。
gatsby-config
"gatsby-remark-images",
{
resolve: "gatsby-plugin-mdx",
options: {
defaultLayouts: {
浏览 1提问于2021-04-23得票数 7
我喜欢在我的gatsby网站上展示maplibre地图。我可以在React中完成。 gatsby develop没有向我显示错误。但是我在运行时在firefox中得到了这个错误： maplibre_gl__WEBPACK_IMPORTED_MODULE_2__.maplibregl is undefined ? 在Chrome中，它看起来像这样： ? 这是我在package.json中的依赖项 dependencies": {
"gatsby": "^3.13.0",
"gatsby-image": "
浏览 157提问于2021-09-06得票数 0
我正在使用gatsby-plugin-mdx和gatsby-remark-images在MDX中合并图像以用于博客，默认情况下它应该具有Gatsby Image附带的模糊效果
下面是我在gatsby-config.js中配置插件的方法
{
resolve: `gatsby-remark-images`,
},
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [".mdx", ".md"],
gatsbyRema
浏览 5提问于2020-06-05得票数 1
1回答
我正在尝试通过npm安装gatsby-plugin- 文档。
接收终端中的下列错误：
$ npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: gatsby-starter-hello-world@0.1.0
npm ERR! F
浏览 5提问于2021-03-06得票数 4
回答已采纳
我有一个项目与盖茨比，它的‘构建’是部署到AWS S3桶与静态网站托管。
我的盖茨比项目是使用插件，即从o数据集获取数据。
在我的非生产阶段，我希望有一个预览和watchMode，这样我就不会构建和部署应用程序的每一个变化。
在gatsby-config.js中的此配置中
{
resolve: "gatsby-source-sanity",
options: {
projectId: process.env.GATSBY_SANITY_PROJECT_ID,
dataset:
process.env.G
浏览 1提问于2021-08-12得票数 0
我是一个全新的WPGraphQL新手，在我的新Wordpress端点上构建一个Gatsby站点时遇到了一些麻烦。当我在Postman中对我的端点执行以下查询时，我成功地获得了页面数据： query MyQuery {
pages {
edges {
node {
id
slug
status
}
}
}
} 然而，当我尝试构建Gatsby站点时，我得到了以下信息： 错误#85923 GRAPH
浏览 227提问于2021-10-22得票数 0
回答已采纳
我可以使用graphql获取gatsby中的数据，如下所示：
import { graphql, useStaticQuery } from "gatsby"
const IndexPage = () => {
const gatsbyRepoData = useStaticQuery(graphql`
{
github {
repository(name: "gatsby", owner: "gatsbyjs") {
id
nameWithOwner
浏览 1提问于2020-10-13得票数 0
回答已采纳
当我试图使用静态查询在gatsby项目中使用gatsby映像加载图像时，会出现此错误。为了给您提供一些上下文，我使用多个gatsby网站制作了一个monorepo，并重用了共享组件。文件夹的层次结构是：
包
共享用户界面
图像
lightlogo.png
- components
- lightlogo.js
- index.js
- ventures
- src
- pages
- 404.js
index.js文件导出页面的lightlogo徽标组件以访问它。
浏览 1提问于2020-12-03得票数 0
1回答
我已经查看了，它解释了如何执行以下操作：
注意:由于Gatsby使用Webpack DefinePlugin使环境变量在运行时可用，因此不能从process.env中解构它们。相反，它们必须被完全引用。
GATSBY_API_URL将作为process.env.GATSBY_API_URL提供给您的站点(客户端和服务器端)。
我现在有这个
useEffect(() => {
var getRouteConfig = {
method: 'get',
url: `https://www.strava.com/api/v3/routes/${p
浏览 14提问于2021-06-11得票数 0
当我尝试在react中启动我的项目时，我得到了这个错误，我正在使用Ubuntu系统 Found bindings for the following environments: - Linux 64-bit with Node.js 9.x 我用的是node -v : 10.13.0和npm -v : 6.11.2，这里还附上了我的package.json文件，有没有人能帮我解决这个问题？ {
"name": "gatsby-starter-hello-world",
"private": true,
"descrip
浏览 16提问于2020-08-25得票数 1
回答已采纳
我把gastby 2安装在一个ubuntu 16.04盒上
gatsby new netlifycms2 https://github.com/netlify-templates/gatsby-starter-netlify-cms
没有错误。
但是，当我访问/admin并使用netlify单击登录时，就会收到消息。
未能从/..netlify/identity加载设置
我想我需要这个文件，但是没有找到任何关于如何安装它的说明。
我在static/admin/.netlify/identity中手动添加了一个空白标识文件，然后运行gatsby构建和gatsby，但是错误消息仍然存在。
我在这
浏览 0提问于2018-09-19得票数 1
回答已采纳
所以我尝试在我的博客中添加如下代码:在我的gatsby-config.js
module.exports = {
siteMetadata: {
title: 'Chatbiz Blog',
},
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-catch-links',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `
浏览 6提问于2019-08-12得票数 10
我正在做一个Gatsby项目。有创设讨论室的功能。例如:如果我创建了一个新房间，我想要有如下所示的新路由。(使用唯一的房间id) https://www.discussion.com/room/d3e353如何为Gatsby动态创建路由？在Gatsby中，正常的动态路由是在Gatsby gatsby.node.js文件中完成的。通过createPage函数。但在这种情况下，我必须在源文件中创建新的路由，而不是在配置文件中。请帮帮我。
浏览 27提问于2020-12-16得票数 1
我试图在useState中使用GatsbyJS中的一个简单的函数组件，但是在React中我得到了一个看似常见的错误。
我的精简版组件：
import React, { useState } from 'react';
export default function Header () {
const [isOpen, toggleOpen] = useState(false);
return (
<header>
<button onClick={() => toggleOpen( !isOpe
浏览 0提问于2020-10-10得票数 2
回答已采纳
1回答
我在盖茨比有个博客。我还想使用docz来记录我的react组件。然而，我似乎不能让两者都在我的应用程序中工作。每当我运行$ yarn start时，我只会得到我的docz页面，而不是我的博客。如何使用$ yarn start运行我的博客，并仍然使用其他命令运行docz内容？谢谢!
// gatsby-config.js
require('dotenv').config();
const colors = require('./src/utils/colors');
const { GRAPHQL_URL } = process.env;
module.exp
浏览 3提问于2020-01-29得票数 1
回答已采纳
1回答
我正在尝试设置Wordpress + Gatsby Docker配置。整个Wordpress和数据库部分不是问题，工作正常。 但Gatsby部分更多的是一个问题。其想法是构建一个映像，其中安装了Gatsby CLI和Node模块，同时将整个应用程序共享到本地文件夹。这就是我使用Dockerfile的地方 FROM node:14.11.0-alpine
RUN npm install -g gatsby-cli
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8000
CMD ["gats
浏览 50提问于2020-09-20得票数 0
回答已采纳
1回答
我正在尝试设置VSCode，以便能够调试Gatsby代码。我对Javascript sourcemaps不熟悉，这似乎是问题的原因。
我在启动时看到以下错误：
Cannot launch program "c:\Gatsby\myprogram\node_modules\.bin\gatsby" because corresponding Javascript cannot be found.
我验证了错误中gatsby文件的路径是否存在。
这是我在launch.json中使用的文件：
"version": "0.2.0",
"c
浏览 0提问于2018-06-03得票数 3
我运行了以下命令来创建一个新的gatsby初学者博客：
gatsby new blog https://github.com/alxshelepenok/gatsby-starter-lumen
cd blog
gatsby develop
但是在gatsby develop期间，我遇到了许多名为ERROR #98123 WEBPACK的错误--生成开发JavaScript包失败了。
我尝试了这么久，删除并安装了一次又一次的回购，也删除了node_modules和package-lock.json，然后又删除了npm install，但是得到了同样的错误。帮帮我！
有关详细信息， (它有点
浏览 4提问于2021-01-30得票数 8
我是Gatsby的新手(一般是前端)。我试图添加katex插件https://www.gatsbyjs.org/packages/gatsby-remark-katex/到我的项目基于博客主题https://www.gatsbyjs.org/packages/gatsby-theme-blog/，但它不起作用。 我所做的工作如下:从gatsby-theme-blog开始 $ gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
$ cd my-themed-blog 在项目的顶部，安装g
浏览 64提问于2019-12-18得票数 1
我希望能够在我的Gatsy博客中呈现数学方程，无论是内联模式还是显示模式。
我用Markdown写博客。
我安装了gatsby-remark-katex插件，方法是在下面的链接中跟随说明：
实质上有三个步骤：
步骤-1：安装gatsby-transformer-remark gatsby-remark-katex katex我在安装中没有犯任何错误。我在我的package.json文件中看到了这些包。
步骤2：在gatsby.config.js中添加以下代码片段。
{
resolve: `gatsby-remark-katex`,
options: {
strict: `ign
浏览 6提问于2022-06-25得票数 1
目标 嗨。我有一个Gatsby网站，我正在使用gatsby-transformer-remark插件将博客目录中的博客标记文件加载到GraphQL中，以便在我的网站上显示。我已经查看了文档和示例代码，以了解如何为每个页面创建一个插件，以便在gatsby-node.js文件中可以使用该插件动态创建页面。 问题 当我尝试访问GraphiQL中的fields { slug }属性时，我得到了以下错误：message": "Cannot query field \"fields\" on type \"MarkdownRemark\"."我已经
浏览 8提问于2021-01-04得票数 3
回答已采纳
最令人沮丧的是，我在早些时候就把它弄坏了，但是我用gatsby-plugin-sharp和gatsby-plugin-图片在我的主页上添加了一张照片，然后看到了这个错误：
Gatsby-plugin-sharp wasn't setup correctly in gatsby-config.js. Make sure you add it to the plugins array.
我不知道为什么..。我试过删除node_modules，package_lock.json，重新安装.除此之外，我还可以看出插件肯定在我的数组中，如果我在插件中添加未解决的选项，当插件加载时，它会问我关于它
浏览 14提问于2021-12-16得票数 2
目前，我正在尝试使用gatsby创建一个博客，其中的博客文章是标记文件。当文件夹结构如下所示时，gatsby转换器备注和gatsby备注-映像工作得非常好：
+-- content
| +-- blog
| | +-- article_title
| | | +-- article_title.md
| | | +-- photo.png
因此附件必须位于标记文件的同一个目录中。相反，我想移动文件夹中的所有附件，以便更容易地使用像Obsidian这样的记录应用程序。
+-- content
| +-- blog
| | +-- media
| | |
浏览 16提问于2022-09-15得票数 1
回答已采纳
我正在使用gatsby-source-wordpress获取数据，在gatsby构建或gatsby开发期间，我有媒体获取问题RequestError: Timeout等待‘请求’30000ms。我还在模式选项中增加了超时时间，还使用了"GATSBY_CONCURRENT_DOWNLOAD=5 gatsby develop“，但都不起作用。我该如何解决这个问题？我完全被这个问题迷住了。
浏览 15提问于2021-05-27得票数 1
我想在我的博客帖子中显示featuredImages。
我的前额看起来像这样：
---
title: My pst with a feature image
date: "2021-05-16T09:45:00.000Z"
description: "Some cool post with a feature image"
tags: [demo]
featuredImage: "feature.png"
---
index.md和feature.png是同一目录中的同级。我使用这个查询：
query BlogPostBySlugDev($id:
浏览 3提问于2021-05-16得票数 1
2回答
在将盖茨比升级到V4后，我们在Netlify上显示图像时遇到了问题。
在过去的3年里，我们一直在使用Netlify进行这个项目，在我们试图迁移到盖茨比的V4之前，一切都进行得很顺利。
我们使用Strapi与盖茨比，我们的源插件是盖茨比源-图形is。
我还使用createRemoteFileNode API下载图像并在本地存储它们。
exports.createResolvers = async ({ actions, cache, createNodeId, createResolvers, store, reporter }) => {
const { createNode }
浏览 8提问于2022-05-11得票数 2
“盖茨比开发”运作良好。但是，在“gatsby构建”中会发生错误。
Something went wrong installing the "sharp" module
Cannot find module '../build/Release/sharp-darwin-arm64v8.node'
上面的问题发生在一开始，所以我们用以下的方法解决了它。
rm -r node_modules/sharp
yarn install --check-files
'gatsby构建问题
我已经证实它在开发环境中运行良好。
Page data from page-
浏览 5提问于2022-03-29得票数 1
回答已采纳
我在gatsby的一个项目中工作，一切都很好，除了当我加载网站的任何页面时，因为有一个闪光的未样式的内容就像一秒钟。这个问题在所有页面中都存在，我对修复这个问题的研究表明，在使用样式组件时，这个问题是一个持续存在的问题。我的项目不使用样式化组件，因为在gatsby-browser.js中加载样式表时，会在整个项目中共享一个全局样式表。 下面配置中的代码。这里有人能帮我吗？ require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
sit
浏览 28提问于2021-01-25得票数 0
我正在尝试格式化markdown文件中的代码块，以便在Gatsby网站上发布。
我希望代码块以VSCode的一种颜色主题(例如，Dark + )显示。我已经安装了npm的gatsby-remark-vscode，并将插件放在我的gatsby-config.js文件中：
plugins: [
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [{
resolve: 'gatsby-remark-vscode',
浏览 0提问于2020-05-20得票数 0
siteMetadata: {
title: `Gatsby Default Starter`,
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
author: `@gatsbyjs`,
},
plugins: [
`gatsby-plugin-react-hel
浏览 0提问于2020-01-14得票数 0
1回答
我正在使用以下GatsbyJS启动器：
我正试图在一个像这样的标记文件中呈现一个图像：
标记文件位于contents/docs/templates/use-cases/us-energy-infrastructure.md
图像位于src/images/us-viz.png
结果如下：
控制台和网络选项卡显示请求的图像文件的404错误：
这是我的gatsby-config.js文件的内容：
module.exports = {
siteMe
浏览 7提问于2022-04-12得票数 -1
回答已采纳
1回答
我试图使用我的标记文件中的内联图像使用盖茨比-备注-图像。不幸的是，图像不会加载到本地主机上。我不知道这是简单的错误语法，还是我遗漏了一些激烈的东西。
这里是：(我怀疑我在某个地方做错了什么事，就在这里)
module.exports = {
siteMetadata: {
title: ``,
description: `A blog where code is written about`,
author: `@wesley`,
},
plugins: [
`gatsby-plugin-sass`,
`gatsby-plugin-sty
浏览 1提问于2019-11-19得票数 4
回答已采纳
当我在我的gatsby项目中使用Gatsby构建时，我得到了以下错误。如果我在另一个项目中遇到了同样的问题，但另一个项目使用相同的sass语法顺利运行，我不会对此感到如此恼火。所以这不可能是一个粗鲁的问题。我想一定是我的包里有什么东西。 Generating development JavaScript bundle failed
@import "bulma"
^
Media query expression must begin with '('
in /Users/kristijan/Documents/00_clients/
浏览 17提问于2020-11-11得票数 3
在我的CRA TypeScript项目中，当我的代码中出现TS错误时，TS会阻止dev服务器编译，而是在浏览器和控制台中显示错误。我喜欢这种行为。
在我的新盖茨比项目中，这是不可能的。IDE告诉我错误，但是gatsby develop不管如何运行代码，就像普通的js一样。我如何配置它，使其行为像我习惯于从CRA？
我用gatsby-plugin-typescript。这是我的gatsby-config.js：
module.exports = {
siteMetadata: {
title: `Gatsby Default Starter`,
description: `K
浏览 2提问于2020-10-17得票数 1
回答已采纳
1回答
不要让查询满足于工作。接收错误消息：TypeError: Cannot read property 'allContentfulMagArticle' of undefined
data在Posts组件中未定义。我看不出我做错了什么。
import { graphql } from 'gatsby';
import Post from "./post.js";
import './posts.css';
export const query = graphql`
query {
allContentfulMagA
浏览 4提问于2021-04-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
