全站 UI 革新正在进行中,网页可能不稳定或者存在问题。如硬刷新 (Ctrl + Shift + R) 后仍存在问题,可等待后续更新或向我发送反馈。

关于我个人

某双非软件工程本科在读。目前主要做前端开发和鸿蒙原生应用开发。

网站的 favicon 是我在 Minecraft 中的形象。

当前采用的解决方案

这个网站其实是我的前端初学项目,目前采用现代原生前端架构,传说中的 Vanilla JS 框架实践项目,拥有较好的页面性能与兼容性。

技术栈

HTML5 + CSS3 + 原生 JavaScript,无框架依赖。

构建、工程化与外部依赖

见下表

项目 方案
运行时环境 Node.js v22 LTS
包管理与构建办法 使用 Monorepo 管理分包。使用包含 Autoprefixer(PostCSS) 的自动化构建,利用 Wrangler 在本地服务器上开发
外部依赖 使用 swup 实现类 spa,引入 Tippy.js(Popper.js) 作为 tooltip 替换丑不拉几的原生title属性

网站基础设施

网站以 Serverless 模式托管在 Cloudflare Pages 上,使用 Backblaze b2 对象存储托管文件(使用一个 private 存储桶所以不收费)。整套基础设施最大特点就是不花钱,非常的性价比。

我评价

这套方案主要面向开发而非内容产出,因为写个文章会麻烦的要死。所有的 html 标签都是要复制粘贴的,比如说突出显示链接装看不见还有code blocks等等,非常非常繁琐。包括 VSCode 对水平方向上的拖拽操作也是非常不友好,所以内容产出的体验真的差。

整个系统的技术路线在公网建站以来的近 8 个月一直在不停的变。十多天以前,我刚刚完成了对主 js 文件的 ES6 模块化重构,这是最近一次重要的大规模变更。在未来,随着我对前端开发了解的增进,这样的技术路线变化可能依然会发生,但不会再有过大的改动了。我倾向于把整个博客主站保留在现代原生前端,将来不会迁移到其他框架。

所以我对目前网站解决方案的总体评价是:我满意

网站兼容性

本章节披露了本站及本站使用的部分组件中对部分较新的 Web 技术(Web 标准和 Web API)的使用情况,以及我们推荐浏览时使用的浏览器版本。若你当前使用的浏览器版本早于最低建议版本,则网页可能出现异常。

需要注意的是,只有在 MDN 兼容性表格中拿到 Baseline Widely available 徽章的 Web 技术才会被视作成熟的 Web 技术(即从该 Web 技术获得完全支持起 30 个月后)。若你发现新于最低建议版本的浏览器上仍存在兼容性问题,请单击此处向我反馈。一切关于 IE 浏览器的兼容性要求不予回应。

兼容性概览

使用2023-12-19以后发布的浏览器版本将不存在兼容性问题。建议使用2026-1-13以后发布的浏览器版本以获得最佳浏览体验。

浏览器引擎 常见的分支浏览器产品 最低建议版本 建议版本
Chromium 开源项目(Blink)
Chrome, Edge 105 125
WebKit
Safari, iOS / iPadOS 上的 Chrome、Edge 和 Firefox iOS / iPadOS 15.4+, macOS 12.3+ iOS / iPadOS 18.2+, macOS 15.2+, visionOS 2.2+
Gecko
Firefox 121 147

CSS Specifications: :has() selector

使用范围:blog

兼容性:2023-12-19起发布的所有浏览器版本均支持此 Web 标准。

单击此处从 MDN 处了解详细的浏览器兼容性报告。

Web API: View Transition API

使用范围:blog, WebGroove

兼容性:2026-1-13起发布的所有浏览器版本均支持此 Web API。

额外说明:使用了此 API 的相关组件为对应实现做了 fallback,确保在不受支持的浏览器版本上可以降级运作。

单击此处从 MDN 处了解详细的浏览器兼容性报告。