时间戳

首页 > 解决方案 > Gatsby - 更改折叠初始 HTML

html - Gatsby - 更改折叠初始 HTML

问题描述

我正在使用令人惊叹的 Gatsby 框架（版本 2.16.1）构建登录页面。

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

例如，如果我在 Gatsby 中更改 HTML 的背景颜色 - 用户最多可以等待 5 秒，因为显示“折叠”初始 HTML，直到应用背景颜色。

我知道gatsby-browser.js以及制作全局 CSS 文件的能力，但这对我来说没有用，因为我为每个登录页面使用不同的颜色或背景图片。

我的问题是：我可以在 Gatsby 或 React 中影响第一个加载的 HTML（每个 Gatsby 页面不同）吗？

插图：我把背景颜色涂成黄色，但流程是这样的——

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

标签： htmlreactjsgatsby

解决方案

@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',
    },
  });
}

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

推荐阅读