Google Adsense | SDT 攻城獅區 https://sdt.hameba.tw 由Steven, Der, Ted 三位高級打字員所組成，是三位工程師(攻城獅)所維護的技術分享平台，或許偶爾會分享一些日常，有任何問題或是錯誤的部分，歡迎留言告訴我們！ Fri, 27 Dec 2019 06:15:05 +0800 zh-TW hourly 1 https://wordpress.org/?v=5.3 https://sdt.hameba.tw/wp-content/uploads/2020/02/hameba_favicon-150x150.png Google Adsense | SDT 攻城獅區 https://sdt.hameba.tw 32 32 Gatsbyjs 新增內容於 head https://sdt.hameba.tw/381/?utm_source=rss&utm_medium=rss&utm_campaign=gatsbyjs-%25e6%2596%25b0%25e5%25a2%259e%25e5%2585%25a7%25e5%25ae%25b9%25e6%2596%25bc-head https://sdt.hameba.tw/381/#respond Fri, 27 Dec 2019 06:14:36 +0000 https://sdt.hameba.tw/?p=381 用gatsbyjs可以快速製作出react static網頁， 但是要將google adsense 加入時發 …

閱讀全文〈Gatsbyjs 新增內容於 head〉

The post Gatsbyjs 新增內容於 head first appeared on SDT 攻城獅區.]]> 用gatsbyjs可以快速製作出react static網頁，

但是要將google adsense 加入時發現，default設定沒有放head的方式，

所以官方也提供類似的方法。

# 進入專案資料夾下，執行複製指令
$ cp .cache/default-html.js src/html.js

$ nano /src/html.js

# 內容如下
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>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

將想放入的GA, Google Adsense都可以放入Head裡面，

下次build product就可以看見Head有自定義的內容。

 

Reference

https://www.gatsbyjs.org/docs/custom-html/

The post Gatsbyjs 新增內容於 head first appeared on SDT 攻城獅區.]]> https://sdt.hameba.tw/381/feed/ 0