本项目遵循 语义化版本 2.0.0 规范。
- 导航栏移动端优化:
- 修复手机端头部导航右侧空白区域,顶部背景条现在完整覆盖至屏幕边缘。
- 给
#navbar添加relative定位与w-full宽度,修正绝对定位背景条的对齐基准。
- 微信分享二维码弹窗:
- 修复关闭按钮被"相关文章"等下方内容遮挡导致无法点击的问题。
- 弹窗 z-index 提升至
z-[9999]并通过 JS 将 modal 移至<body>直接子级,彻底脱离父级 stacking context 与overflow: hidden裁剪。 - 新增平滑开关动画:遮罩渐显/渐隐 + 卡片
scale缩放过渡。 - 弹窗内容区增加
max-h-[90vh] overflow-y-auto,防止小屏设备内容溢出。 - 关闭按钮文本改为国际化(新增
shareClose键),覆盖 10 种语言。
- 工程规范:
.gitignore新增dist/、.astro/、.DS_Store、环境变量等忽略项。
- QQ 分享:
- 移动端通过
mqqapi://深度链接直接唤起 QQ 分享面板,标题和链接预填好。 - 若未安装 QQ 或调起失败,自动降级为网页分享窗口。
- 移动端通过
- 微信分享:
- 移动端优先调用 Web Share API(系统分享面板),可直接选择微信转发。
- 次选
weixin://深度链接打开微信 App,同时自动复制链接到剪贴板。 - 桌面端保留二维码扫码分享。
- 小红书分享:
- 移动端优先调用 Web Share API 或
xhsdiscover://深度链接打开小红书 App,同时复制链接。 - 桌面端保留一键复制链接方式。
- 移动端优先调用 Web Share API 或
- 标签云启用:
- 标签云组件(
Tags.astro)已从注释状态启用,显示于侧边栏底部。 - 标签按使用频率自动加权缩放,高频标签更大更显眼。
- 标签云组件(
- 侧边栏组件优化:
- 热门文章展示数量从 5 篇缩减为 3 篇,折叠高度从 18rem 降至 12rem。
- 统计组件尺寸压缩:PV 字号从 text-4xl 降至 text-3xl,主卡片与子卡片内边距收紧。
- 全局间距从 gap-4 调整为 gap-3,视觉节奏更紧凑。
- 导航栏移动端优化:
- 实时时钟从独立居中位置移至右侧按钮组内,消除手机端右侧空白区域。
- 时钟全端可见,响应式字号适配。
- 工具库与翻译:
- 引入
setting-utils.ts,用于管理主题设置和色调调整。 - 添加
translation.ts,用于处理各种语言映射的多语言支持。 - 创建
url-utils.ts,用于 URL 操作功能。 - 实现
zh_TW.ts,为 UI 元素提供繁体中文翻译。 - 添加新 CSS 文件用于定义字体和调整样式。
- 引入
- 文章交互组件:
- 新增 热门文章 展示组件,推荐高访问量内容。
- 新增 文章评分 组件,允许读者对文章质量评价。
- 新增 RSS推广 组件,鼓励用户订阅 RSS 源。
- 新增 阅读进度 条,实时展示用户阅读位置。
- 新增 相关文章 推荐组件,增强内容关联性。
- 新增 系列导航 组件,便于用户浏览系列文章。
- 新增 分享按钮 组件,支持多平台分享。
- 订阅功能: 实现带有 RSS 功能的订阅页面,提供订阅链接与 OPML 导出支持。
- 博客内容: Git 完全入门指南:从安装到 VSCode 日常协作
- 博客内容: Windows系统Python环境搭建指南:从零开始选择你的编程利器
- 博客内容: 用 Nginx 反向代理 Docker 管理面板 Portainer 完整指南
- 博客内容: 如何利用 Docker 自建 RustDesk 远程桌面服务和免费的RustDesk-API的网页管理页面
- 博客内容: 在动态公网 IP 环境下部署高性能 Screego 屏幕共享服务
-
使用了 data-before-interactive-callback 钩子。如果 Cloudflare 能够静默识别用户,它会直接运行 onTurnstileSuccess,表单会直接解除模糊(Unlock)并显示在用户面前,遮罩层(Mask)永远不会出现。
-
只有当 Cloudflare 觉得需要确认(弹出“我是人类”复选框)时,才会运行 onTurnstileInteractive。此时遮罩层才会缓缓浮现,并将验证组件吸附到正中央。
-
通过 updateStatus 函数,状态栏会随着验证进度在“蓝色(扫描)”、“绿色(通过)”、“红色(异常)”、“橙色(交互)”之间平滑切换。
-
状态栏的 z-index 设为 30,而遮罩层为 20,表单正文为 10。这保证了无论是否有遮罩,右上角的状态信息始终清晰可读。
-
表单初始化时带有 opacity-40 和 blur-sm 的磨砂效果。
-
遮罩层采用 backdrop-blur-xl,这种大面积的模糊处理能让界面看起来极其精美且具有深度感。
-
转场使用 transition-all duration-1000,解除模糊的过程非常丝滑。
- 延时提高到 12 秒。这个时间窗口足够加载完 Cloudflare 脚本。如果在 12 秒内既没有成功也没有进入交互模式,代码将判定为“连接失败”并显示报错盒子,提供跳转到邮件/评论区的选项。
-
超时时间调整:setTimeout 逻辑调整为 10000ms (10秒),给网络加载预留了更充裕的时间。
-
状态动态反转:在 onTurnstileReady 和 onTurnstileSuccess 回调中均调用了 setStatusNormal(),这意味着如果脚本在第 8 秒才加载成功,遮罩层会自动消失,状态栏也会从红色变回绿色,一切恢复正常。
-
层级安全:状态栏所在的 div 使用了 z-30,而遮罩层使用了 z-20。这保证了即使出现遮罩,顶部的标题和 “验证无法连接” 的状态提示依然可以被用户看到,信息传递更直接。
-
交互引导优化:点击“其他联系方式”时,不仅会滑动到底部,我给目标卡片添加了一个 ring 呼吸灯效果,方便用户一眼定位到邮件联系区。
- 自动化友链申请表单:
- 引入 FormSubmit.co 集成,实现网页端直接提交友链申请,无需手动跳转邮箱 APP。
- 集成 Cloudflare Turnstile 安全验证,完美适配中国大陆网络环境,阻断自动化垃圾邮件。
- 新增 Honeypot (蜜罐) 防护机制,双重过滤恶意刷票。
- 提供“一键复制 JSON 信息”功能,支持剪贴board API 及样式反馈动画。
- 交互优化: 为友链申请成功增加了
fade-in平滑动画及自动滚动反馈。
- UI 升级:
- 友链页面重构为“极简卡片 + 毛玻璃表单”布局。
- 全面适配暗色模式,优化了输入框(Input/Textarea)在深色背景下的阴影与边框表现。
- 提交按钮增加 SVG Loading 状态及“加密传输”视觉提示。
-
赞助组件: 修复了在严格的浏览器被直接拦截问题。
-
类名混淆:
ad-card ---> sp-container ad-content-wrapper ---> promo-inner-box ad-script-container ---> item-holder-v2 拦截器对 ad- 极其敏感,而 sp- 或 promo- 的拦截权重相对较低。
-
经多次测试,已基本解决了
华为浏览器,夸克浏览器等浏览器拦截赞助组件的问题。
- 友链组件: 修复了图片无法显示的问题。
- 统计组件: 切换了统计的API,优化了统计功能加载速度。
- 博客内容: Panther-X2 玩机笔记:原生 WireGuard 组网与跨网段转发全记录
- 商业化集成: 新增侧边栏广告/赞助位组件
AdSidebar.astro,支持第三方脚本异步加载。 - 动态加载逻辑: 实现了广告脚本与 Swup 路由的兼容,确保在无刷新跳转时广告位仍能正确渲染。
- 视觉定制: 仿照主流技术博客风格,为广告位设计了毛玻璃质感的卡片容器,完美融入 Fuwari 主题。
- 博客内容: 发布《关于 Fuwari 如何发布文章》指南。
- 技术教程: 发布《如何编写 Markdown 文件》,涵盖从基础到高级(Mermaid, LaTeX)的所有语法。
- 发布了说说:祝大家新年快乐~
- 资源规范: 确立了文章资源目录化管理规范。
- 环境清理: 彻底移除所有项目自带的模板文章。
- 评论体验: 将评论输入框调整至顶部 (Top),提升互动便利性。
- 视觉动画: 为评论组件新增淡淡的位移淡入滚动动画,增强页面灵动感。
- 暗色适配: 完善 Giscus 评论区在深色模式下的透明度表现,解决白色闪烁问题。
- 主题联动: 修复了在无刷新页面跳转(Swup)后评论区主题无法实时同步的问题。
- 响应式: 优化评论组件在手机端屏幕的内边距,确保窄屏显示正常。
- 评论系统: 集成基于 GitHub Discussions 的 Giscus 评论系统,实现全站(说说、文章、关于)互动支持。
- 关于页面: 深度定制
about.astro,融入“CS 大一学生”极客风人设,添加技术栈卡片及动态背景。
- 站点部署: 完成基于 Astro 5.0 + Fuwari 的博客环境搭建,成功部署至 Vercel。
- 环境配置: 关联 GitHub 远程仓库,实现自动化持续集成(CI/CD)。
- 内容清理: 移除模板自带的示例文章,完成站点私有化初始化。
版本定义说明:
- Major: 架构大改或不兼容的变更。
- Minor: 向下兼容的功能新增。
- Patch: 错误修复或样式微调。