P05：博主介绍组件开发

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

编写 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="https://mybj123.com/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'

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

以上关于P05：博主介绍组件开发的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。