标签: gatsby

我正在根据这个狮子座入门者开发我的盖茨比博客/网站。做了一些更改以添加适合我需要的功能，包括使用文件来编写页面和帖子，以便我可以在 MD 中添加 JS。.mdx

当工作和预览网站时，gatsby develop一切看起来都很好。现在，在进行生产时，.mdx不会渲染文件内组件中使用的 Tailwind 类。尝试将global.css包含的文件导入@tailwind utilities到 mdx 中，但没有成功。类出现在检查器中，但不在 CSS 中显示任何样式。

当 Tailwind 类在 tsx 或 js 文件中使用时，它们可以工作。但当我在 mdx 文件中使用这些类设置样式的组件中使用它们时，情况就不同了。

那么在构建产品站点和开发站点时真正发生了什么变化呢？我真的不知道下一步要尝试什么，因为没有任何错误或警告。

这是该网站的存储库。这是一个按钮不选择 Tailwind 类的示例。

为什么会出现这种情况？

谢谢你们！希望我带来了足够的信息。

干杯!

我有一个 Gatsby 网站，并且正在实施 GDPR 同意横幅。我想将状态存储在本地存储中，其中包含与用户是否接受 GDPR 条款相关的“true”或“false”字符串。

例如，用户第一次访问该网站。在本地存储中，有一个“GDPR_Accepted”键设置为“false”。如果用户不接受主页上的 GDPR 条款，则横幅将继续显示在用户访问的每个页面上。当用户单击接受时，GDPR_Accepted 值设置为“true”，并且我的 React 组件中的三元运算符应用隐藏横幅的 CSS 类。

因为我使用的是本地存储，所以即使用户离开页面并稍后返回（假设他们没有清除浏览历史记录），“true”值也应该持续存在。问题出在盖茨比身上。Gatsby 使用服务器端渲染，当用户接受 GDPR 条款并离开网站并返回时，GDPR 值将重置为“false”。当设置为“true”时，Gatsby 无法保留之前的本地存储数据。

如何在 Gatsby 项目中将数据保存在本地存储中？仅使用 React 状态来存储用户是否接受 GDPR 条款是否更有意义？

我正在尝试将 HubspotForm 实施到我的 SAP 中。它呈现，但当我单击提交按钮时，我收到错误“hbspt.forms.create 中的 onFormSubmit 函数需要 jQuery。它没有运行。” 我怎样才能强迫这个？

我的组件：

import React from "react"
import style from "./bottomForm.module.sass"
import BackgroundImage from "gatsby-background-image"
import classNames from "../../helpers/classNames"
import HubspotForm from "react-hubspot-form"
import { graphql, useStaticQuery } from "gatsby"

