Gatsby -改变了初始HTML

Question

我正在用了不起的盖茨比框架(版本2.16.1)构建登陆页面。

除了我无法找到在加载任何脚本之前对正在加载的HTML进行更改的方法(“过度折叠”初始HTML)，一切都会完美地工作。

例如，如果我在盖茨比( Gatsby )中更改HTML的背景色，用户可以在“过度折叠”初始HTML显示后最多等待5秒，直到应用背景颜色。

我知道gatsby-browser.js和制作全球CSS文件的能力，但这对我来说毫无用处，因为我对每个登陆页面都使用不同的颜色或背景图片。

我的问题是:我是否可以影响盖茨比中的第一个加载的HTML (每个Gatsby页面不同)或反应？

说明:我把背景颜色涂成黄色，但流程是这样的-

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

Answer 1

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

答案是在onRenderBody文件下使用一个名为gatsby-ssr.js的函数，如本文中提到的：https://www.gatsbyjs.org/docs/custom-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',
    },
  });
}

有趣的是，我之前已经碰到过这篇文章，但我认为它并不相关，因为它谈到了服务器端呈现，而且我知道盖茨比没有服务器。在@ksav的评论之后，我重新阅读了它，并理解服务器端呈现是在Gatsby的构建过程中发生的，而不是在运行时(即当用户进入登陆页面时)。

Answer 2

我是否可以影响盖茨比中的第一个加载的HTML (每个盖茨比页面不同)或反应？

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

有关如何在React中处理内联样式，请参见React 文档。

Gatsby教程的一个示例：

src/pages/index.js

import React from "react"
export default () => (

  {/* inline CSS */}
  <div style={{ margin: `3rem auto`, maxWidth: 600 }}> 

    <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>
  </div>
)