标签: gatsby

我正在使用 Gatsby 和 React 开发一个网站。而且我发现每次刷新页面，都会加载 1.6 MB / 1.6 MB 的资源。我是网络开发的新手，所以我真的不知道这是下载很多还是只是中等数量。

但是我确实注意到一个问题，即在我在 Netlify 上部署我的网站后，字体文件被请求两次，因此它被下载两次。您可以在屏幕截图中看到请求了两个 Roboto-Light 文件。

这是我在代码库中包含字体文件的方式。

首先我设置了一个 webpack 别名 '@fonts': path.resolve(__dirname, 'src/fonts'),

然后在src/styles/fonts.js我有

import RobotoLight from '@fonts/Roboto/Roboto-Light.ttf';
export { RobotoLight};

最后在我的src/styles/GlobalStyle.js我有

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
@font-face {
  font-family: 'Roboto';
  src: url(${fontFamilies.RobotoLight}) format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: auto;
}
...

所以每当我需要应用这种RobotoLight字体时，我只需将元素设置font-family为Roboto.

我不知道为什么我的字体被下载了不止一次，我不知道这种包含字体的方式是否是最佳实践。我也想知道1.6 MB / 1.6 MB resources是不是太多了。

当您转到希望缓存的页面时，在页面上（从源插件）调用 touchNode 会导致以下错误：

类型错误：locationAndPageResources.pageResources 未定义

触摸节点调用：

// Code here checks if the page node in Gatsby cache is the same version 
// as backend version. If so 'touch it' and don't recreate.
await Promise.all(result.data.pages.map(async page => {
    const pageCacheKey = `cache-${page.url}`
    const cacheResult = await pageRecords.getKey(pageCacheKey)
    if (cacheResult) {
        const node = pageNodes.find(node => {
            if (!node.context)
                return
            return node.context.url == page.url
        })

        if (node) {
            if (node.context.lastPublishedAt == page.lastPublishedAt) {
              pageRecords.setKey(pageCacheKey, localPublishedAt)
              return touchNode({
                nodeId: node.id
              })
            }
        } …

我有一个需要在内部服务器上运行的站点。我无权访问该站点，我只是要进行 gatsby 构建并将公共文件夹提供给他们。但我所有的图像都是一团糟。这是正确的方法吗？为什么我的图像模糊

我想知道为什么我的 ACF 字段没有使用 gatsby-source-graphql 插件显示在我的 gatsby 应用程序中？当我使用 WP 插件：WP GraphiQL 时，我的 ACF 字段会出现，但在我运行 gatsby 应用程序时不会出现。我只能使用 gatsby-source-wordpress 导入 ACF 字段吗？？？其他一切似乎都出现了。我有一个自定义帖子类型，我使用没有问题，但 ACF 字段是问题所在。任何帮助都会很棒，谢谢，斯宾塞

它们出现在 WP 后端：

但是当 Gatsby 运行时不要出现：

这是我的 Gatsby 配置中的内容：

{
      resolve: `gatsby-source-graphql`,
      options: {
        // This type will contain remote schema Query type
        typeName: `WPGraphQL`,
        // This is field under which it's accessible
        fieldName: `wpgraphql`,
        // Url to query from
        url: `http://wpgraphql.local/graphql`,
      },
    },

我无法解决在 netlify 上构建 gatsby 站点的问题。几天以来，我收到以下错误：

3:17:52 PM: error UNHANDLED EXCEPTION Callback was already called.
3:17:52 PM: 
3:17:52 PM:   Error: Callback was already called.
3:17:52 PM:   
3:17:52 PM:   - async.js:16 throwError
3:17:52 PM:     [repo]/[neo-async]/async.js:16:11
3:17:52 PM:   
3:17:52 PM:   - async.js:2818 
3:17:52 PM:     [repo]/[neo-async]/async.js:2818:7
3:17:52 PM:   
3:17:52 PM:   - next_tick.js:132 _combinedTickCallback
3:17:52 PM:     internal/process/next_tick.js:132:7
3:17:52 PM:   
3:17:52 PM:   - next_tick.js:181 process._tickCallback
3:17:52 PM:     internal/process/next_tick.js:181:clock9

包.json

{
  "name": "gatsby-starter-netlify-cms",
  "description": "Example Gatsby, and Netlify CMS project",
  "version": "1.1.3",
  "author": "Austin Green",
  "dependencies": { …

在页面之间导航时，Gatsby 会重新渲染particlejs 画布。有什么办法可以防止这种情况发生吗？

这是一个显示正在发生的事情的代码和框https://codesandbox.io/s/fervent-rgb-07hk1

我正在构建一个 Gatsby 站点，并且该网站的菜单具有以下 HTML 结构：

<li className="menu-item current-menu-item">
  <Link to="/">Home</Link>
</li>
<li className="menu-item">
  <Link to="/contact">Contact</Link>
</li>

如您所见，活动类应用于<li>标签，而不是由<a>生成的标签<Link>。在 Vue 中，我们可以这样做：

<router-link to="/contact" tag="li">
  <a href="javascript:void">Contact</a>
</router-link>

该tag道具告诉router-link它应该呈现的元素列表项元素。这样，活动类将应用于列表项而不是子<a>标签。如何使用 Gatsby Link 实现相同的结果？我似乎无法在任何地方找到答案。谢谢你。

我有一个 GastbyJS 应用程序，我正在尝试在其上添加打字稿。我解决了大部分问题，但我无法让 css 模块使用它。

我的文件中有这个导入，效果很好：
import styles from "./card.module.css"

但是当我添加打字稿配置时，它说 Cannot find module './card.module.css'.ts(2307)

我尝试使用一些 gatsby 插件，但它们没有按预期工作。

整个代码在这里：github

我正在构建一个 Gatsby 站点并希望使用react-three-fiber. 我正在尝试向其中添加 Stats.js，只是为了监视（并了解它是如何工作的），就像大多数普通的 Three.js 项目一样。

• 我尝试使用react-stats，但它似乎已经过时：上次更新是 5 年前。在我发现“与 React 16 不兼容”的问题中，即使它似乎已修复，“需要导入 Proptypes”错误不断弹出。
• 我试着用react-canvas-stats，并争夺几个小时后，我不能让过去的老板错误“类型错误：目标不是构造函数”来自何处createInstance在node_modules/react-three-fiber/web.js:183。根据我的经验，我可能不应该弄乱node_modules.

我不确定使用包是否是最好的主意（或者如果我找不到更好的包），或者我是否应该尝试stats.js从原始存储库中添加（完全不知道从哪里开始） . 或者，如果首先添加毫无意义stats.js，我应该做一些完全不同的事情。或者，如果有一个非常明显的解决方案，我完全错过了！

无论如何，感谢所有答案！

我正在按照gatsby 教程安装 algolia。完成后gatsby build我得到

TypeError: Cannot read property 'addObjects' of undefined

我的src/utils/algolia.js档案

  const postQuery = `{
    posts: allMarkdownRemark(
      filter: { fileAbsolutePath: { regex: "/content/" } }
    ) {
      edges {
        node {
          objectID: id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt(pruneLength: 5000)
        }
      }
    }
  }`

  const flatten = arr =>
    arr.map(({ node: { frontmatter, ...rest } }) => ({
      ...frontmatter,
      ...rest,
    }))
  const settings = { attributesToSnippet: [`excerpt:20`] }

  const queries …