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…
样式管理
官方提供的几种方案
CSS Modules：CSS文件作为模块导入组件，赋值给一个对象，组件中使用对象属性应用样式。简单介绍
Typography.js：通过JS生成不同主题的排版格式 – DEMO
CSS-in-JS Glamor：通过组件上的css属性定义样式，与组件紧密耦合
import React from “react”
const Container = ({ children }) => (
<div css={{ margin: `3rem auto`, maxWidth: 600 }}>{children}</div>
)
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>
)
全局样式，以传统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
发表回复