【项目记录】个人站点by Gatsby

栏目: CSS · 发布时间: 5年前

内容简介:设置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

做什么

为基础内容添加多语言支持

怎么做

  • 方式一: 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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web 2.0 Heroes

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》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具