Gatsby.js - 如何在 Gatsby.js 的页面头部注入特定的 CSS/JS答案

【问题标题】：Gatsby.js - How to inject specific CSS/JS in head section of page in Gatsby.jsGatsby.js - 如何在 Gatsby.js 的页面头部注入特定的 CSS/JS
【发布时间】：2021-07-28 10:35:01
【问题描述】：

我目前正在做一个 Gatsby.js 项目。

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

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

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

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

任何建议/提示/帮助将不胜感激，因为我更愿意坚持这一点。

亲切的问候，

罗尼

【问题讨论】：

请分享一些代码。

标签： gatsby gatsby-plugin

【解决方案1】：

将脚本和样式表放入<head>s 或<body>s 的方法之一是使用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_" />,
    ]);

}

【讨论】：

感谢您的回复。这是有道理的，我们如何将外部 css/脚本添加到 head 部分。我更感兴趣的是 Gatsby 本身如何识别在页面的 head 部分内添加 CSS inline。我不确定 Gatsby 是否在页面的 head 部分添加了 /src/ 目录中的关键脚本。如果您或其他人能够解释这一点，那将非常有帮助。非常感激。罗尼