使用亚马逊联盟在Gatsby Starter Blog中进行推广

在Gatsby Starter Blog中添加Amazon联盟的方法

我过去使用了一个能够嵌入亚马逊链接到Gatsby的插件，但是当链接数量增加时，它的运行变得很慢。因此，我决定先通过PA-API获取商品信息，然后将json加载到Gatsby中。

例如，可以使用类似下面的插件。

通过在使用Markdown编写的博客文章中添加标签来创建亚马逊商品链接。

<Amazon asin="B01EJ7AK5O" />

一开始使用的是 md，但后来改为使用 MDX，以便调用组件形式。

import Amazon from "../../../src/components/amazon"

收件方的组件接收ASIN，并通过JSON文件使用ASIN搜索商品信息并以HTML格式返回。

从Markdown中提取ASIN，使用PA-API获取ASIN对应的商品信息，并将其存入JSON文件中，最终将JSON文件传递给Gatsby。

使用组件接收asin，从GraphQL获取JSON并用asin进行过滤。

我/src/components/Amazon.js

import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Amazon = ({ asin }) => {
  const data = useStaticQuery(graphql`
query MyQuery {
  allJson {
    edges {
      node {
        Asin
        Booktype
        Category
        Contributor
        ImageURL
        Points
        Price
        Publisher
        Title
        URL
      }
    }
  }
}
  `)
  const book = data.allJson.edges

 var file = book.filter(word => asin.includes(word.node.Asin));

完成的博客

代码 (daima)

通过PA-API获取JSON数据的方法

在Gatsby中使用JSON

请参考。