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 [email protected]/icons'

export default function Author() {
    return (
        <div className="author-div comm-box">
            <div> <Avatar size={100} src="https://www.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'

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

博主介绍组件开发

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P05:博主介绍组件开发

发表评论

提供最优质的资源集合

立即查看 了解详情