01. 引言
转眼间博客已经到了B测的阶段,版本号也从v0变为了v1
当我依旧保持一腔热血来更新博客时,我也深刻体会到了一种无力感
一种无论自己如何努力都不及市面上成熟的主题的无力感 (毕竟个人和团队的差距在这里)
不过走一步看一步吧,都做到这里了,我相信一定可以的!
02. 播客简报
近期更新博客内容较为杂乱,具体可以查看博客更新日志页面
1. 博客友链申请
最大的工程就是将GithubIssue的友链申请内嵌到了博客内,并且无需用户自己登录Github就可以完成申请 (最大的门槛就是CloudFlare人机验证了吧)
具体流程如下:
flowchart TD
%% 前端层
A[友链申请页面 www.xscnet.cn/friends-apply/] --> A1[访问 /health 健康检测]
A1 -->|200 ok| A2[页面正常渲染表单]
A1 -->|异常| A_err[页面提示服务故障]
A2 --> B[用户填写友链信息:名称/网址/头像/简介]
B --> C[加载 Cloudflare Turnstile 人机验证]
C --> D{验证通过?}
D -- 否 --> C_err[刷新验证组件]
D -- 是 --> E[点击提交按钮]
E --> F[POST 请求 /friend-apply]
%% /friend-apply 后端逻辑
F --> F1[校验 Origin 跨域白名单]
F1 -- Origin非法 --> R403[返回403 来源禁止访问]
F1 -- Origin合法 --> F2{请求方法是否POST?}
F2 -- OPTIONS预检 --> OPT[返回204 CORS头]
F2 -- 非POST --> R405[405 仅支持POST]
F2 -- POST --> F3[校验环境变量完整性 GitHub/Redis/Turnstile]
F3 -- 缺失配置 --> R503[503 服务未配置]
F3 -- 配置齐全 --> F4[解析Body JSON,校验表单字段]
F4 -- 格式错误 --> R400[400 表单格式错误]
F4 -- 校验通过 --> F5[Upstash Redis 限流判断]
F5 -- 超出频次 --> R429[429 请求过于频繁]
F5 -- 限流正常 --> F6[二次校验Turnstile Token]
F6 -- 验证失败 --> T_err[400 人机验证失败]
F6 -- 验证成功 --> F7[遍历GitHub Issues查重站点URL]
F7 -- 已存在 --> R409[409 重复提交]
F7 -- 无重复 --> F8[调用GitHub API 创建Issue,打上pending标签]
F8 -- GitHub异常 --> R502[502 GitHub接口故障]
F8 -- 创建成功 --> R201[201 返回Issue链接,前端提示提交成功]
%% 待审核列表逻辑(页面加载/刷新调用)
A2 --> G[页面加载调用GET /friend-pending 获取待审核列表]
G --> G1[校验Origin白名单]
G1 -- 非法 --> G403[403 禁止访问]
G1 -- 合法 --> G2{请求方法GET?}
G2 -- OPTIONS预检 --> G_OPT[返回204 CORS]
G2 -- 非GET --> G405[405 仅支持GET]
G2 -- GET --> G3[校验开关&GitHub Token配置]
G3 -- 未配置 --> G503[503 服务未配置]
G3 -- 配置正常 --> G4[请求GitHub API 查询open+pending标签Issues]
G4 -- GitHub报错 --> G502[502 获取列表失败]
G4 -- 获取成功 --> G5[清洗数据:去PR、排序、截断、格式化标题/链接]
G5 --> G6[返回缓存响应 待审核列表JSON]
G6 --> H[前端渲染待审核列表展示]
这套逻辑避免了前端机器人刷友链,又让没有Github账号或者访问不了Github的用户有了申请友链的机会
简单来说:降低友链申请门槛,由自动化程序代理填写GithubIssue
最后的数据处理和友链检测/友链rss抓取还是交由GithubAction自动处理
2. Artalk评论区调整
这一轮更新也对Artalk评论区的样式进行了主题贴合度调整,实现一体化编辑器、对话气泡、回复层级、响应式布局和暗色模式
Artalk 异步评论节点现在会自动应用主题,并在 Swup 切页时释放 Observer
3. 左下角音乐播放器
音乐播放器还是十分感谢柳哥博客提供的灵感,让我也能知道Aplayer播放器也是可以隐藏的 (其实压根没加载aplayer官方的css)
全局音量调整也是集合到了右键菜单里,调整完后会利用本地缓存选择的音量,下次访问也可以美美听歌啦~
同时,也做到了一体化的进度条样式,尽可能地保证美观性的前提下不影响博客的正常阅读和使用


4. 原Hexo Stellar主题全部markdown标签迁移
这可真是个大工程,不过说来Stellar的标签系统还真的是完善的很!
四十多种标签让Codex都犯了难,还好开源主题的优势在这里,可以直接套用部分代码,迁移还算顺利!
虽然我已经不用Stellar主题了,但是还是向大家强烈推荐Hexo的Stellar主题,功能是真的很完善,样式也可以自行DIY
03. 小彩蛋
试试在 主页 释放神秘秘籍(↑↑↓↓←→←→BA),有小惊喜!
小惊喜会不定期更新!
(其实是目前素材没P够罢了)
See U !


评论区加载中...