三、前端开发—搭建静态网站（2）
上一节，部署了基础环境，以及搭建了博客的静态导航栏。
接下来，就搭建博客首页的其他组件：
-
轮播图
-
博客文章列表
-
个人信息栏
-
网页的底部栏
分析网页布局
分析上图可以，整个 内容体里面包含了两行（红色），第二行中又包含两列（绿色框）
这时，我们可以根据划分的结构编写各个自定义组件，比如：轮播图组件，个人资料组件，文章列表组件等等。再通过栅格布局将它们组合起来，完成一个完整的页面。
搭建轮播图组件
在 my-blog\src\components\swiper 文件夹中新建 swiper.jsx，在其中编写我们自定义的轮播图：
import React, {Component} from "react";
import { Carousel } from 'antd';
import "./swiper.less"
export default class Swiper extends Component{
render() {
return (
<div>
<Carousel className={"carousel-container"} autoplay>
<div className={"flex-column-middle"}>
<div className={"category"}> 分类 </div>
<h2> 文章标题 </h2>
<div className={"read-more"}>
<a>阅读全文</a>
</div>
</div>
</Carousel>
</div>
)
}
}
首先 我们继续使用 antd 的组件库来搭建轮播图。使用的是 antd 中的 <Carousel> 轮播图组件，其中每个轮播图中设计了三个元素，文章分类，文章标题，以及阅读全文。
其次，原生的轮播图组件库样式满足不了我们的要求，于是为每个 div 添加类名，并在同级目录中添加 swiper.less 样式文件，修改它们的样式，内容如下：
.carousel-container{
border-radius: 15px;
overflow: hidden;
background: linear-gradient(120deg, rgb(114, 166, 220) 20%, rgb(165, 89, 138) 80%);}.flex-column-middle{
height: 350px;
text-align: center;
padding-top: 120px;}.flex-column-middle .category {
position: relative;
text-shadow: 0 2px 2px rgba(0,0,0,.3);
opacity: .75;
color: #fff;
font-size: 18px;}.flex-column-middle h2 {
margin-top: 25px;
margin-bottom: 30px;
font-weight: 400;
font-size: 28px;
text-shadow: 0 3px 5px rgba(0,0,0,.3);}.read-more {
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
word-spacing: 1px;
letter-spacing: 0.01em;
text-align: center;
margin-top: 20px;}.flex-column-middle .read-more a {
display: inline-block;
padding: 6px 15px;
text-decoration: none;
color: #fff;
border: 1px solid rgba(255,255,255,.3);
border-radius: 7px;
text-shadow: 0 2px 2px rgba(0,0,0,.2);
-webkit-transition: .25s;
transition: .25s;}.flex-column-middle .read-more a:hover {
background: #fff;
border: 1px solid #fff;
color: #20a0ff;
text-shadow: none;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.15);
box-shadow: 0 5px 10px rgba(0,0,0,.15);
-webkit-transition: .25s;
transition: .25s}
现在，已经初步写完我们自定义的轮播图组件库，然后插入到之前写的博客框架中去，为了便于阅读和代码清爽性，我们在新建一个文件，其中存放整个页面内容体的布局：
在 my-blog\src\components\show 文件夹中新建 show.jsx 文件：
import React, {Component} from "react";import {Col, Row} from "antd";import Swiper from "../swiper/swiper";export default class Show extends Component{
render() {
return (
<>
<Row>
{/*轮播图*/}
<Col span={24}>
<Swiper />
</Col>
</Row>
<Row>
{/*文章列表、个人资料*/}
</Row>
</>
)
}}
之前，在分析网页布局时，我们知道，整个内容体 中分成了两行，一行显示轮播图，另一行显示文章列表以及展示个人资料。
<Row> 标签表示行，<Col>标签表示列，上面的代码表示 有两行，第一行只有一列。在栅格布局中**，会将一行（Row）人为的划分为24份**， Col 中 span 的属性表示这一列占几份，目前是全占满，所以 span是 24。
最后将写好的 swiper 轮播图组件导入，并放到指定位置。
这时，我们已经写好了整个内容体中的架构，并且已经将轮播图导入进去了。现在，我们将 show.jsx 加入到整个博客架构中去。
修改 my-blog\src\components\main\main.jsx 中的部分代码：
...
import NavTop from "../nav-top/nav-top";
import Show from "../show/show"; // 导入 show 组件
...
<Content>
<Show /> {/* 将 show 组件 添加进来*/}
</Content>
...
这时，使用 craco start 运行项目，会发现轮播图并没有为左右两边留空白，我们任需要微调一下样式：
还是修改my-blog\src\components\main\main.jsx 中的部分代码：
...
<Content style={{ padding: '0 50px', marginTop: 10 }}>
<Show />
</Content>
...
加入一个 style 样式，为左右两边以及上方留一些空白。
目前轮播图中只有一个面板，我们尝试多创建几个面板试试吧：
修改 my-blog\src\components\swiper\swpier.jsx 文件部分代码：
import React, {Component} from "react";
import { Carousel } from 'antd';
import "./swiper.less"
export default class Swiper extends Component{
state = {
posts_data:[
{
id:0,
category:"分类",
title:"文章标题 1",
},
{
id:2,
category:"分类",
title:"文章标题 2",
},
{
id:3,
category:"分类",
title:"文章标题 3",
},
]
}
render() {
const {posts_data} = this.state
return (
<div>
<Carousel className={"carousel-container"} autoplay>
{posts_data.map((post_data, index)=>(
<div className={"flex-column-middle"} key={index}>
<div className={"category"}> {post_data.category} </div>
<h2> {post_data.title} </h2>
<div className={"read-more"}>
<a ref={post_data.id}>阅读全文</a>
</div>
</div>
))}
</Carousel>
</div>
)
}
}
我将所有需要修改变动的数据都添加到 state 中去，未来只需要修改state 中 posts_data 的数据，页面就可以显示相应的数据了。
效果图
目录架构
搭建完静态的导航栏和轮播图，目前项目的目录架构如下：
my-blog
├── node_modules : 存放 npm 安装的工具包 或 模块
├── public : 一些静态文件，一般不需要修改，除了网站标题和icon，或者要添加一些特定的东西
|── src : 项目的源代码及资源
| ├── assets : 存放公共资源
| | └── css
| | └── index.less : 修改全局的样式
| ├── component : 存放项目共用的组件(不会修改其他组件状态)
| | ├── main
| | | ├── main.less
| | | └── main.jsx
| | ├── nav-top : 自定义导航栏组件
| | | ├── nav-top.less
| | | └── nav-top.jsx
| | ├── show
| | | └── show.jsx
| | └── swiper : 自定义轮播图组件
| | | ├── swiper.less
| | └── swiper.jsx
| ├── containers : 存放项目共用的组件(将会修改其他组件状态的组件)
| ├── redux : 存放状态管理组件的 js 代码
| └── index.js : js 的入口文件
└── package.json : 项目的配置文件
