astro koharu

astro koharu

萌系/二次元风格的 Astro 博客主题,性能优异

Astro
TypeScript
React
Tailwind CSS
December 6, 2025

项目简介

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

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

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

首页采用经典的双栏布局,左侧展示个人头像与社交链接,右侧为置顶文章与文章列表,搭配精美的二次元配图,整体风格温馨可爱。

功能特性

  • 基于 Astro,静态输出,加载轻快
  • 萌系 / 二次元 / 粉蓝配色,适合 ACG、前端、手账向个人站
  • 支持多分类、多标签,但不会强迫你用复杂信息架构
  • 尽可能的减少性能开销
  • 使用 pagefind 实现无后端的全站搜索
  • LQIP(低质量图片占位符),图片加载前显示渐变色占位
  • 优雅的深色/浅色主题切换
  • 可更换评论系统:支持 Waline(推荐)、Giscus、Remark42 三种评论组件,配置文件一键切换,主题自动跟随
  • 完整的 Markdown 增强功能(GFM、代码高亮、自动目录、Mermaid 图表、Infographic 信息图)
  • 灵活的多级分类与标签系统
  • [可开关] 多系列文章支持(周刊、书摘等自定义系列,支持自定义 URL slug)
  • 完整的响应式设计、草稿与置顶功能
  • 阅读进度条与阅读时间估算、智能目录导航,支持 CSS 计数器自动编号(可按文章关闭)
  • 移动端文章阅读头部(显示当前章节标题、圆形阅读进度、可展开目录)
  • 友链系统与归档页面、RSS 订阅支持
  • [可开关] 基于语义相似度的智能文章推荐系统,使用 transformers.js 在本地生成文章嵌入向量,计算文章间的语义相似度
  • [可开关] AI 自动摘要生成,自动生成摘要。
  • [可开关] 圣诞特辑:包含雪花飘落、圣诞配色、圣诞帽装饰、灯串装饰等节日氛围效果
  • 无后端站点公告系统:可通过配置文件管理公告,支持时间控制、多条公告堆叠、自定义颜色、hover 已读
  • 有样式的 RSS 订阅源
  • Koharu CLI:交互式命令行工具,支持备份/还原、内容生成、备份管理
  • 无后端 CMS(本地编辑器 / 浏览器编辑):文章页支持在 config/cms.yaml 启用编辑按钮,在 dev 模式内置浏览器编辑器与本地编辑器协议跳转(VS Code / Cursor / Zed),具体配置见 config/cms.yaml,后续考虑拓展更多 cms 功能,一键修改文件路径等。

功能展示

功能特性一览

主题提供了丰富的组件与功能:文章归档、标签云、分类管理、目录导航、深色模式、CodePen 嵌入等,满足博客的各种需求。

性能表现

Lighthouse 性能评分

基于 Astro 的静态生成能力,主题在 Lighthouse 测试中取得了优异成绩:

  • 性能: 99 分
  • 无障碍: 100 分
  • 最佳实践: 100 分
  • SEO: 100 分

核心指标:FCP 0.3s、LCP 0.6s、TBT 80ms、CLS 0。

技术栈

  • 框架: Astro 5.x
  • 语言: TypeScript (69.7%)
  • UI: React + Tailwind CSS
  • 搜索: Pagefind

文档

特色功能演示图片

  • 图片加载前显示渐变色占位,提升视觉体验 - 介绍文章 LQIP
  • 使用 view-transition 实现的流畅的深色模式切换主题过渡动画。 主题过渡动画
  • Markdown 增强 - 链接嵌入功能 - 示例 链接嵌入功能
  • Markdown 增强 - 使用 @antv/infographic 创建各种精美的信息图表。 Infographic 信息图指南 信息图语法
  • 有样式的 RSS 订阅源链接 - 示例 RSS 订阅源链接
  • 公告系统 公告系统

Star History

Star History Chart

Koharu CLI

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

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

License

GNU Affero General Public License version 3 (AGPL-3.0)