用gatsbyjs可以快速製作出react static網頁，
但是要將google adsense 加入時發現，default設定沒有放head的方式，
所以官方也提供類似的方法。
|
1 2 |
# 進入專案資料夾下，執行複製指令 $ cp .cache/default-html.js src/html.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$ 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/