。
本文将使用到的技术：
- React
- Geist UI 库，用于快速构建样式
- 知晓云 Web SDK
- react-router-dom，用于页面跳转
- moment.js，用于解析日期
开始前的准备
在开始构建之前，我们先构思一下常见个人博客页面的几个要素，也就是头部、内容和底部。头部一般放置网站的 Logo 和相关链接；内容则一般为文章分类、文章标题、以及文章内容；而底部一般放置一些版权所有，以及其他的一些链接。
最后这些元素可以总结为以下几点：
头部：
- Logo
- 相关链接
内容：
- 文章分类
- 文章标题
- 文章内容
底部：
- 版权所有
- 其他链接等
经过上面的一轮构思，我们可以根据这几点开始着手写代码了。
创建一个新的 React 项目
使用 create-react-app CLI 创建一个新项目
在本地目录中输入 npx create-react-app .（注意最后的英文句号表示在当前目录下创建），并删除不常用的目录文件，最终得到：
我们还需要安装一下 moment.js 和 react-router-dom，为接下来的工作作准备：
yarn add moment react-router-dom
使用 Geist React UI 库
为了快速构建个人博客，本文将会使用 Geist UI 库（https://react.geist-ui.dev/zh-cn）作为样式支撑。该依赖库有完善的样式体系，非常适合本次的博客开发：
yarn add @geist-ui/react @geist-ui/react-icons
安装完毕后，添加 Geist UI 到我们的项目中。在 src/index.js 中写入以下代码：
import React from 'react'
import ReactDOM from 'react-dom'
import { GeistProvider, CssBaseline } from '@geist-ui/react'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<GeistProvider>
<CssBaseline />
<App />
</GeistProvider>
</React.StrictMode>,
document.getElementById('root')
)
构建基础页面和组件
构建首页和文章页
在 src 目录下新建 pages 文件夹，并往内分别再新建包含 index.js 的 home 和 article 文件夹，作为我们页面的支撑：
在这两个文件分别先初始化页面的结构，例如 home/index.js：
import React from 'react'
const Home = () => {
return <div>Home</div>
}
export default Home
之后，我们在 App.js 初始化页面路由：
import React from 'react'
import { HashRouter as Router, Switch, Route } from 'react-router-dom'
import Home from './pages/home'
import Article from './pages/article'
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/article/:id">
<Article />
</Route>
</Switch>
</Router>
)
}
export default App
构建共用的基础布局组件
在 src 目录下，我们新建一个 components 目录，并在里面新建一个包含 index.js 的 layout 目录：
我们将在这个 layout 这个 index.js 文件中，填入以下代码：
import React from 'react'
const Layout = ({ children }) => {
return <>{children}</>
}
export default Layout
最后，分别在 pages/home/index.js 和 pages/article/index.js 中引入 layout 组件：
import React from 'react'
import Layout from '../../components/layout'
const Home = () => {
return (
<Layout>
<div>Home</div>
</Layout>
)
}
export default Home
至此，基础页面和组件基本构建完成，我们下一步开始构建页面内容。
添加头部和底部
添加头部结构和样式
假设我们的头部包含的元素和样式如下：
结构分别包含 Logo（标题），链接，还有一个 GitHub 的图标链接。
按照 Geist 给出的样式组件，我们可以根据其在 Layout 组件里构建上述的结构：
import { Grid, Text, Link, Spacer } from '@geist-ui/react'
import { Github } from '@geist-ui/react-icons'
const Layout = ({ children }) => {
return (
<>
<header style={{ width: 1000, margin: '0 auto' }}>
<Grid.Container alignItems="center" justify="space-between">
<Grid xs="12" alignItems="center" direction="row">
<Link href="/" color="">
<Text p b font="20px" className="logo">
知晓云博客
</Text>
</Link>
<Spacer w="2" />
<Link href="https://cloud.minapp.com/">
<Text p>知晓云官网</Text>
</Link>
<Spacer w="1" />
<Link href="https://cloud.minapp.com/dashboard/">
<Text p>控制台</Text>
</Link>
<Spacer w="1" />
<Link href="https://cloud.minapp.com/dashboard/">
<Text p>文档</Text>
</Link>
</Grid>
<Grid xs="6" justify="flex-end">
<Link href="https://github.com/ifanrx">
<Github />
</Link>
</Grid>
</Grid.Container>
</header>
{children}
</>
)
}
export default Layout添加底部结构和样式
底部样式结构相对简单，主要包含以下几个元素：
代码如下：
<footer style={{ width: 1000, margin: '0 auto' }}>
<Divider />
<Grid.Container alignItems="center">
<Grid xs="12" alignItems="center">
<Link href="/">
<Text p b font="18px">
知晓云博客
</Text>
</Link>
<Spacer w={1} />
<Text p>© {new Date().getFullYear()} 知晓云。版权所有</Text>
</Grid>
<Grid xs="12" justify="flex-end">
<Link href="https://cloud.minapp.com/" underline>
<Text p>官网</Text>
</Link>
<Spacer w="1" />
<Link href="https://cloud.minapp.com/dashboard/" underline>
<Text p>控制台</Text>
</Link>
<Spacer w="1" />
<Link href="https://cloud.minapp.com/dashboard/" underline>
<Text p>文档</Text>
</Link>
</Grid>
</Grid.Container>
<Spacer h={10} />
</footer>搭建首页结构和样式
接下来，我们一起构建一下首页的结构和样式吧！
假设我们构建的样式如下，包含大标题和文章列表：
首页的大标题部分，实际上用 Geist 自带的组件只需要几行代码即可生成：
<section style={{ background: 'rgb(245, 245, 245)' }}>
<Grid.Container
style={{ width: 1000, margin: '0 auto' }}
direction="column"
>
<Spacer h={8} />
<Grid xs="24" direction="column">
<Text h1 font="56px">
知晓云博客
</Text>
<Text p font="20px">
由知晓云强力驱动的 React 个人博客网站
</Text>
</Grid>
<Spacer h={8} />
</Grid.Container>
</section>
而同样地，文章列表也可以通过几个 `Grid` 实现：
<section style={{ width: 1000, margin: '0 auto' }}>
<Grid.Container direction="column">
<Grid xs="24" direction="column">
<Spacer h={5} />
<Text h4>???? 技术文章</Text>
<Link underline>
<Text h2 font="42px">
如何快速实现图片爬虫
</Text>
</Link>
<Link underline>
<Text h2 font="42px">
通过 React 构建个人博客教程
</Text>
</Link>
<Link underline>
<Text h2 font="42px">
怎样快速生成海报，并在小程序中分享
</Text>
</Link>
<Link underline>
<Text h2 font="42px">
如何生成带参数的二维码？
</Text>
</Link>
</Grid>
</Grid.Container>
<Spacer h={5} />
</section>至此，首页的样式结构我们已经搭建完毕，接下来我们继续构建文章页。
搭建文章页结构和样式
文章页的结构和首页比较类似，不同之处在于头部的副标题改为了用 moment.js 实现的日期，以及内容部分改为用 Text 组件搭建的文章：
import React from 'react'
import { Grid, Text, Spacer } from '@geist-ui/react'
import moment from 'moment'
import Layout from '../../components/layout'
const Article = () => {
return (
<Layout>
<section style={{ background: 'rgb(245, 245, 245)' }}>
<Grid.Container
style={{ width: 1000, margin: '0 auto' }}
direction="column"
>
<Spacer h={8} />
<Grid xs="24" direction="column">
<Text h1 font="56px">
如何快速实现图片爬虫
</Text>
<Text p font="20px">
{moment().format('YYYY年M月D日')}
</Text>
</Grid>
<Spacer h={8} />
</Grid.Container>
</section>
<article style={{ width: 1000, margin: '0 auto' }}>
<Spacer h={5} />
<Grid.Container direction="column">
<Grid xs="24" direction="column">
<Text p>
带着这些问题，我们来审视一下好好学习。
我们都知道，只要有意义，那么就必须慎重考虑。
对我个人而言，好好学习不仅仅是一个重大的事件，还可能会改变我的人生。
既然如何，
对我个人而言，好好学习不仅仅是一个重大的事件，还可能会改变我的人生。
邓拓曾经说过，越是没有本领的就越加自命不凡。这不禁令我深思。
好好学习的发生，到底需要如何做到，不好好学习的发生，又会如何产生。
经过上述讨论， 总结的来说，
拉罗什福科说过一句富有哲理的话，我们唯一不会改正的缺点是软弱。带着这句话，我们还要更加慎重的审视这个问题：
可是，即使是这样，好好学习的出现仍然代表了一定的意义。
叔本华说过一句富有哲理的话，普通人只想到如何度过时间，有才能的人设法利用时间。这似乎解答了我的疑惑。
奥普拉·温弗瑞曾经提到过，你相信什么，你就成为什么样的人。这启发了我，
好好学习的发生，到底需要如何做到，不好好学习的发生，又会如何产生。
本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。
我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。
所谓好好学习，关键是好好学习需要如何写。
每个人都不得不面对这些问题。 在面对这种问题时， 这样看来，
好好学习，发生了会如何，不发生又会如何。
要想清楚，好好学习，到底是一种怎么样的存在。
所谓好好学习，关键是好好学习需要如何写。
赫尔普斯曾经说过，有时候读书是一种巧妙地避开思考的方法。这不禁令我深思。
生活中，若好好学习出现了，我们就不得不考虑它出现了的事实。
</Text>
<Spacer h={2} />
</Grid>
</Grid.Container>
<Spacer h={5} />
</article>
</Layout>
)
}
export default Article
由于为了快速构建，上述代码中的文章部分，使用了文章生成器生成，大家有需要可以到这里生成（https://suulnnka.github.io/BullshitGenerator/index.html）。
至此，我们的博客结构和样式基本已经处理好。下一节，我们将正式开始接入知晓云，让我们的数据变成动态并存储在数据表中。
到此阶段的项目源码可在 GitHub 中查看：（https://github.com/ifanrx/minapp-blog-example/tree/blog-structure-and-styles）
最终的博客结构和样式如下：
