P05：博主介绍组件开发

1. 编写 Author 组件
• Icon图标
2. CSS 样式的编写
3. 把组件引入到首页查看效果

博客的文章列表有了，接下来开始完善博客右侧的功能，右侧的绝大部分都是需要在其他页面复用的，所以尽量制作成组件，减少以后的开发和维护成本。

编写 Author 组件

在/components文件夹下面，新建一个Author.js文件。这个组件里要包括头像、自我介绍和社交账号标识。

Icon图标

语义化的矢量图形。使用图标组件，你需要安装 @ant-design/icons 图标组件包：

npm install --save @ant-design/icons

完整代码如下:

import {Avatar,Divider} from 'antd'
import {GithubOutlined,QqOutlined,WechatOutlined} from '@ant-design/icons'

export default function Author() {
    return (
        <div className="author-div comm-box">
            <div> <Avatar size={100} src="/wp-content/uploads/avatar/avatar-1.png" /></div>
            <div className="author-introduction">
                -前端博客,前端教程,记录 web 前端开发的个人技术博客
                <Divider>社交账号</Divider>
                <Avatar size={28} icon={<GithubOutlined />} className="account"  />
                <Avatar size={28} icon={<QqOutlined />}  className="account" />
                <Avatar size={28} icon={<WechatOutlined />}  className="account"  />
            </div>
        </div>
    )
}

这里的Avatat组件是Ant Desgin提供的，专门用来编辑头像的，通过这个可以制作原型或者方形的头像。 Divider是分割线组件，也是Ant Desgin提供的组件，特点是可以在分割线左、中、右，根据自己需要插入文字。

CSS 样式的编写

这里我提供出了对应的 CSS 样式，你可以直接复制到项目中使用，你也可以直接写一个自己喜欢的样式。

.author-div{
    text-align: center;
    padding: 1rem;

}
.author-div div{
    margin-bottom: 1rem;

}
.author-introduction{
    font-size:.8rem;
    color: #999;
}
.account{
    background-color: #999;
    margin-left: .5rem;
    margin-right: .5rem;
}

这里我们把styles/globals.css里边的comm-right名称，改为了comm-box，这样只要用到边框的时候，直接使用这个样式就可以了。

把组件引入到首页查看效果

打开index.js文件，然后在文件头部先引入Author组件，代码如下：

import Author from '../components/Author'

引入组件后，就可以在需要的位置进行使用了。使用完成，可以到浏览器中查看一下现在的效果了。如果一切正常，我们的自我介绍组件就编写完成了。