这是我的第一篇BLOG
121 字
1 分钟
这是我的第一篇BLOG
- 1备案通过后的图床重生记：把 CloudFlare-ImgBed 从 Telegram 渠道搬回境内服务器的完整复刻手册
- 2全站动效补完与 anime.js 数字滚动：五项动效计划的落地、四轮实测踩坑与复刻清单
- 3全站视觉移植复刻：把 Firefly 改造成 animal-island-ui 风格的七期工程（含复刻清单与踩坑全录）
- 4导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
- 5博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
- 6Firefly 博客实战：从零搭建任意设备可用的发布台（Vercel + GitHub API）
- 7评论区回复时表情面板被截断：一次 overflow 裁剪排查实录
- 8Firefly 博客实战：给文章页加阅读进度条与圆环百分比
- 9Firefly 博客接入友链朋友圈：从零开始的完整部署教程
- 10从零开始搭建个人图床
- 11文章中添加音乐播放器
- 12基于Firefly主题的列表封面位置改造
- 13基于rehype的博客PDF嵌入组件实现
- 14Twikoo评论系统部署踩坑记录：Vercel域名无法访问的解决之路
- 15这是我的第一篇BLOG本文
来自我的第一条博客
🎉 从零开始，翻阅众多教程，在 MIMO 的帮助和自己不懈的调试摸索下，我终于搭建完成了属于自己的个人博客！
- 📦 感谢开源项目：Firefly
- 📚 感谢 B站UP主：番茄煮理人，借助她的视频与博客教程，顺利完成整套部署。
- ☁️ 感谢服务平台：Github、Cloudflare、阿里云
接下来我会继续摸索，持续更新与完善本站。
END
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
备案通过后的图床重生记：把 CloudFlare-ImgBed 从 Telegram 渠道搬回境内服务器的完整复刻手册
技术分享ICP 备案下证后，本站完成从 Cloudflare 全家桶到腾讯云生态的整体迁移。本文以图床为主线：为什么 CloudFlare-ImgBed 在国内必死（Telegram 渠道、workers.dev 污染、EO 反代 522、CF 封死子域 zone 四重死因），如何无损导出数据，并在轻量服务器上用 Docker 原版程序 + Nginx + rclone WebDAV 重建出「网页上传 + 后台设置」的完整体验，附全部踩坑与可照抄的复刻步骤
2
全站动效补完与 anime.js 数字滚动：五项动效计划的落地、四轮实测踩坑与复刻清单
技术分享完整记录 Firefly 博客一次「按门禁筛出来的动效改造」：五项动效计划（浮层开合/模态进出场/公告折叠/翻页桥接/切标签）的病灶定位、精确参数与四个实测才现形的 bug，以及用 anime.js 给侧栏统计做数字滚动的选型决策、v4 API 与零面积 IntersectionObserver 抢跑坑，附可照做的复刻清单
3
全站视觉移植复刻：把 Firefly 改造成 animal-island-ui 风格的七期工程（含复刻清单与踩坑全录）
技术分享完整记录如何把一个 Astro + Svelte 博客移植成 animal-island-ui 的治愈系海岛风格：决策依据（为什么不引库、不重写）、规范获取方式、七期改造的逐文件实录与精确色值、Tailwind 层序覆盖等关键机制、Nunito 字体接入、验证三件套，附他人可照做的复刻清单与未尽事项
4
导航栏 UI 改造全记录：卡片边框、悬浮胶囊、三段收拢与 PC 收拢态快捷面板（附完整复现指南）
技术分享一次连续迭代的完整复盘——从卡片边框体系、悬浮胶囊导航，到三段结构拆分、下滑收拢动画，再到 PC 收拢态汉堡的控件快捷面板与"行点击原位弹卡"的两处根因修复，追加 PC 搜索控件图标化与收拢动画卡顿的逐帧诊断修复。每个批次改了哪些文件、为什么这么改、踩了哪些坑（CSS 层序、正圆公式、包含块、Vite 缓存、Playwright headless 动画冻结），附 git 重放与手工重做两条复现路径及验收清单
5
博客性能优化全记录：Lighthouse 报告拆解到帧率根因排查（A–F 六项实战）
技术分享从两份 Lighthouse 对比报告出发，完整记录六项性能优化的排查方法、根因定位与修复代码：字体子集化、封面图尺寸 API、CSS 内联、强制重排归零、以及"只有 Chrome 掉帧"的浏览器设置级根因，附全部可复现命令与工具脚本
随机文章随机推荐