【开源博客】Koharu 一个新的二次元 Astro 博客主题,粉蓝配色为主,加了一点点前端魔法~

第一次发帖,有点小紧张x

以前使用 Shoka 主题,但无奈性能感觉跟不上了,再加上自己又是前端开发者,于是写了一个博客主题,感觉功能差不多了打算发一下,鞭策自己更新。

一个萌系 / 二次元 / 粉蓝配色的博客主题,适合 ACG 、前端、手账向个人站,性能优异。

命名灵感来源于 “小春日和”(こはるびより)指的是晚秋到初冬这段时期,持续的一段似春天般温暖的晴天。也就是中文中的"小阳春"。

博客整体设计灵感来自 Hexo 的 Shoka 主题,用更现代的技术栈打造属于你的个人博客。

  • 基于 Astro,静态输出,加载轻快
  • 萌系 / 二次元 / 粉蓝配色,适合 ACG 、前端、手账向个人站
  • 支持多分类、多标签,但不会强迫你用复杂信息架构
  • 尽可能的减少性能开销
  • 使用 pagefind 实现无后端的全站搜索
  • LQIP (低质量图片占位符),图片加载前显示渐变色占位
  • 评论组件可选 Waline / Giscus / Remark42

已经在 astro 主题商店上架啦~

主题: Koharu | Astro

我的博客: https://blog.cosine.ren

开源在 GitHub - cosZone/astro-koharu: astro-koharu 是一个萌系/二次元/粉蓝配色的 astro 主题博客,灵感来自 Hexo 的 Shoka 主题,加了很多自己的小巧思,性能优越。

是用爱发电的个人项目,喜欢的话欢迎 star 或者 fork 出去改~

持续迭代中,还有挺多 bug 在改,技术栈也挺激进的,不过我个人用起来很喜欢,毕竟就是照着自己喜欢的风格写的,还有很多小巧思不知道有没有人会探索到~

几篇关于实现过程中的技术解析文章:

功能特性

  • 基于 Astro 5.x,静态站点生成,性能优异
  • 优雅的深色/浅色主题切换
  • 基于 Pagefind 的无后端全站搜索
  • 可更换评论系统:支持 Waline(推荐)、Giscus、Remark42 三种评论组件,配置文件一键切换,主题自动跟随
  • 完整的 Markdown 增强功能(GFM、代码高亮、自动目录、Mermaid 图表、Infographic 信息图)
  • 灵活的多级分类与标签系统
  • [可开关] 多系列文章支持(周刊、书摘等自定义系列,支持自定义 URL slug)
  • 响应式设计
  • 草稿与置顶功能
  • 阅读进度条与阅读时间估算
  • 智能目录导航,支持 CSS 计数器自动编号(可按文章关闭)
  • 移动端文章阅读头部(显示当前章节标题、圆形阅读进度、可展开目录)
  • 友链系统与归档页面
  • RSS 订阅支持
  • 支持 LQIP:图片加载前显示渐变色占位,提升视觉体验
  • [可开关] 基于语义相似度的智能文章推荐系统,使用 transformers.js 在本地生成文章嵌入向量,计算文章间的语义相似度
  • [可开关] AI 自动摘要生成,自动生成摘要。
  • [可开关] 圣诞特辑:包含雪花飘落、圣诞配色、圣诞帽装饰、灯串装饰等节日氛围效果
  • 无后端站点公告系统:可通过配置文件管理公告,支持时间控制、多条公告堆叠、自定义颜色、hover 已读
  • 有样式的 RSS 订阅源链接
  • Koharu CLI:交互式命令行工具,支持备份/还原、内容生成、备份管理

Koharu CLI

博客自带交互式 CLI 工具,方便管理博客内容:

pnpm koharu              # 交互式主菜单
pnpm koharu backup       # 备份博客内容和配置
pnpm koharu restore      # 从备份恢复
pnpm koharu update       # 更新主题
pnpm koharu generate     # 生成内容资产 (LQIP, 相似度, AI 摘要)
pnpm koharu clean        # 清理旧备份
pnpm koharu list         # 查看所有备份

备份与还原

更新主题

使用 CLI 自动更新主题(会自动备份 → 拉取 → 合并 → 安装依赖):

# 完整更新流程(默认会先备份)
pnpm koharu update

# 仅检查更新
pnpm koharu update --check

# 跳过备份直接更新
pnpm koharu update --skip-backup

配置说明

博客配置统一使用 config/site.yaml 文件管理,包括:

  • 站点基本信息(标题、副标题、作者等)
  • 社交媒体链接
  • 导航菜单
  • 特色分类和周刊配置
  • 分类映射(中文分类名 → URL slug)
  • 友链列表
  • 公告系统
  • 评论系统(Waline / Giscus / Remark42,推荐使用 Waline)
  • 数据统计(Umami)
  • 圣诞特辑开关

详细配置说明请参考文档。

评论系统切换

config/site.yaml 中通过 comment.provider 字段一键切换评论系统:

comment:
  provider: waline # 'waline' | 'giscus' | 'remark42' | 'none'
  waline:
    serverURL: https://your-waline-server.vercel.app
    # ... 其他配置

推荐使用 Waline:自部署简单、功能丰富(Markdown、表情、邮件通知)、带访问量统计。详细配置请参考完整使用指南

文档

演示图 1

性能优异:目标是 PC 的全绿,但是随着功能迭代不可避免的需要反复检查!

41 个赞

感谢分享 风格很可爱哈哈

1 个赞

很好看 感谢分享!

1 个赞

感谢开源!

1 个赞

很好看,今天正好在选博客,然后想用nextjs框架,后面先去看看了astro的模板仓库,然后就看到了版主的主题,确实很棒,没想到回来水水论坛就看到作者了 :star_struck:

1 个赞

刚刚好 下载个试试看 玩玩

1 个赞

好看!支持!

2 个赞

用astro我们就是好朋友!

1 个赞

捕捉大佬,经常出现在我推的 timeline,哈哈

1 个赞

太强了大佬!

1 个赞

佬友的rss主题很赞 :xhs_033:

1 个赞

好可爱w

1 个赞

哇!不错呀!

2 个赞

好看啊,有空我也去试试

1 个赞

看起来不错,试试看

1 个赞

很可爱! :+1:

1 个赞

感谢分享

1 个赞

主题好看,佬友的博客也好强! :face_holding_back_tears:

1 个赞

厉害了佬

1 个赞

谢谢喜欢 :heart: