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 !