『 永不结束的歌 』
Tarokiki
805 字
4 分钟
博客开发总结：组件、数据库与部署
博客开发总结
在基于Astro框架 + Fuwari Theme改造为个人博客的过程中，我进行了一系列二次开发。这不仅是对原项目的个性化，更是一次涵盖了 多框架混合开发 与 数据库功能集成 的实践。
本文将详细复盘我所开发的几个核心组件。
1. 侧边栏组件开发：技术栈与访客统计
为了让博客更具个人特色和互动性，我为侧边栏开发了两个自定义组件。
技术栈组件 (TechStack.astro)
- 功能: 以标签云的形式动态展示我的技术栈。
- 实现: 这是一个纯 Astro 组件，通过遍历一个包含技能信息的数组来动态渲染 UI。利用 Tailwind CSS 的
group-hover特性，实现了平滑的图标缩放动效。
访客统计组件 (VisitorStats.vue)
- 功能: 显示全站的 PV (总访问量) 和 UV (总访客数)。
- 实现: 我选择使用 Vue 3 来封装这个组件，以展示在 Astro 架构下集成多框架的能力。组件通过不蒜子服务获取数据。
2. 留言板开发：Vue 3 + Supabase
为了让博客可以与访客互动，我为导航栏开发了一个留言板组件。
技术架构
- 前端: 使用 Vue 3 组合式 API 构建交互界面，实现了留言的实时加载、表单验证和提交动画。
- 后端: 采用 Supabase 作为数据库，负责留言数据的持久化存储。
- 数据通信: 通过官方的
@supabase/supabase-jsSDK，在前端组件中直接与云端数据库进行异步数据交互。
3. 多媒体增强：Vue 3 音乐播放器组件
为了提升主页的个性化体验，我开发了一个沉浸式的音乐播放器组件。
核心功能与技术点
- 原生 Audio 交互: 基于
ref绑定 HTML5 Audio 元素，封装play()/pause()核心播放方法，监听timeupdate/ended原生事件，实现播放进度实时更新、播放完毕自动切歌等核心逻辑。 - 进度条逻辑: 通过 Vue 计算属性实时计算播放进度
（(currentTime / duration) * 100），并通过:style="{ width: ${progress}% }"动态控制内层进度条宽度，实现播放进度可视化。 - 视觉质感设计: 使用 Tailwind CSS 实现了毛玻璃（玻璃拟态）效果，通过
bg-[rgba(var(--card-bg-rgb),0.5)]半透明背景 +backdrop-filter: blur(10px)模糊滤镜实现。基于 Tailwind 内置工具类替代手写 CSS，如文字颜色适配暗黑模式dark:text-white/80
4. 部署到cloudflare pages
- 创建项目: 在 Cloudflare 控制台中创建一个新的项目，关联 GitHub 仓库。
- 配置 Pages: 选择 “Pages” 选项卡（现在这个选项很隐蔽，只有一行小字)，注意不要配置成worker。配置构建命令为
npm run build，输出目录为dist。 - supabase KEY: 确保 Supabase 项目已经部署，在设置页面配置环境变量
SUPABASE_URL和SUPABASE_KEY，这两个值可以在 Supabase 控制台的 “项目设置” -> “API” 中找到。 （本地项目的supabase key不会生效，需要在cloudflare pages的环境变量中配置） - 部署: 点击 “部署” 按钮，Cloudflare 会自动构建并部署你的博客。
博客开发总结：组件、数据库与部署
https://fuwari.vercel.app/posts/fuwari-development-summary/