Gatsby + Ant design + TypeScript + GraphQL：构建现代静态博客系统的最佳组合

2023-12-19 04:21:13

使用 Gatsby、Ant Design、TypeScript 和 GraphQL 构建现代静态博客系统

现代静态博客系统的利器

Gatsby、Ant Design、TypeScript 和 GraphQL 的组合为构建现代静态博客系统提供了无与伦比的优势。Gatsby 是一个基于 React 的静态网站生成器，可将 Markdown 文件编译为静态 HTML 页面。Ant Design 是一款 UI 组件库，提供了丰富的 UI 组件，可快速构建出美观的网站界面。TypeScript 是一种类型系统，有助于捕获编码错误并提高代码的可维护性。GraphQL 是一种数据查询语言，允许更灵活地查询数据。

入门：创建一个新的 Gatsby 项目

创建新的 Gatsby 项目非常简单，只需使用以下命令：

npx create-gatsby-blog

这将在当前目录下创建一个新的 Gatsby 项目。

整合 Ant Design 和 TypeScript

下一步是将 Ant Design 和 TypeScript 添加到我们的项目中：

npm install antd
npm install typescript

设置 GraphQL API

为了从内容管理系统或数据库中获取数据，我们需要设置 GraphQL API：

npm install graphql

然后，在 gatsby-config.js 文件中配置 GraphQL API，指定数据源的 URL：

module.exports = {
  siteMetadata: {
    title: `My Blog`,
    description: `My blog description.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: `WPGraphQL`,
        fieldName: `wpgraphql`,
        url: `https://example.com/graphql`,
      },
    },
  ],
}

使用 GraphQL 查询获取数据

使用 GraphQL 查询，我们可以从数据源获取所需的数据：

query {
  allWpgraphqlPost {
    edges {
      node {
        title
        content
      }
    }
  }
}

构建博客界面的各个部分

现在，让我们构建博客界面的各个部分，包括文章列表、文章详情页和评论系统：

文章列表：

import React from "react"
import { Link } from "gatsby"

const ArticleList = ({ articles }) => (
  <ul>
    {articles.map(article => (
      <li key={article.id}>
        <Link to={article.slug}>{article.title}</Link>
      </li>
    ))}
  </ul>
)

export default ArticleList

文章详情页：

import React from "react"

const ArticleDetail = ({ article }) => (
  <div>
    <h1>{article.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: article.content }} />
  </div>
)

export default ArticleDetail

评论系统：

import React, { useState } from "react"

const CommentForm = ({ onSubmit }) => {
  const [name, setName] = useState("")
  const [comment, setComment] = useState("")

  const handleSubmit = (e) => {
    e.preventDefault()
    onSubmit({ name, comment })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <textarea value={comment} onChange={(e) => setComment(e.target.value)} />
      <input type="submit" value="Submit" />
    </form>
  )
}

export default CommentForm