事情是这样的。

博客开了大半年，41 篇文章，但一直没人系统地了解过这个站到底能干嘛。有人问我”你这博客有啥特别的”，我说半天”评论区、工具箱、导航……”，对方一脸茫然。

正好最近修了一堆 bug（评论区报错、音频 autoplay、登录态丢失），顺手把全站的交互流程走了一遍，决定写篇功能介绍，省得以后再说半天。

这篇文章就按你打开网站之后能体验到的功能来排。

整体长什么样

先上个首页截图，认识一下基本布局：

首页

深色太空主题，深空渐变 + 星星 + 地球弧线，不卖力但也不土。左边文章列表，右边侧边栏——头像、文章/标签/分类统计、公告、天气、日历、最新文章、标签云，一条龙。

顶部导航五个入口：首页、导航、万年历、天气、友链。右上角是登录按钮。

关于深色太空背景

这个背景不是图片，是纯 CSS 画的。深空渐变 + 随机生成的星星 + 一条地球弧线贴在底部。CSS cache-busting 用的 ?v=N，改了样式 bump 版本号就能全站生效，不用清 CDN。

评论：登录一次，信息缓存

评论系统在任意文章页或”关于我”页面底部。打开长这样：

评论表单

表单四个字段：昵称、邮箱、网址、评论内容。传统评论系统每个访客都得每次填一遍，很烦。

这个博客的改进是——

登录后，昵称、邮箱、网址会自动缓存到 localStorage。下次评论时自动填入，不用重复填写。 改了信息也可以手动修改后再提交。

实现方式很简单：

  • 评论提交时，如果检测到已登录态（site-auth.js 写入了 anime_user 到 localStorage），把用户中心里保存的昵称/邮箱/网址自动填入表单
  • 用户在表单里手动改过 → 保存为新值
  • 未登录时走匿名评论，填完就走

网址字段会自动补 https://

如果你填的网址没有协议头，比如只写 example.com，系统会自动在前面加 https://。省得评论区链接打不开。

登录有什么用？

很多人第一反应是”我又不想评论，为什么要登录”。

设计登录的初衷只有一个：在影视屋模块里存个播放记录。不登录，所有功能——评论、工具箱、导航、看文章——都是正常可用的，不会给你弹任何提示。

登录入口在右上角，支持邮箱登录和 GitHub OAuth。登录之后右上角显示头像和下拉菜单。

背景音乐：左下角的唱碟

首页左下角有个唱碟样式的音乐播放器：

左下角音乐播放器示意

设计成黑胶唱碟的样子，带个唱臂。默认不开启，页面加载不会自动播放。你点一下唱碟，音乐开始播放，唱碟开始转；再点一下暂停。

音乐来自 Bogo Cat 猫猫乐队 的翻唱，原曲是 Justin Bieber 的作品。

! 关于音频加载报错
之前每次进页面控制台都会打一个 audio error，原因是浏览器禁止无用户交互的自动播放。现在的做法是延迟到用户点播放时才加载音频资源，彻底避开 autoplay 拦截，error 不会再打了。

音量

默认 0.7，循环播放，单曲循环。

看板娘：右下角设置按钮

首页右下角有个齿轮/设置样式的按钮，点一下展开一个面板，里面有看板娘开关。

看板娘默认关闭

看板娘是个 Live2D 模型，资源比较大（模型文件 + 渲染库），第一次加载可能要等几秒。考虑到不是所有人都喜欢，所以默认是关闭的。你在设置面板里点一下开启，模型就会出现在右下角。

! 资源加载可能较慢
看板娘的模型文件走的是第三方 CDN，国内访问有时会卡。点开后如果几秒没出现，等一等就行。

导航页：收藏了一堆好站

点顶部导航栏的”导航”，进入导航页：

导航页

导航页分两大类：

第一类：本站自研

  • 工具箱：在线实用工具合集
  • 小游戏：休闲小游戏
  • 影视屋：影视资源站点（需登录才能存播放记录）

第二类：外部链接，按用途分十个区：

  • 搜索引擎（Google、Bing、Baidu、DuckDuckGo）
  • AI 工具（ChatGPT、Claude、Gemini、DeepSeek、通义千问、豆包……共 12 个）
  • 开发者（GitHub、Stack Overflow、npm、Docker Hub、MDN、掘金……）
  • 设计资源（Figma、Canva、Dribbble、Unsplash……）
  • 学习平台（B站、知乎、Coursera、LeetCode……）
  • 娱乐影音（YouTube、Bilibili、Netflix、网易云音乐……）
  • 购物生活（淘宝、京东、拼多多、闲鱼）
  • 资讯阅读（36氪、虎嗅、澎湃、少数派、Hacker News……）
  • 云服务 & 运维（Cloudflare、阿里云、腾讯云、Vercel、AWS……）
  • 社交媒体（微博、小红书、抖音、X、Telegram……）
  • 实用工具（Excalidraw、Regex101、Carbon、Wikipedia、DeepL……）

一共收录了 60+ 个常用站点，不用记网址了，来博客找就行。

工具箱：31 个在线工具

工具箱是本站最有内容的一个模块，31 个工具，全部纯前端运行，不用注册、不用登录、不上传数据：

工具箱

按分类来：

  • 格式转换：JSON/YAML/CSV/XML 互转、Base64/URL/Unicode 编解码、进制转换、Markdown 转公众号排版……
  • 开发者工具：JSON 格式化、正则测试、UUID 生成、哈希生成、Cron 解析、JWT 解析、颜色转换、代码高亮……
  • 编码加密：MD5/SHA 加密、AES/RSA 综合加密、摩斯密码、JS 混淆
  • 文本处理：大小写转换、字数统计、Emoji 清理、中英标点转换、正则替换、Markdown 编辑器……
  • 时间工具：时间戳转换、倒计时、秒表、年龄计算
  • 图片处理：压缩、裁剪、格式转换、去水印、二维码生成
  • AI 工具：AI 生图、文案助手

这些工具全部跑在浏览器本地，数据不会传到服务器。做它们的初衷是——写代码时随手需要个在线工具，不用去别的网站翻来翻去。

万年历 & 天气

顶部导航的”万年历”和”天气”是两个独立的小页面，提供日历查询和实时天气信息。侧边栏日历还会显示节气倒计时（大暑、建军节、立秋、七夕……）。

总结一下

功能 是否需登录 一句话
阅读文章 不需要 全站免费开放
发表评论 不需要 登录后信息自动缓存
背景音乐 不需要 点唱碟播放，默认关
看板娘 不需要 设置面板里开启，默认关
工具箱 不需要 31 个纯前端在线工具
导航收藏夹 不需要 60+ 常用站点合集
影视屋播放记录 需要 登录的唯一用处

没什么花哨的东西，就是一个人折腾出来的、能正常用的博客。

欢迎来玩

www.233002.xyz