时间戳

首页 > 解决方案 > 包含 gatsby 头盔脚本

javascript - 包含 gatsby 头盔脚本

问题描述

我不能在头盔盖茨比中包含脚本。我要包含的脚本是这样的：

  <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>

将如何解决？

标签： javascriptreactjsgatsbyreact-helmethelmet.js

解决方案

你在那里混合了很多东西。如果您的资产是内部资产，例如您在第一个和第二个片段中的资产，请将其添加到您的/static文件夹中并像这样导入：

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

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

请注意代码中的空格，您应该跟踪它们。

如果您的资产是外部第三方资产，您也可以将它们导入您的<Helmet>，但不使用withPrefix内部函数。只是：

<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>
)

推荐阅读