标签: gatsby

我们从Wordpress后端引入一些帖子,有些有图片(在ACF字段中),有些则没有.问题是盖茨比根据它收到的第一个节点推断出架构.如果它收到没有图片的节点,那么架构是错误的.

Gatsby的GraphQL架构来自哪里？ 使用Gatsby,我们使用从不同来源获取数据的插件.然后,我们使用该数据自动推断GraphQL架构.

我们怎样才能为GraphQL/Gatsby指定一个总是包含图片的模式,如果它是空白的话,将'null'作为默认值？

{
  allWordpressWpTestimonial {
    edges {
      node {
        id
        title
        acf {
          photo_fields {
            photo {
              id
              localFile {
                childImageSharp {
                  sizes {
                    src
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

在上面的例子中,有时候"照片"不存在,它会破坏一切......

盖茨比配置:

const innertext = require('innertext')
const url = require('url')

module.exports = {
  siteMetadata: {
    title: 'Test',
    googleMapsAPIKey: 'xxxxxx',
    adminBaseUrl: '123.123.123',
    adminProtocol: 'http',
  },
  pathPrefix: '/web/beta',
  plugins: [
    'gatsby-plugin-react-next',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    'gatsby-plugin-svgr',
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: 'GOOGLE_ANALYTICS_TRACKING_ID',
      },
    },
    {
      resolve: …

我看到了以下解决方案：

import { ReactComponent as Img } from 'path/to/file.svg'

但在 Gatsby 中，这行不通。我知道存在用于此的插件，但也许可以更轻松地完成。

显然,这不是一件容易的事,html.js因为默认情况下模板文件中唯一改变的是头元标记和内容.

元标记由Helmet组件({head.title.toComponent()}和{head.meta.toComponent()})处理,模板内的HTML更改由React管理.(<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />)

然而,body标签超出了React的范围,这就是为什么当我从一个页面导航到另一个页面时,我无法弄清楚如何即时更改它.这正是我需要的,因为我想为每个页面应用不同的身体背景.

我知道我可以通过使用exports.onRouteUpdatein 来解决这个问题gatsby-browser.js,但是我希望即使在浏览器中禁用了JS,该类仍然存在.意味着即使我没有bundle.js文件导出,只是生成静态网站HTML,我希望它在那里.

我想通过本地化内容在世界各地的各个本地发布我的静态网站.

如何实现这一目标？

我正在部署我的网站 - 一个用GatsbyJS构建的静态网站 - 我的源图是迄今为止我最大的文件.我有3个~3MB的源图文件.总的来说,它们占我构建的70%.

• 我应该将它们部署到我的生产服务器吗？

• 源图是否仅由打开devtools的用户下载？

我有以下查询接收变量$tag.目前我正在根据其价值过滤结果frontmatter.keywords.keywords是一个逗号分隔的字符串,所以我需要使用正则表达式来检查其中是否包含$tag,但是我无法弄清楚如何将变量传递给正则表达式.如果我硬编码的值成正则表达式(如下面我已硬编码在码/example/中,过滤的工作原理,如果我取代.example与$tag我收到一个错误:

GraphQLError:变量"$ tag"从未在"TagQuery"操作中使用.

export const pageQuery = graphql`
  query TagQuery($tag: String) {
    allMarkdownRemark(
      limit: 100
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { keywords: { regex: "/example/" } } }
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          excerpt
          frontmatter {
            title
            keywords
            date
          }
        }
      }
    }
  }
`;

我应该如何$tag在正则表达式中使用？

我实际上更喜欢采用不同的方法并将标记添加为数组gatsby-node.js,但似乎没有任何基于数组值的过滤方法.

我正在尝试将外部嵌入代码添加到我的Gatsby页面.

我目前正在使用

import React from 'react'
import Link from 'gatsby-link'


let test ="<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>"

const ContactPage = () => (

    <div>
        <h1>ContactPage</h1>
        <div
            dangerouslySetInnerHTML={{ __html: test }}
          />
    </div> …

我正在使用gatsby-image处理自动处理不同的图像大小.它很棒.

但是,在gatsby-image 的文档中,一个示例使用imageSharpgraphql来获取不同的图像大小,而另一个示例使用childImageSharp.我很好奇两者之间有什么区别？

我认为它与任何一个gatsby-transformer-sharp或者有关gatsby-plugin-sharp,但这些插件的文档也没有任何信息.

在 React 中使用像 Hugo 这样的东西是否可能/理想？我知道盖茨比，但雨果也能工作。我对将两者结合起来的知识有限，但我的理解是 Hugo 将用于您所有的模板和静态网页，然后 React 将用于 Web 应用程序类型的事物，并在其中某处使用无头 CMS？有经验的人可以评论为什么 Hugo 或 Gatsby 有时适合与 React 一起使用吗？或者框架之间关系的概述？

这是一个奇怪的问题。我正在将现有站点转换为 Gatsby（我使用 安装的 Node 包npm i -g gatsby-cli），当我运行时gatsby develop出现错误：

错误：ENOENT：没有这样的文件或目录，stat '/home/me/.steampath'

现在这里的背景故事是，在 Linux Steam 上，.steampath出于某种愚蠢的原因，故意安装了一个错误的符号链接。但我无法理解的是为什么/如何运行特定的 Node 应用程序（Gatsby）会导致此错误，这与我的项目或 Gatsby 无关......运行其他 Node 应用程序时不会。

我已经grep通过我的项目目录做了一个：steam没有出现在任何文件中。同样，我搜索了我的环境 ( env | grep steam)，并且没有指向该文件的环境变量。

那么任何人都可以回答：为什么运行 Gatsby 会导致位于我的主文件夹中项目之外的完全不相关的符号链接中的错误？

我想 Gatsby 一定正在运行某种系统命令，但我什至无法想象它可以运行什么来扫描我的主目录并抱怨符号链接损坏。

PS 这个错误出现在最后，在其他错误之后，所以它看起来不像是导致gatsby develop失败那么多，因为它在最后报告了错误。

PPS 删除错误的符号链接确实可以解决问题（虽然我不知道 Steam 会怎么想）……但随后我又收到了另一个错误，关于我的主文件夹中的另一个损坏的符号链接（我不能因为那个而责怪 Steam）。因此，一些节点/盖茨做的是导致我的家目录的扫描，以及任何破符号链接投诉发现！

删除所有损坏的符号链接后，Gatsby 将正常工作。太奇怪了！