博客技术栈与框架介绍

欢迎来到 葱葱小窝！本站不是「纯静态页 + 第三方评论云函数」的简单组合，而是 Hexo 静态前端 + 自研 Java 后端 前后端分离架构。本文按当前线上实际实现，介绍各层技术与它们如何协作。

整体架构一览

┌─────────────────────────────────────────────────────────────┐
│  浏览器访问 https://blog.mosicong.top（静态 HTML/CSS/JS）      │
└───────────────────────────┬─────────────────────────────────┘
                            │ Ajax / Fetch
                            ▼
┌─────────────────────────────────────────────────────────────┐
│  自研 Java 后端（Spring Boot 3）                              │
│  · Waline 兼容评论 API                                       │
│  · 友链申请 / 留言悄悄话 / 评论图上传 / QQ 信息查询            │
└───────────┬─────────────────────────────┬───────────────────┘
            │                             │
            ▼                             ▼
     ┌──────────────┐              ┌──────────────┐
     │ Redis 缓存    │              │ MySQL 持久化  │
     │ 评论列表/计数  │              │ comment 等表  │
     │ 最近评论等     │              └──────────────┘
     └──────────────┘
            │
            ▼
     ┌──────────────┐
     │ 阿里云 OSS    │  文章封面、评论图片、头像等资源
     └──────────────┘

日常发布流程：

1. 在 source/_posts/ 用 Markdown 写文章
2. 执行 hexo clean && hexo generate 生成 public/ 静态资源
3. 将静态资源部署到服务器 / OSS / CDN
4. 评论、友链、悄悄话等动态能力由 自研后端 实时提供（前端通过 waline.serverURL 指向 API 服务）

一、静态站点：Hexo

Hexo 负责把 Markdown 文章编译为静态页面，是本博客的内容引擎。

为什么选择 Hexo？

• ⚡ 生成快：本地一键 hexo g，适合个人博客体量
• 📝 Markdown 写作：正文与元数据分离，维护成本低
• 🎨 主题生态成熟：本站在 AnZhiYu 主题上做了定制
• 🔌 插件扩展：标签、摘要、部署等均可插件化

常用命令

hexo new "文章标题"      # 新建文章
hexo clean               # 清理缓存
hexo generate            # 生成 public/
hexo server              # 本地预览（默认 4000 端口）

博客静态源码与 Java 后端在同一仓库中维护，便于本地联调。

二、前端展示：AnZhiYu 主题

主题：AnZhiYu（安知鱼），配置文件为 _config.anzhiyu.yml。

主题层技术

本站已启用的代表性功能

主题魔改包括：侧边栏「最新评论」卡片、作者卡悬停文案、评论相关样式等，模板位于 themes/anzhiyu/layout/。

三、动态后端（Spring Boot）

自研 Java 后端 是本博客的能力中枢，技术选型如下：

3.1 评论系统（Waline 兼容）

前端 comments.use: Waline，waline.serverURL 指向自研 API 服务，无需单独部署 Waline 官方服务端。

主要接口（节选）：

缓存策略（最近评论为例）：

1. 先查 Redis（comment:recent:{count}）
2. 未命中再查 MySQL，结果写回 Redis
3. 发表/点赞评论时失效相关缓存，保证数据一致

自研能力还包括：评论 Markdown 渲染、QQ 邮箱自动头像、IP 归属地展示、评论禁言、回复邮件通知等。

3.2 友链申请

3.3 留言板悄悄话

通过 POST /api/guestbook/mail 将留言内容邮件发送给博主（与公开评论区独立）。

3.4 其他 API

• GET /api/qq/info：根据 QQ 号解析昵称与头像（评论框快捷填写）
• GET /api/article：Waline 兼容的阅读数（按需）
• POST /api/comment/cache/refresh：清理评论 Redis 缓存（运维）

跨域已配置 blog.mosicong.top 及本地开发域名，便于静态站与 API 分离部署。

四、前端核心库（主题内置）

与 AnZhiYu 主题一同打包的前端依赖，负责阅读体验：

• Lozad：图片懒加载
• Fancybox：图片灯箱
• Swiper：首页轮播
• Prism.js：代码高亮
• PJAX：无刷新切页
• @waline/client：评论 UI（对接自研 API）

五、内容与资源

Markdown + Front-matter

---
title: 文章标题
date: 2026-05-23 10:00:00
updated: 2026-05-27 18:30:00
tags:
  - 标签
categories: 分类
description: 摘要
cover: https://xxx.oss.../cover.jpg
comments: true
toc: true
---

支持代码块、表格、任务列表、公式（KaTeX）等标准 Markdown 扩展。

阿里云 OSS

• 文章封面、图床、评论上传图片 均走 OSS（广州节点 + CDN）
• 减轻源站带宽压力，全国访问更稳定

六、部署与联调建议

生产环境请将 _config.anzhiyu.yml 中 waline.serverURL 配置为可公网访问的 API 根地址（推荐与博客同域，由网关将 /api 转发至后端，避免跨域与混合内容问题）。

本地联调最小清单：

1. 启动 MySQL、Redis
2. 启动 Java 后端服务
3. hexo g 后预览静态站
4. 打开文章页与首页，确认评论区、侧边栏「最新评论」正常

七、其他服务

结语

葱葱小窝从「漂亮主题 + 静态页」演进为 静态内容 + 自研 API 的完整方案：Hexo 保证写作与发布效率，Spring Boot 承接评论与互动，Redis 与 MySQL 兼顾性能与可靠，OSS 统一托管媒体资源。

后续若继续迭代，可能会在现有架构上扩展搜索、统计看板或更多互动模块，但分层思路会保持不变：能静态化的尽量静态化，必须动态的交给自研后端。

致谢

感谢 安知鱼 开源的 Hexo 主题，让静态层拥有极佳的阅读体验；Waline 客户端协议则为自研后端提供了清晰的前端对接标准。

相关链接

• Hexo 官方文档
• AnZhiYu 主题仓库
• Waline 文档
• Spring Boot 文档
• MyBatis 文档