【项目记录】我的站点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