Gatsby 技术博客的建立

2022-02-22 约 1283 字预计阅读 3 分钟

brew install nvm
nvm install --lts

npm install -g gatsby-cli

gatsby new
cd blog-tech
gatsby develop

gatsby develop 命令报错，通过该文章的提示解决：

npm install --save @babel/core @babel/preset-env

gatsby develop

使用 gatsby-plugin-strapi ，然后进行配置，注意需要在 Users 集合中创建新用户，并且赋予角色，这样才能在配置中添加登录认证的 loginData，标识符就是用户名，密码就是你为这个用户设置的密码。
使用 gatsby-node.js ，动态生成所有博客的页面，并将每个 post 的信息注入到其上下文中，主要利用 createPages 函数，可以参考Creating and Modifying Pages | Gatsby (gatsbyjs.com)。
post 页面的模板需要自己弄，其中页面间路由，请使用内置的React组件：<Link> ，可以参考Gatsby Link API | Gatsby (gatsbyjs.com)。

对应上面的步骤，相关代码如下：

npm install --save gatsby-source-strapi

gatsby-config.js：

plugins: [
  // 添加 StrApi 支持
    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: `http://localhost:1337`,
        queryLimit: 1000, // Defaults to 100
        collectionTypes: [
          {
            name: 'posts',
            api: {
              qs: {
                // 'preview' fetches both draft & published content
                _publicationState: 'preview',
              }
            }
          }
        ],
        loginData: {
          identifier: 'yuhan',
          password: 'yuhanliu',
        },
      },
    },
  ]

gatsby-node.js：

const path = require("path")
// Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data.
exports.createPages = async ({ graphql, actions, reporter }) => {
    const { createPage } = actions
    // Query for post nodes to use in creating pages.
    const posts = await graphql(
`query QueryPosts {
  allStrapiPosts(sort: {fields: createdAt, order: DESC}) {
    edges {
      node {
        id
        title
        categories {
          name
          type
        }
        slug
        published_at(locale: "zh_CN", formatString: "YYYY年M月D日")
        createdAt(formatString: "YYYY年M月D日")
        options {
          related_work {
            name
            remark
            type
            url
          }
          version_info {
            name
            version
          }
        }
        content
      }
    }
    totalCount
  }
}
`
    )
    // Handle errors
    if (posts.errors) {
        reporter.panicOnBuild(`Error while running GraphQL query.`)
        return
    }
    // Create pages for each post .
    const blogPostTemplate = path.resolve(`src/templates/post.js`)
    posts.data.allStrapiPosts.edges.forEach(({ node }) => {
        createPage({
            path: `/posts/${node.slug}`,
            component: blogPostTemplate,
            // In your blog post template's graphql query, you can use pagePath
            // as a GraphQL variable to query for data from the markdown file.
            context: {
                // This time the entire post is passed down as context
                post: node,
            },
        })
    })
}

templates/post.js:

import * as React from "react"

const PostPage = ({ pageContext }) => {
    const { post } = pageContext
    return <div>Hello! {post.title} </div>
}
export default PostPage

这里只是非常简单的模板，更多样式等需要自己去做。

按照官方文档来做：Get Started - Semantic UI React (semantic-ui.com)

npm install --save semantic-ui-react semantic-ui-css

然后在 gatsby-browser.js 中写下：

import 'semantic-ui-css/semantic.min.css'

之后，重启应用，尽情使用吧：

import * as React from "react"
import { Header, Container } from 'semantic-ui-react'


const PostPage = ({ pageContext }) => {
    const { post } = pageContext
    return (<Container text>
        <Header size='huge'>{post.title}</Header>
        <p>{post.content}</p>
    </Container>)
}
export default PostPage

官方文档：markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed (github.com)

我们使用 markdown-it 来解析，然后按照官方文档来做。

npm install markdown-it --save

之后，显然应该在 gatsby-node.js 中进行解析，然后注入到上下文中。

npm install --save gatsby-plugin-styled-components styled-components babel-plugin-styled-components

gatsby-config.js :

plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    },
  ],

然后尽情使用吧：

post.js :

import * as React from "react"
import { Header, Container } from 'semantic-ui-react'
import styled from "styled-components";


const Par = styled.p`
    img {
      width: 100%;
    }
`

const PostPage = ({ pageContext }) => {
    const { post, rendered } = pageContext
    return (
        <Container text>
            <Header size='huge'>{post.title}</Header>
            <Par dangerouslySetInnerHTML={{__html: rendered}}/>
        </Container>
    )
}
export default PostPage

注意样式组件的用法：

定义首字母 ==必须大写==
可以采用 ES6 模板字符串的形式
可以通过 props的形式传值判断 true 进行样式更改
内部包裹的元素还是可以通过className的形式添加样式
标签属性使用style-components，需要使用标签属性，如 input 的placeholder，a标签的href等，style-components提供了属性attrs
可以使用 extend 方法进行组件的继承，从而实现样式复用
可以使用 injectGlobal 将通用的样式注入到全局中

Semantic UI 确实很好看，怪我自己没学会用 React，不该怀疑它的问题的，不应该匆忙就换成了 Ant Design。

官方文档：Ant Design of React - Ant Design

按照官方文档来引入的：

npm install antd --save

然后在 gatsby-browser.js 中写下：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

之后，重启应用，尽情使用吧。

Querying Data in Pages with GraphQL | Gatsby (gatsbyjs.com)

gatsby-source-strapi | Gatsby (gatsbyjs.com)

Get Started - Semantic UI React (semantic-ui.com)

使用 styled-components 加速 React 开发 - 知乎 (zhihu.com)

目录

Gatsby 技术博客的建立