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)