【專案記錄】個人站點by Gatsby

摘要： SEO 做什麼 設定document head內容，比如title, favicon, description 新增meta-tags，比如openGragh, Twitter Card 怎麼做 方式一：建立依賴helmet的SEO元件 ，在page中引用元件，通...

SEO

做什麼

設定document head內容，比如title, favicon, description

新增meta-tags，比如openGragh, Twitter Card

怎麼做

方式一：建立依賴helmet的SEO元件 ，在page中引用元件，通過props自定義meta

方式二：自定義html.js ，修改head內容管理全域性meta

在當前專案中，使用方式一管理全域性和自定義meta

Tips

修改favicon

需要引用favicon檔案覆蓋預設設定

import favicon from "../../static/favicon.ico";
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s · ${data.site.siteMetadata.title}`}
link={[
{
rel: `shortcut icon`,
href: `${favicon}`,
type: `image/x-icon`
}
]}
/>

i18n

做什麼

為基礎內容新增多語言支援

怎麼做

• 方式一：React-intl + Context API

  • 藉助Context API實現語言切換。Context Provider提供lang和toggleLanguage屬性，Context Consumer接收並使用Provider提供的屬性(可將Consumer封裝為高階元件)
  • React-intl提供語言格式化

• 方式二：React-i18next + gatsby-plugin-i18next

  • react-i18next提供已封裝好的高階元件
  • gatsby-plugin-i18next做初始化處理

方式一在Layout內包裹Provider，在page中無法使用高階函式呼叫Intl物件

程式碼規範

Gatsby預設使用Prettier做程式碼格式化，webpack中攜帶eslint-loader，可通過gatsby-plugin-eslint外掛自定義設定。若想用eslint代替Prettier做格式化功能，可按照官方文件走https://www.gatsbyjs.org/docs...

當前專案配置

• editorconfig 協助開發工具做簡單格式化，覆蓋開發工具預設格式設定，如縮排格式，縮進佔位等
• prettier 格式化程式碼，統一程式碼風格和樣式，代替eslint --fix的作用。搭配IDE外掛使用
• eslint 檢查程式碼規範

https://juejin.im/entry/5b10b...

樣式管理

官方提供的幾種方案

1. CSS Modules：CSS檔案作為模組匯入元件，賦值給一個物件，元件中使用物件屬性應用樣式。簡單介紹
2. Typography.js：通過JS生成不同主題的排版格式 -DEMO

3. CSS-in-JS Glamor：通過元件上的css屬性定義樣式，與元件緊密耦合

   import React from "react"
   
   const Container = ({ children }) => (
   <div css={{ margin: `3rem auto`, maxWidth: 600 }}>{children}</div>
   )

4. CSS-in-JS Styled Components

   import React from "react"
   import styled from "styled-components"
   
   const Container = styled.div`
   margin: 3rem auto;
   max-width: 600px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   `
   
   export default () => (
   <Container>
   <h1>About Styled Components</h1>
   </Container>
   )

5. 全域性樣式，以傳統css檔案形式存在，在元件中引入或者在gatsby-browser.js中引入

試著玩一玩CSS-in-JS Glamor、CSS Modules

GraphQL資料查詢

GraphQL允許開發者使用資料結構宣告查詢對應結構的資料，查詢語法支援限制、排序、篩選、格式化

部署

用gitpage的方式已經有點老了，不如試試看Netlify。

Netlify：持續整合工具，從遠端倉庫自動部署靜態站點，支援自定義域名，HTTPS，全域性CDN.

Gatsby整合很方便

Plugins列表

• gatsby-plugin-root-import

  設定webpack解析根目錄，來支援使用絕對路徑匯入模組

• gatsby-plugin-react-helmet

  支援React Helmet，React Helmet是用來控制document head的元件，可在任意位置使用

• gatsby-plugin-manifest

  新增manifest檔案，https://www.gatsbyjs.org/docs...

• gatsby-plugin-i18next

  支援react-i18next