盖茨比-更改折叠初始HTML

我正在用了不起的盖茨比框架（版本2.16.1）构建登录页

---

一切都会很好地工作，除了我找不到在加载任何脚本之前对正在加载的HTML进行更改的方法（“over-the-fold”初始HTML）

例如，如果我在《盖茨比》中更改HTML的背景色，用户可以在显示“翻页”初始HTML后等待5秒钟，直到应用背景色

我知道gatsby browser.js和生成全局CSS文件的能力，但这对我没有用，因为我在每个登录页上使用不同的颜色或背景图片

我的问题是：我能影响Gatsby中第一个加载的HTML（每个Gatsby页面的方式不同）吗

插图：我将背景色涂成黄色，但流程如下-

HTML is first displayed (background=while) -->
3-5 seconds later -->
all scripts are loaded, and background changes to yellow

我可以影响盖茨比中第一次加载的HTML（每个盖茨比页面的方式不同）还是作出反应

是的，您可以直接在JSX React代码中使用。谷歌有你如何优化CSS交付，使你的上面的折叠内容总是样式正确。它可以归结为对折叠上方的所有组件使用内联CSS。使用内联CSS时，HTML元素在加载时总是会被设置样式，因为样式是HTML代码的一部分

有关如何处理React中的内联样式，请参见React

盖茨比教程中的一个示例：

src/pages/index.js
从“React”导入React
导出默认值（）=>(
{/*内联CSS*/}
嗨！我正在建立一个假的盖茨比网站作为教程的一部分！
)

@ksav在对问题的评论中回答了这个问题！谢谢大家!

答案是在

gatsby ssr.js

文件下使用名为

onRenderBody

的函数，如前面提到的文章所述：

---

有趣的是，我以前已经无意中看到了这篇文章，但我认为这篇文章与此无关，因为它讨论了服务器端渲染，而且我知道盖茨比是无服务器的。在@ksav的评论之后，我重新阅读了它，并了解到服务器端呈现是在Gatsby的构建过程中进行的，而不是在运行时（即当用户进入登录页时）。

“我找不到一种方法来更改加载任何脚本之前加载的HTML”-你在说什么HTML？索引HTML文件只是盖茨比脚本的包装，您不需要在这里设置任何样式，只需在组件中设置样式。“HTML首先显示（background=while）-->”，如果您的意思是“白色”，那么您误解了正在发生的事。白色背景不是你的网站，它只是一个空白页面，显示你的网站还没有加载。您可以尝试设置样式

。\uuuuu gatsby:{background:#f00；}

。这应该会给你一个红色背景。@JMadelaine，我完全理解你的评论，但是，我不能接受一个登录页的背景图像在5秒后才开始加载。难道没有办法改变包装器索引HTML吗？盖茨比不适合登录页面吗（在登录页面中，如此糟糕的性能是赚钱和输钱的区别）？顺便说一句-感谢您花时间回答！感谢您的回答，但是流程是：加载初始HTML->然后才加载Gatsby/React。您的答案确实提高了性能，但不会影响初始HTML，因此在下载组件的脚本并开始运行之前仍然会出现延迟。

exports.onRenderBody = ({setBodyAttributes,pathname,}) => {
  // Differentiate between the landing pages here
  switch(pathname) {
    case 'landing_page_a':
    case 'landing_page_b':
  }

  // Affect the HTML that gets loaded before React here
  setBodyAttributes({
    style: {
      backgroundColor: 'red',
    },
  });
}