启用新版个人主页
简略
查看新版主页:https://fosky.top
旧版主页存档:https://image.fosky.top/projects/homepage-2023/
更换原因
- 旧版主页性能较低,出现莫名的卡顿与掉帧
- 旧版主页使用
tailwindcss
编写,卡片的样式维护较难 - 旧版主页的依赖库版本较低,另外因为多次迭代,有不少遗留问题,难以维护
- 旧版主页使用 javascript 而非 typescript,在类型上踩坑
- 旧版主页的文件结构比较乱,规划较差
- 旧版主页的部分布局不合理,导致显示不佳
- 部分配置项需要多处修改,如 SEO 信息,迭代麻烦
新版简介
参考了 https://s23.moe
- 使用 typescript 编写
- 优先使用 TSX 组件 (jsx语法) 而非 SFC 组件,更加灵活与易阅读
- 使用组合式函数 (composable) ,方便复用且提高性能
- 实现了
requestWithCache
机制,以防止过多请求 api,减少页面卡顿与接口压力 - 实现了
inject-seo
,只需配置一处地方,无需修改index.html
,迭代方便 - 优化了架构,使得组件的复用性更强
组件说明
- GitHub Stats 使用该项目的 api 生成 https://github.com/anuraghazra/github-readme-stats
- 社交平台粉丝数
参考了
substats
项目的代码 https://github.com/spencerwooo/substats - 博客文章
- 抖音近期视频
- QQ 音乐听歌状态 从 Q音手机版抓包获取到的接口,sign 加密算法如下 https://github.com/FoskyM/qq_music_sign 美中不足的是此接口需要 Cookies,且会过期,需要解决,或许可以参考以下项目 https://github.com/lonsty/qqmusic-cookie-setter
- 行者骑行数据
- GitHub 仓库列表 获取这个应该是基本操作吧?
- Steam 游戏列表 通过 Steam 的 webapi 获取
- 联系方式
- 网站访问数据
从
51.la
的组件 js 代码中提取访问数据 - 项目列表 直接使用 JSON
- 旅行地图(未完成)