包含 gatsby 頭盔腳本

Question

我不能在頭盔蓋茨比中包含腳本。 我要包含的腳本是這樣的：

  <script src = "assets / vendor / jquery / jquery.min.js"> </script>

我試過這樣做，控制台給了我一個錯誤：

 import Helmet from "react-helmet";
    import {withPrefix} from "gatsby";
    
    <Helmet>
    <script src = {withPrefix ('masonry.js')} />
    </Helmet>

使用這種語法我也嘗試過，它給了我一個錯誤：

<Helmet>
  <script src = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type = "text / javascript" />
</Helmet>

將如何解決？

Answer 1

你在那里混合了很多東西。 如果您的資產是內部資產，例如您在第一個和第二個片段中的資產，請將其添加到您的/static文件夾中並像這樣導入它：

import { withPrefix } from "gatsby"
// ...

<Helmet>
    <script src={withPrefix('jquery.min.js')} type="text/javascript" />
</Helmet>

請注意代碼中的空格，您應該跟蹤它們。

如果您的資產是外部第三方資產，您也可以在<Helmet>中導入它們，但不使用withPrefix內部 function。 只是：

<Helmet>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type = "text / javascript" />
</Helmet>

像 React 中的任何其他組件一樣，您的<Helmet>標記必須用一些東西包裹以避免解析問題，請始終使用它：

const IndexPage = () => (
  <Layout>
    <Helmet>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript" />
    </Helmet>
  </Layout>
)