这件事把我难住了。我正在使用盖茨比、理智和Netlify,开发过程中的一切都按预期进行。现在,当我在Netlify上加载我的站点时(没有构建错误),我看到的只是一个带有“加载(静态查询)”的白色屏幕。没有任何错误供我调试。我已经看到了一些与此相关的问题,但它们在github上没有得到回答,或者解决方案对我不起作用
我的组件中只有两个使用静态查询,布局组件(它包装了所有内容,因此网站在生产中根本不加载)和SEO组件,它们都来自我使用的初学者,并且几乎没有被触及
我正在使用此Sanity start
我有一个盖茨比生成的网站,我使用Netlify进行部署
我按照上面列出的教程以非常类似的方式创建了一个自定义/本地源插件
自定义插件显然有自己的package.json文件,因此通过根级别gatsby config.js导入时需要npm i
在Netlify deploy上为我的自定义插件安装依赖项的最简单方法是什么?最简单的方法是,我认为您可以指示Thread(或npm)将cd刻录到插件文件夹中,然后运行安装
在netlify中,您可以将默认构建脚本从默认的gatsby构建更改为Warn构建(
标签: Gatsby
netlify-cmsgraphiql
盖茨比和奈特利菲都是新手。到目前为止,我所取得的成就是:
建立盖茨比基础项目
已将其同步到Netlify
生成了一个GraphiQL查询
我有一个admin>config.yml文件,它填充了我可以在netlify中使用的字段
backend:
name: git-gateway
branch: master
media_folder: static/img
public_folder: /img
collections:
- name: "pages"
当按下菜单链接时,覆盖组件正在打开,但我无法使用关闭功能。我做错了什么?除了这个问题,我怎样才能使它这样当按下菜单链接,它也关闭并转到锚链接?试图在谷歌上搜索并自行修复,但没有成功。这是我现在的代码:
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React, { useState } from "react"
import AnchorL
我正在使用Gatsbys文件系统路由API来创建动态页面,除了第1个问题外,它工作得非常好。
我想不出如何让它在Frontpage上工作(https://localhost:8000/)
我将页面文件创建为pages/{Node.url}.tsx
我看到它在工作。G对于http://localhost:8000/news, http://localhost:8000/toc, …
但是对于frontpage,URL位于http://localhost:8000/.tsx/并且在http://lo
我目前拥有一个名为vidu.sh的域名
我现在想通过ZEIT部署一个盖茨比应用程序。我已经在我的仪表板中添加并配置了域(该域是通过外部服务购买的,我已经更改了名称服务器以匹配ZEIT的one and all's good)
部署的应用程序应在上可用。(请注意,在我写这一行时,我的应用程序可能是可用的,因为我以前的配置涉及Github页面。我想现在迁移到ZEIT,因为它更符合我的需要)
有没有一种方法可以将应用程序部署到所请求的URL,而无需将我的gatsby应用程序源代码移动到名为“/an”/的
我正在使用盖茨比建立一个非常大的网站(5k+页面,300k+图像)。源数据不可靠(例如字段经常丢失),这会导致createPage过程中出错
问题是,如果一次createPage运行抛出错误,整个构建就会失败。因此,有时5k页面构建成功,然后整个过程由于一个错误而崩溃
我尝试将页面创建包装在一个try…catch中,但没有任何区别:
试试看{
创建页面({
路径:node.slug,
组件:path.resolve(`./src/templates/BlogPost.js`),
背景:{
id:
我已经创建了Gatsbyjs.org github存储库,它在本地构建时没有任何问题
我想使用代码树作为一些其他项目的技术文档的基础。我喜欢的布局,我一直无法找到一个解决方案与相同的质量
但是我担心代码树中有很多不必要的代码。我可以删除除www和doc之外的其他目录而不失去功能吗
我以前没有和盖茨比一起工作过
谢谢你的帮助
Kim您只需将配置文件保存在根目录(gatsby-前缀文件)、/src文件夹(拥有所有逻辑、反应组件等的文件夹)和/static(仅在使用时)。其余的文件和文件夹将在编译过程
我很感激插件不再以当前的形式()维护,但希望以此为基础将AMP页面添加到我的站点。我已经很好地安装了插件,并且能够创建我所需页面的AMP版本
然而,每当我尝试导入CSS文件或模块时,我的整个站点的所有样式都会自动添加到页面的前面(从而使AMP页面无效)。如何仅导入单个样式表?我尝试过CSS模块,但没有乐趣:
import React from "react"
import { graphql } from "gatsby"
import ampStyles
我的盖茨比/内容博客正在使用Algolia搜索博客文章。除了显示图像外,一切正常
这是我使用Algolia模板在Contentful中创建的Webhook负载:
{
"title": "{ /payload/fields/title/en-US}",
"slug": "{ /payload/fields/slug/en-US}",
"price": "{ /payload/f
我正在使用盖茨比的createResolverAPI将标记转换为html。它在顶级数据上运行良好。但是,我无法让它在嵌套更深的数组上工作
以下是有效的方法:
function markdownToHTMLResolver(nodeType, node, type) {
return {
[nodeType]: {
[`${node}_html`]: {
type: type,
resolve: (source, args, context,
当我运行命令gatsby develope启动开发服务器时,我收到以下错误消息:
成功打开并验证盖茨比配置-0.006错误未处理
拒绝
错误:找不到插件“gatsby plugin sharp”。也许你需要
安装它的软件包
load.js:107解析插件
[盖茨比网站]/[盖茨比]/dist/bootstrap/load插件/load.js:107:11
load.js:119 processPlugin
[盖茨比网站]/[盖茨比]/dist/bootstrap/load插件/load.js:
我正在尝试克隆一个用盖茨比构建的站点,并在我的笔记本电脑中本地运行它。
但键入任何gatsby命令都会在命令提示符下发出以下警报:
-bash:gatsby:command未找到
我试图在不使用GitHub存储库的情况下手动卸载并重新安装gatsby。但还是没有成功
在当地,我遵循以下指示:
git克隆git@github.com:PlatformOfTrust/pot网站。git
cd开发者网站或营销网站
npm安装
npm安装--全局gatsby cli
gatsby develope-o-
试图在我的项目目录上安装一个gatsby starter主题,但没有成功,相反,我收到了一条错误消息,我真的不知道如何处理它。
错误消息:
命令失败:npm安装
错误:命令失败:npm安装
index.js:236 Promise.all.then.arr
[npm]/[gatsby cli]/[execa]/index.js:236:11
下一个_tick.js:68进程。_tick回调
内部/流程/下一步勾选js:68:7
我已经在我的mac上测试了它,在运行npm安装时没有问题
所以我
我有一个箭头函数组件,如下所示:
const Slideshow = () => {
...
return(
...
);
}
我想初始化一个构造函数,就像您在类组件中所做的那样:
class Slideshow extends React.Component() {
constructor() {
super();
this.state = {
modal: false
};
this.toggleModal = th
我正在建立一个带有后端的盖茨比投资组合网站。该网站的主页将有一个格子状的瓦片链接到博客文章。我希望博客文章URL具有以下结构:
'blog/[publishedDate]/[slugifiedTitle]'例如-'blog/2019-10-15/我的第一篇文章'
通过GraphQL获取PublishedDate和Slug并在前端使用Javascript函数将它们连接在一起并格式化URL,我已经实现了这一点。然而,我用于本节布局的Tile Grid React组件可能用于非博客内容。因此,我想知道
标签: Gatsby
gatsby-imagegatsby-remark-image
我正在尝试通过执行以下操作将图像导入mdx文件:![alt](image.jpg)。我的mdx文件和映像都存储在目录src、posts、post-1中。但是,图像不会显示。我尝试了许多文件路径,但都没有成功
我能够显示图像的唯一方法是使用src,例如![alt](/static/47d93fd9bdeaaf54a7b60d14c66abe5d/48e00/icon.jpg)
下面是我的gatsby.config的一部分
plugins: [
{
resolve: `gatsb
在我的createSchemaCustomization中,我定义了类型
const typeDefs = `
type MarkdownRemark implements Node @dontInfer {
htmlAst: Object!
frontmatter: Frontmatter!
fields: Fields!
}
type Frontmatter @dontInfer {
updatedAt:
部署网站后(即运行gatsby build并将所有内容从公用文件夹复制到webserver WWW文件夹),我无法使用导航中的gatsby链接从主页导航到网站的其他子页面。链接在本地主机上工作,但在Web服务器上不工作。下面是我在header.js文件中的代码。如有任何建议,将不胜感激
编辑:当我在localhost:8000服务器上运行代码时,我可以使用导航栏在Gatsby页面之间导航,例如从索引(localhost:8000)到联系人页面(localhost:8000/contact)。但是
每当我点击刷新按钮时,在样式开始工作之前大约需要300毫秒。
我看不出我应该错过什么,因为我遵循了很多指南,关于在盖茨比建立顺风
// tailwind.config.js
module.exports = {
purge: ["./src/**/*.js", "./src/**/*.jsx"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
fon
运行npm run deploy(由“deploy”:“gatsby build&gh pages-d public-b master”)后,它成功部署,但映像不在那里。我意识到它们位于标记后面,显然缺少路径前缀。这是回购协议:它部署在这里:
我确实在gastby-config.jspathPrefix:“/gatsby universal”中添加了路径前缀,我尝试运行gatsby build,然后是gatsby build——路径前缀,然后是npm run build(以及包括路径前缀在内的许
我使用的是盖茨比v3和盖茨比源代码wordpress。有没有更好的方法来创建程序化的帖子页面
我的{wppest.uri}.js
导入。。。。
const Wrapper=styled.div`
最大宽度:1180px;
保证金:0自动;
填充:20px;
`
const ContentWrapper=styled.div`
显示:块;
h1{
字体大小:var(--fontSuperBig);
字体大小:400;
文本转换:无;
}
@介质(最小宽度:992px){
显示器:flex;
}
未找到的页面看起来像是您跟踪了一个断开的链接或输入了
此网站上不存在的URL
预期结果:动态创建页面后,@reach/router应该能够捕获路径中的ID,并将其作为组件中的道具使用
实际结果:这可以在本地工作,但在生产环境中,浏览器会向我抛出上述错误。
控制台中的错误:
加载资源失败:服务器响应状态为404()
到目前为止我试过什么
在gatsby-node.js中:
exports.onCreatePage = async ({ page, actions }) => {
cons
我已经在我的网站上安装并配置了盖茨比插件google tagmanager,我可以毫无问题地记录页面浏览量
但我还需要通过在onClick事件中执行dataLayer.push来跟踪按钮单击。我没有看到一种方法可以让元素的onClick事件访问数据层对象
它要么给我一个错误,数据层未定义,要么gtag未定义
任何关于这方面的语法都将不胜感激
盖茨比配置
{
resolve: 'gatsby-plugin-google-tagmanager',
options: {
id: 'GT
有没有像WordPress那样的页面生成器来构建盖茨比网站。我看过关于CMS的文档,并配置了一个入门网站。但它没有像我们通常在WordPress页面生成器中那样添加行、列等选项
刚到盖茨比,需要一些帮助。试图安装gatsby源github api,以从我的github中提取一些数据,显示在我的投资组合中,但是我似乎无法正确安装gatsby源github api。当我转到localhost:8000/\uuuuuuuu graphql时,我现在可以选择allGithubData/githubData,但是那里没有user/repo
编辑:盖茨比开发不会抛出错误
这就是它应该看起来的样子
我已经运行了npm命令来正确安装软件包,据我所知,我已经找到了插件页面上显示的ga
我试图显示包含图像URL的对象数组中的两个图像。我知道StaticImage必须接受局部变量作为props值。图像URL的这两个变量都是本地变量。
为什么这不起作用,有解决办法吗
import React from 'react';
import { StaticImage } from 'gatsby-plugin-image';
const TestPage = (props) => {
const itemData = [
{
img: 'https://i
我在盖茨比有这一页:
import React from 'react'
import Link from 'gatsby-link'
import IntroPartial from '../partials/themes/intro'
export default class ThemeTemplate extends React.Component {
render(){
const theme = this.props.pathContext.theme
cons
我正在尝试部署一个盖茨比网站,它的URL如下
/生意
/biz-f
但是现在我想在我的域中的子路径下托管这个站点,比如
www.example.com/lp/biz->/biz
www.example.com/lp/biz-f->/biz-f
每当盖茨比网站看到/lp/*
问题是盖茨比加载了/app.js等资源,然后加载了一些json文件,如static/d/375/***.json
这会导致问题,因为现在浏览器正在查找类似www.example.com/app.js的内容,而不是www.exa
我开始学习盖茨比,跟随他们网站上的教程。按照指示,我已经下载了一个hello world入门应用程序,但在网站的tut图片中,该应用程序的目录树有一个公共和内容文件夹,而我的没有。谁能告诉我为什么?我已经从另一个教程下载了另一个初学者应用程序,那个应用程序确实有这些文件夹。所以,我不知道,只是想弄明白。任何帮助都将不胜感激。当您运行gatsby new starter时https://github.com/gatsbyjs/gatsby-starter-default,gatsby cli将gi
我有一个需要在内部服务器上运行的站点。我没有访问该网站,我只是要做盖茨比建设,并给他们的公共文件夹。但是我所有的图像都是模糊的。这样做对吗?为什么我的图像模糊如果您得到的图像有明显的压缩瑕疵,首先要尝试的是增加下面的盖茨比图像图形查询示例中的quality属性。它默认为50,所以我建议从90开始增加它,如果这解决了您的问题,您可以尝试使用较低的值,如果您发现这会增加太多的图像文件大小。盖茨比团队通常会在GitHub问题中提出提高图像质量的问题时做出决定。您还可以使用maxWidth参数,特别是如
我在Netlify上部署了我的盖茨比博客,但遇到了几个问题
问题
-当我运行“盖茨比开发”时,我可以看到博客文章,即使有错误消息。
-但是,当我运行“gatsby build”时,错误停止处理。
-我成功地部署并删除了“gatsby node.js”中的内容。
-我可以看到已部署的网页,但不知何故,通过Contentful管理的博客帖子不起作用。
-若我使用“gatsby node.js”中的内容进行部署,它将失败并且无法工作
观察
-因为“gatsby node.js”是用于帖子创建的,这会影
当我部署我的盖茨比页面时,图像有模糊的条纹,但当我部署本地构建的页面时,它们看起来很正常:
有人知道如何在盖茨比项目中实施顺风(使用SCS)吗
我遵循的,并能够让SCS的工作,但顺风类不工作
有什么建议吗?我找到了解决方案:
在gatsby-browser.jsimport./src/styles/tailwind.scss“中,我在我的博客上写了一个小教程:
标签: Gatsby
contentfulcloudflare-workers
我只是想知道是否有一种方法可以在每次添加新博客时自动从Contentful获取博客帖子。我的站点托管在Cloudflare Workers上,我使用GatsbyJs作为SSG。这里是满足的DevRel。你好@stefan,谢谢你的回复,我对这个很陌生,所以我不知道从哪里开始。也许你能帮我把这个落实到我的工作中去?任何帮助都将受到真诚的感谢。找出盖茨比遗址建在哪里2。查看是否可以通过HTTP(使用webhook)触发构建,并找出URL 3。进入“设置->webhook”中的contentful,定
我有一个盖茨比页面,它有两列等宽,顶部有一个页眉,底部有一个页脚。我在左栏有一些内容,右栏有一个图像。我正在使用graphql查询流体图像。我设置了maxWidth属性,但是当页面加载时,图像仍然是原始大小,大约为700 x 800。我对盖茨比还不熟悉,因此我非常感谢任何对造成这种情况的原因的帮助。多谢各位
const About = (props) => {
return (
<Layout>
<Row className={aboutStyle
我用hello world starter开发了我的第一个盖茨比网站。它只包含索引页+自定义404页
通过构建,有关于生成3个静态页面的信息:
index.hmtl
/public/404/index.html&/public/404.html,这是按内容定制的404页面
想知道为什么在不同的路径上有两个相似的文件
它是否与路由机制或搜索引擎优化/爬网目的有关
我可以从您的屏幕截图中看到,您有一个自定义的404.js,这可能是您希望看到的。默认情况下,盖茨比提供404页面来帮助开发,因此
当隐藏盖茨比主题时,如何处理对不需要任何更改的组件的导入调用。据我所知,如果要进行阴影处理,则目录中应该存在的唯一文件是您希望更改的组件的源代码
例如,在original index.js中,我有以下导入
import { graphql } from "gatsby"
import React from "react"
import CustomFonts from "../components/custom-fonts/custom-font
标签: Gatsby
gatsby-imagegatsby-plugin
我正在努力与盖茨比图像提供正确的图像大小,以不同的分辨率。我有一个尺寸为1920x367(宽x高)的图像,当窗口尺寸较小(例如移动窗口)时,这个问题是可见的,因为gatsy image使用490x92的图像覆盖437x354的容器
当窗口大小较大时,可以看到图像。当窗口大小较小时
图形SQL查询:
configHowWeWork: file(relativePath: { eq: "howwework/howwework-header.jpg" }) {
childI
我最近将“满足”与我的盖茨比网站整合在一起,一切都很完美。
我还有最后一个问题是关于我的博客文章页面的slug/url
目前,这些文件的URL类似于http://localhost:8000/blog/another-博客文章,但我希望他们是http://localhost:8000/blog/year/another-根据发布日期创建年份的博客文章
在我的gatsby-node.js文件中,我有以下内容
if (posts.length > 0) {
posts.forEach(
标签: Gatsby
node-modulesnpm-installgatsby-pluginlocal-node-modules
当我们从bitbucket或任何其他平台克隆任何存储库时,我们没有使用它获得节点模块。
因此,当我们运行gatsby develope时,它会说“加载本地开发命令时出现问题。”。Gatsby可能未安装在您站点的节点_模块中。可能运行“npm安装”。
但是当我运行npm install时,会花费很多时间,然后错误会出现“SOCKET\u ERR”。
那么,这是因为node_模块没有克隆,还是我需要从头安装所有插件?node_模块不能上载到存储库,决不能。因此,回答您的问题,是的,每次克隆存储库时都
我有一个json文件和一个包含图像的文件夹
plugins/
└── gatsby-source-cars/
├── images/
├── cars.json
└── gatsby-node.js
文件cars.json包含一个数组,每个索引都是一个对象,其中包含一个键以及图像的相对路径
我想在sourceNodes上加载图像文件,而不是只加载与盖茨比图像插件一起使用的路径。我假设您希望使用sharp处理本地图像,因为您说过要将其与盖茨比图像一起使用,这意味着您已经安
当我在构建过程中从他们的服务器上收到500个错误时,我的GraphQL服务提供商正在请求确切的GraphQL CURL请求。有没有办法调试和打印有关这些curl请求的更多信息?糟糕的回答。盖茨比对此错误没有提供任何帮助或线索未处理的拒绝无法读取未定义类型的属性“匹配”错误:无法读取未定义类型的属性“匹配”
我已经试着用2个模板和布局设置盖茨比了至少2天了,整页和半页,但都不起作用,我只得到一个白色的页面,除了像div_uuuuu盖茨比和脚本这样的盖茨比元素之外,没有任何元素。
下面是src/templates/half-page.jsx代码
下面是src/pages/index.jsx页面代码
import React from "react";
import HalfPageTemplate from "../templates/half-page"
class Index extends
我正在为fireblog()构建一个Gatsby初学者主题,它有一个GraphQLAPI。因此,我尝试了gatsby源代码图ql插件,这似乎是一种可行的方法:
当遵循此页面中的说明:然后访问时,在对我的新类型运行GraphQL查询时,我遇到了以下问题:无法读取未定义的属性“createPageDependency”
复制:
纱线添加盖茨比源代码图ql
将此配置添加到gatsby config.js:
插件:[
//简单配置,传递URL
{
解析:“盖茨比源图Ql”,
选项:{
//此类型将包
我正在尝试将Bookalet第三方小部件添加到我的盖茨比索引页面。我已经试过了,只是在页面和通过头盔。不幸的是,这两种方法都不起作用。有什么想法吗
正在讨论的脚本:
<div><script src="https://widgets.bookalet.co.uk/publish.js" data-bookalet="da8ebdf5-2f4a-47cb-8c92-f84032b16f5b" data-property="1726
标签: Gatsby
netlifyemotionreach-router
我设法将我的问题提炼成以下代码。它在本地开发服务器上运行良好,但在部署到Netlify时会中断。
可以找到源回购(分支机构目标网络问题)
分支已部署
我有一个原始的盖茨比SPA,通过Reach路由器进行客户端路由。
它有两个页面,/app/和/app/team/:teamName
应用程序页面应始终呈现红色背景,而团队页面应始终呈现绿色背景
Ant就是这样-以下是所有相关代码:
// src/pages/app.tsx
import React, { FC } from 'react'
imp
我目前正在使用一个有内容的“slug generator”小部件,它可以从标题字段自动生成一个slug。有没有一种方法可以自动为slug添加前缀?例:
当前:帖子标题->帖子标题
我想要的:帖子标题->帖子/帖子标题
我知道我可以手动添加post/,但有时我会忘记。我解决了它。我克隆并修改了原始“”扩展名
function setSlug (slug) {
var preSlug = 'post/' + slug
input.value = preSlug
slugFie
for似乎表明我们可以对提要中显示的帖子数量设置限制:
{
// Create a default RSS feed. Others may be added by using the format below.
feeds: [
{
query: `
{
allMarkdownRemark(
limit: 1000,
sort: {
order: DESC,
我在做一个盖茨比的项目。
有创造讨论空间的功能。
例如:如果我创建了一个新房间,我希望有如下所示的新路线。(具有唯一的房间id)
我如何为盖茨比动态创建路线?
在Gatsby中,正常的动态路由在Gatsby Gatsby.node.js文件中完成。通过createPage函数。
但在这种情况下,我必须在源文件而不是配置文件中创建新路由。
请帮帮我。盖茨比是一个静态站点生成器。您不能像https://www.discussion.com/room/d3e353在用户请求期间,即在服务器上运行。为此
上一页 1 2 3 4 5 6 ...
下一页 最后一页 共 14 页