这里有意思的点在于使用了的打字效果,虽然老早就有,但还是它比较有特点,使用的第三方库是typed.js使用方法也很简单,直接去看就行,它还很细心给封装了一个简单的hook,真心不错呦~
【探索创意之旅:打造个人网页的精彩奇遇】(3). 关于
这一部分没有什么特殊的东西,就是简单的布局及文字,不过在这里可以看到有大量的类似于表情的输入,当时看到别人居然可以输入表情感觉很好玩,自己也就浅弄了一下,不会的小伙伴抓紧学习来,让你的内容变得更丰富多彩吧~
由于我使用的是编辑器写的,那我就以它为例了,其他编辑器可自行百度
- 下载表情输入对应的插件
我选择的表情插件是Emoji看起来它的表情更丰富写,基本能够满足我了,其他的当然也行不过可能用法不一
-插件使用方法
![探索创意之旅:打造个人网页的精彩奇遇](http://img.gansulong.com/231001/0139354N0-0.jpg)
文章插图
在全局中使用快捷键 Ctrl + P 弹出搜索框输入>Emoji: emoji 即可进行表情的选择了,输入位置即使在Ctrl + P 之前光标所在位置
-拓展
在编辑器里由于表情特别多,有的显示还不太友好,当然我们也有网站对应这些表情一共我们更好的使用呦~
Emoji点击表情即可复制表情代码,然后按照使用方法输入搜索即可
(4). 项目
项目中属实是不知道该怎样设计的花里胡哨,也就没做过多的功能,只做了点击弹出模态框进行展示,模态框使用的是的Modal组件
![探索创意之旅:打造个人网页的精彩奇遇](http://img.gansulong.com/231001/0139355216-1.jpg)
文章插图
(5). 页面动效
页面中所有的动效都是简单的使用react-使用方法同样参考链接所指,很简单不做过多赘述,不过值得一提的是,在引入的时候再编辑器里会报错,解决办法也很简单 在react-app-env.d.ts 这个文件夹里声明使用的动效组件即可 例:"react-/Fade";
当然,效果很多,Fade - React 这个可以更直观的看到展示的效果,可自行去选择效果,不用一个个试效果,很好用
4. 写在最后
由于官网是在工作之余写的,想写就写一会,不过由于太懒中间也是断断续续的,搞了两三个星期才真正做出来,借鉴了好些位大佬的网站(希望大佬勿怪)~,如果你对我的个人主页感兴趣也可以直接用
第一次使用React做一个小项目,之前也对这个框架不太了解,所以应该会有好多优化的地方没有做,这可能对于一些经常写React且做优化的同学来说,代码可能有点烂,仅供批判,但我不接受(((o(*?▽?*)o)))?,学习之后有空再进行优化吧
整个项目用到的技术:.x、TS、、、Scss
项目源码:前端奇遇记-个人主页源代码喜欢的话可以点个Star☆ 呀,欢迎各位来魔改打造属于自己的跟人主页,虽然我的代码也不怎么样(#^.^#)
交换友链:如果你觉得我的页面还可以,在评论区留言你的个人主页地址,互相挂个友链友好交流一下~
- 使用Docsify开启个人博客之旅
- 《R和Ruby数据分析之旅》一1.2 Shoes
- 挖掘数百篇AR/VR专利,苹果XR全方位探索
- 专访微软MVP佘华煜:我的Windows 8体验之旅
- 北京锐意
- 世界之窗6
- 北京九寨沟
- 地质图书馆
- 美利达逍遥
- 北京到大连动车