内容简介:设置document head内容,比如title, favicon, description添加meta-tags,比如openGragh, Twitter Card方式一:
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
做什么
为基础内容添加多语言支持
怎么做
-
- 借助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.
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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 站点优化记录
- [站点记录] 在站点上启用 Let's Encrypt 通配符证书
- 33.Django站点地图
- Nginx多站点/域名配置
- WEB站点性能优化实践
- 小心 !跨站点websocket劫持!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web 2.0 Heroes
Bradley L. Jones / Wiley / 2008-04-14 / USD 24.99
Web 2.0 may be an elusive concept, but one thing is certain: using the Web as merely a means of retrieving and displaying information is history. Today?s Web is immediate, interactive, innovative. It ......一起来看看 《Web 2.0 Heroes》 这本书的介绍吧!