const BottomForm = ({ image, title, children }) => {
  const defaultImage = useStaticQuery(graphql`
    query {
      form_bg: file(relativePath: { eq: "common/form_bg.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1920) {
            ...GatsbyImageSharpFluid_noBase64
          }
        }
      }
    }
  `)

  return (
    <BackgroundImage
      Tag="section"
      className={style.section}
      fluid={image || …

使用 Gatsby 插件时有没有办法动态进行 graphQL 查询gatsby-source-filesystem？

例如，我希望完成以下任务：

return (
    <StaticQuery
      query={graphql`
        query chartQuery {
          all${fileKey}Json {          <------- Is this a thing?
            nodes {
              name
              data
              color
            }
          }
        }
      `}

理想情况下，我想将 fileName 作为 prop 传递。

我目前正在这样做：

class Checked extends React.Component {
    render() {
        return (
            <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
            </svg>
        );
    }
}

但是我想做这样的事情：

import imgTable from '../img/catering_table.svg'

class Checked extends React.Component {
  render() {
      return imgTable;
  }
}

为什么这不起作用？我在这里返回变量而不是实际内容吗？我本以为两者是等效的。

PS：Webpack设置正确，我在该文件的其他地方使用了导入，所以不是那样。（顺便说一下，我在这里使用GatsbyJS）

我正在玩prismic.io作为盖茨比网站的内容来源,我无法弄清楚为什么我无法输出某些数据.

来自gatsby的graphql工具返回所有正确的数据,因此查询本身似乎很好:

export const pageQuery = graphql`
query PageQuery {
    allPrismicDocument {
      edges {
        node {
          data{
             product_image {
              url
            }
            product_name {
              text
            }
            product_price
            product_description {
              text
            }
          }
          }
        }
      }
    }
`

现在在页面内部,添加以下值时:

{node.data.product_price}
{node.data.product_image.url}

它工作正常并输出正确的数据.但是,当我尝试:

{node.data.product_name.text}
or
{node.data.product_name}

我什么都没得到.搜索到处都是,但是没有太多资源可以将这两个工具一起使用:/

任何指针将非常感谢:)

我正在使用GatsbyJS构建个人网页。我有多个页面，两个相关的页面是项目/投资组合页面和博客页面。

我在博客页面上设置了gatsby，它从特定的文件夹中提取markdown文件，并使用模板在博客页面上显示它们。我想以类似的方式在项目/项目页面上显示我的项目。我的文件夹结构如下：

-src
 -pages
  -BlogPostOne
  -BlogPostTwo
  projects.js
  blog.js
 -templates
  BlogPostTemplate.js
  ProjectTemplate.js
 -projects
  -project1
  -project2

我希望项目页面从项目文件夹中获取项目降价文件并使用项目模板显示它们

博客页面从pages文件夹中获取博客文章markdown文件，并使用博客文章模板显示它们，效果很好。

我基本上使用了与捕获具有不同变量名和路径的博客文章文件相同的代码，但是它不起作用。盖茨比有可能做到这一点吗？我已经搜索了他们的文档，但找不到与我尝试执行的操作类似的操作。有没有人与盖茨比做过类似的事情？

我在ubuntu 16.04盒子上安装了gastby 2

gatsby new netlifycms2 https://github.com/netlify-templates/gatsby-starter-netlify-cms 

没有错误.

但是,当我访问/ admin并单击使用netlify登录时,我收到消息

无法从/.netlify/identity加载设置

我假设我需要这个文件,但没有找到任何有关如何安装它的说明.

我手动在static/admin/.netlify/identity中添加了一个空白身份文件,然后运行gatsby build和gatsby serve但是错误消息仍然存在

我已经完成了一些关于身份验证的阅读,并对这个博客提供了后端建议:

"一旦启用身份服务,GoTrue微服务的托管版本允许您在/.netlify/identity下为任何Netlify站点添加用户注册和管理."

我注意到gotrue cms.js安装在admin目录和其他一些目录中

./public/admin/cms.js
./node_modules/netlify-cms/dist/cms.js
./node_modules/gatsby-plugin-netlify-cms/cms.js
./src/cms/cms.js

netlify identity插件是否存在此文件未创建的错误？

 System:
    OS: Linux 4.4 Ubuntu 16.04.5 LTS (Xenial Xerus)
    CPU: x64 Intel(R) Xeon(R) CPU E5-2650 v4 @ 2.20GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 10.10.0 - /usr/bin/node
    Yarn: 1.9.4 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  npmPackages:
    gatsby: ^2.0.0 => 2.0.1 
    gatsby-plugin-netlify: ^2.0.0 => …

我正在使用带有插件的gatsby gatsby-source-filesystem并将gatsby-transformer-remarkmarkdown文件显示为页面，如官方文档中所述。

效果很好，但是我正在寻找一种方法，将默认类添加到从markdown转换的所有元素中。

假设我希望每个<h1>元素都具有的类title，并且默认情况下<h2>元素要具有的类subtitle。

我设法通过进行了类似的操作gatsby-remark-attr，但是我只能以编程方式在markdown文件中添加类。看起来像这样：

# My markdown heading
{.title}

## Subtitle
{.subtitle}

转换为

# My markdown heading
{.title}

## Subtitle
{.subtitle}

我正在寻找一种方法，为每个元素定义一次默认类，并自动应用它们，而不必在markdown文件中指定它们。

我正在检查用户是否在小于768像素的设备上，如果我要将isTop设置为false。我遇到了一些问题。一切看起来都还不错，但我不断收到此错误消息：

TypeError：_this2.state.isTop不是函数

我正在使用的是：

componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
    document.addEventListener('scroll', () => {
        const isTop = window.scrollY < window.innerHeight - 50;
        if (isTop !== this.state.isTop) {
          this.setState({ isTop })
        }
    });

    this.checkWidth = () => {
        const match = window.matchMedia(`(max-width: 768px)`);
        if (match) {
            this.state.isTop(false);
        }
    };

    this.checkWidth();
    window.addEventListener('resize', this.checkWidth);
}

任何帮助，将不胜感激