【項目記錄】我的站點by Gatsby

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

工具推薦

• favicon生成

  https://www.favicon-generator...

• 圖標

  https://www.flaticon.com/ - 優質的免費圖標

TODO

• i18n目前沒法在page層使用intl對象,考慮i18next替代

DOING

• blog遷移到站點內部

DONE

項目倉庫：https://github.com/curlywater...
線上效果：https://curlywater.netlify.com