首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >gatsby-ssr.js有什么作用?

gatsby-ssr.js有什么作用?

原创
作者头像
Learn-anything.cn
发布于 2021-12-02 08:56:42
发布于 2021-12-02 08:56:42
1.9K0
举报
文章被收录于专栏:learn-anything.cnlearn-anything.cn
一、简介

Gatsby 编译完成后,会为每个页面生成对应的 HTML 文件。而 gatsby-ssr.js 文件中提供了一些API,用于编译完成之前修改这些 HTML 的内容。

二、API 说明
1、onRenderBody
  • 功能:生成HTML之前,修改一些body信息。
代码语言:txt
复制
  const React = require("react")
  const Layout = require("./src/components/layout")
  // Adds a class name to the body element
  exports.onRenderBody = ({ setBodyAttributes }, pluginOptions) => {
代码语言:txt
复制
setBodyAttributes({
代码语言:txt
复制
  className: "my-body-class",
代码语言:txt
复制
})
代码语言:txt
复制
  }
2、wrapPageElement
  • 功能:用于plugin,给元素增加一个父容器。
代码语言:txt
复制
  const React = require("react")
  const Layout = require("./src/components/layout")
  // Wraps every page in a component
  exports.wrapPageElement = ({ element, props }) => {
代码语言:txt
复制
return <Layout {...props}>{element}</Layout>
代码语言:txt
复制
  }
三、重要规则
1、一致性

gatsby-ssr.js 和 gatsby-browser.js 这两个文件中都提供了这两个API:wrapPageElement 和 wrapRootElement 。所以要保持两个文件中这两个API的代码一致性。

四、参考文档

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

目录
  • 一、简介
  • 二、API 说明
    • 1、onRenderBody
    • 2、wrapPageElement
  • 三、重要规则
    • 1、一致性
  • 四、参考文档
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档