Gatsby.js - 如何在 Gatsby.js

问题描述

我目前正在从事 Gatsby.js 项目。

现在页面有一个页眉组件，它由一个汉堡菜单组件和导航以及一个页脚组件组成。

在性能选项卡下选择慢速3G在chrome上查看网站时，汉堡菜单不会切换，这意味着汉堡菜单的脚本不在头部组件内。

样式很好，因为我相信 Gatsby.js 会在 HEAD 中自动呈现关键 CSS。

所以，我的问题是，如何从页面头部内的组件/外部文件中注入关键的 CSS 或 JS。

任何建议/提示/帮助将不胜感激，因为我对此更感兴趣。

亲切的问候，

罗尼

解决方法

将脚本和样式表放入 <head> 或 <body> 的方法之一是使用 gatsby-ssr.js。

在 gatsby-ssr.js 中（通常位于项目根目录中），您可以执行以下操作：

import React from "react";

export function onRenderBody({ setHeadComponents,setPreBodyComponents,setPostBodyComponents }) {

    // Add something into <head>
    setHeadComponents([
        <script type="text/javascript" src="_YOUR_URL_HERE_" />,<script
        dangerouslySetInnerHTML={{
            __html=`
            // plain javascript code here
        `
        }}
        />,]);
    
    // Add something at the beginning of <body>
    setPreBodyComponents([
        <script type="text/javascript" src="_YOUR_URL_HERE_" />,]);
    
    // Add something at the end of <body>
    setPostBodyComponents([
        <script type="text/javascript" src="_YOUR_URL_HERE_" />,]);

}

gatsby gatsby-plugin

Gatsby.js - 如何在 Gatsby.js

问题描述

解决方法

相关问答