Question

我正在使用Gatsby，需要在其他插件之前在标头中添加脚本。

如果我通过gatsby-ssr.js

添加它

exports.onRenderBody = ({ setHeadComponents }) => setHeadComponents([#MY-SCRIPT#]);

最后被添加。

如何在其他插件之前添加它？

Answer 1

如果可以使用gatsby-ssr.js标签，为什么要使用<Helmet>文件，也许适合您。您只需要在任何组件中像这样使用它：

import React from "react"
import Helmet from "react-helmet"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage= () => (
    <Layout>
      <SEO title="Index page" />
      <Helmet>
        <script src="https://whatever.com" type="text/javascript"/>
        <script src="https://whatever2.com" type="text/javascript"/>
      </Helmet>
    </Layout>
)

export default IndexPage

上面的代码段将以您放置脚本的顺序将脚本加载到<head>标记中。

Answer 2

除了onRenderBody以外，请使用onPreRenderHTML对脚本重新排序。

exports.onRenderBody = ({ setHeadComponents }) =>
  setHeadComponents([
    <script key='myscript' src='...' />
  ]);

exports.onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents()
  // TODO: find your component based on key, then move it on top with splice.
  const orderedComponents = reorder(headComponents)
  replaceHeadComponents(orderedComponents)
}

有关更多信息，请。

gatsby ssr-在其他插件之前将脚本添加到标头

2 个答案: