Gatsby 踩坑记录

记录一下过程过后整理:

  1. 安装 gatsby-cli
  2. 生成 starter 模板
  3. 安装 gatsby-source-filesyetem gatsby-transform-remark
  4. graph 查询 引入 markdown 文件
  5. 创建 components layouts
  6. 部署到 netlify now
  7. 创建 tag 页面
  8. 添加插件
  9. 动画效果
  10. nodejs 暴露模块
  11. Object 的方法与 key 的获取

在使用 createPage 时向 component 传递的 context 的 key 可以作为 component 中 pageQuery 的参数。

由于 Gatsby 是在构建页面时查询 graphql 所以并不能动态地给查询语句添加参数

未解之谜:

  • 添加 images 路径到 gatsby-source-filesystem 后可以直接使用 /image/xx.jpg 调用图片, 不是很理解添加到该插件后的路径在构建时是怎样的

使用 gatsby-image:

import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `StaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.app/gatsby-image
 * - `StaticQuery`: https://gatsby.app/staticquery
 */

export default class Image extends React.Component {
  render() {
    return (
      <StaticQuery
        query={graphql`
          query {
            allImageSharp {
              edges {
                node {
                  fluid(maxWidth: 1200) {
                    ...GatsbyImageSharpFluid
                  }
                }
              }
            }
          }
        `}
        render={data => {
          return (
            <Img
              fluid={
                data.allImageSharp.edges.find(element => {
                  // Match string after final slash
                  return (
                    element.node.fluid.src.split("/").pop() ===
                    this.props.imgsrc
                  )
                }).node.fluid
              }
            />
          )
        }}
      />
    )
  }
}