盖茨比使用自定义 javascript

Question

所以我想在我的 Gatsby 项目中使用这些脚本：

<script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"></script>
<script>
  glowCookies.start('en', { 
      style: 1,
      analytics: 'G-FH87DE17XF', 
      facebookPixel: '990955817632355',
      policyLink: 'https://link-to-your-policy.com'
  });
</script>

（来自 https://github.com/manucaralmo/GlowCookies）

我尝试将它与 react-helmet 一起使用：

<Helmet>
  <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"></script>
  <script>
      glowCookies.start('en', { 
          style: 1,
          analytics: 'G-FH87DE17XF', 
          facebookPixel: '990955817632355',
          policyLink: 'https://link-to-your-policy.com'
      });
  </script>
</Helmet>

但是我收到这个错误：

  41:17  error  Parsing error: C:\(...)\layout.js:     
Unexpected token, expected "}" (41:17)

  39 |     <script>
  40 |         glowCookies.start('en', {
> 41 |             style: 1,
     |                  ^
  42 |             analytics: 'G-FH87DE17XF',
  43 |             facebookPixel: '990955817632355',
  44 |             policyLink: 'https://link-to-your-policy.com'

所以只添加第一个脚本标签就可以了，但不能创建它的实例。

Answer 1

这样包装：

<Helmet>
  <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"/>
  <script>
    {`glowCookies.start('en', {
      style: 1,
      analytics: 'G-FH87DE17XF',
      facebookPixel: '990955817632355',
      policyLink: 'https://link-to-your-policy.com'
    })`}
  </script>
</Helmet>

将它用作模板文字就可以了。

Answer 2

这可能不是实现自定义 javascript 的最佳方式，但这是最适合我的方式。所以不需要 react-helmet，只需使用 Gatsbys 内置函数：

盖茨比-ssr.js

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"
      src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"
      defer
    />,
    <script key="glowCookies.min.js" src="/js/glowCookies.js" defer />,
  ])
}

/static/js/glowCookies.js

glowCookies.start('en', {
   style: 1,
   analytics: 'G-FH87DE17XF',
   facebookPixel: '990955817632355',
   policyLink: 'https://link-to-your-policy.com'
})

盖茨比使用自定义 javascript

Gatsby use custom javascript

reactjs

gatsby

react-helmet