在Gatsby中添加脚本标签

本文介绍了在Gatsby中添加脚本标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个盖茨比网站。要在该网站中启用推送通知，我必须使用以下代码：

<!-- Begin DigitalPUSH code -->
<script>
var DGPkey = "M3E2cGU5d1hPQWl2VTRTeG9ZYU8xa0l1YW8yMWVmR3FKbFFjMGNLNllIbz0="; //mandatory
var DGPnativerequest = "0";
var DGPdelay = "10000";
var DGPmtype = "overlay";
var DGPtheme = "13e3b4";
var DGPtitle = "!!!  !!!";
var DGPmessage = "!!!  !!!";
var DGPallowbutton = "";
var DGPrejectbutton = "";
var DGPbgimage = "";
var DGPinpageads = "0";
</script>
<script type="text/javascript" src="//cdn.digitalpush.org/lib.js"></script>
<!-- End DigitalPUSH code -->

我必须将此代码放在标记之前。我尝试了互联网上的几种方法，但似乎都不管用。有人能告诉我怎么做吗？

我的网站模板：https://github.com/Tahsin007/classsed-gatsby-blog

提前感谢。

推荐答案

摘自关于using client-side packages/librares的盖茨比文档。我会提出以下建议。

使用Reaction(以及Gatsby)，您可以通过使用<Helmet>标记轻松实现这一点。基本上，它允许您将<scripts>(或其他元数据)放入编译后将放入<head>中的任何组件中。因此，在您的情况下：

    import React, {useEffect} from "react"
    import Helmet from "react-helmet"

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

    const AnyPage = () => (
    useEffect(()=>{
    var DGPkey = "M3E2cGU5d1hPQWl2VTRTeG9ZYU8xa0l1YW8yMWVmR3FKbFFjMGNLNllIbz0=";
    var DGPnativerequest = "0";
    var DGPdelay = "10000";
    var DGPmtype = "overlay";
    var DGPtheme = "13e3b4";
    var DGPtitle = "!!!  !!!";
    var DGPmessage = "!!!  !!!";
    var DGPallowbutton = "";
    var DGPrejectbutton = "";
    var DGPbgimage = "";
    var DGPinpageads = "0";
},[])
        return <Layout>
          <SEO title="AnyPage" />
          <Helmet>
            <script src="//cdn.digitalpush.org/lib.js"/>
          </Helmet>
        <div>Dummy content</div>
        </Layout>
    )

    export default AnyPage

您可以在their documentation中找到有关<Helmet>标记及其用法的更多信息。

这里是在我的本地机器上测试的屏幕截图：

这篇关于在Gatsby中添加脚本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！