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:博主介绍组件开发
码云笔记 » P05:博主介绍组件开发