仅在Gatsby中的特定页面上加载Snipcart

Question

我在Gatsby中使用Snipcart插件，但脚本到处都会加载。有没有可能用某种函数只在一个特定的页面上触发脚本，而不是整个页面？

下面是我在我的Gatsby-config.js文件中使用的选项

{
      resolve: "gatsby-plugin-snipcart",
      options: {
        apiKey: process.env.SNIPCART_API,
        autopop: true,
        js: "https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.js",
        styles: "https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.css",
        jquery: false,
      },
    },

Answer 1

你应该看看gatsby-plugin-snipcartv3。我相信gatsby-plugin-snipcart已经被弃用，并且不能与Snipcart v3一起工作。

但据我所知，没有办法告诉插件只在特定页面上加载脚本。

Answer 2

你可以直接使用Snipcart，而不是使用插件，以对其进行更多的控制。

假设你有一个包装页面内容的layout.js文件，你可以有一个loadSnipcart标志，它只在你需要的时候加载Snipcart文件。

下面是一个例子：

layout.js

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

export default ({ loadSnipcart, children }) => {
    const Snipcart = () => {
        if (!loadSnipcart) return null

        return (
            <Helmet>
                <script
                    src="https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.js"
                    type="text/javascript"
                />
                <link
                    href="https://cdn.snipcart.com/themes/v3.0.8/default/snipcart.css"
                    rel="stylesheet"
                />
            </Helmet>
        )
    }

    return (
        <div id="main-content">
            <Snipcart />
            {children}
        </div>
    )
}

shop.js

import React from "react"
import Layout from "./layout"

export default () => {
    return (
        <Layout loadSnipcart>
            <h1>Welcome to my shop !</h1>
        </Layout>
    )
}

index.js

import React from "react"
import Layout from "./layout"

export default () => {
    return (
        <Layout>
            <h1>This page doesn't load Snipcart</h1>
        </Layout>
    )
}