logo
使用教學登入

整合 gatsby.js

要將悄悄訊息嵌入您的 gatsby 網站非常簡單

創建悄悄訊息專案

  1. 註冊悄悄訊息後,並進入悄悄訊息的主後台
    1. notion image
 

2. 創建新專案後,點進「如何使用」

notion image
 

3. 複製這段程式碼

notion image

嵌入 gatsby.js 專案

方法1: 嵌入客製化 html.js

首先請先依據 gatsby 官方的 Customizing html.js 創建 html.js 檔案在你的 gatsby.js 專案中

接著在 html.js</body> 之後嵌入悄悄訊息的 script

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
      <script src="https://cdn.ciaociao.email/widget.js" data-pid="xKIJOd_pEw" />
    </html>
  )
}

方法2: 利用 react-helmet 嵌入

選擇你想要嵌入悄悄訊息的頁面,並利用 react-helmet 寫入悄悄訊息的 script

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

class IndexPage extends React.Component {
  render() {
    return (
      <div className="application">
        <Helmet>
	        <script src="https://cdn.ciaociao.email/widget.js" data-pid="xKIJOd_pEw" />
        </Helmet>
      </div>
    )
  }
}
 

打開你的 gatsby 專案後,就會看到悄悄訊息被成功嵌入你的網站

notion image
© Copyright 2021 悄悄訊息