项目介绍
AronaNote 是一个基于 Astro 构建的个人博客主题，灵感来自《蔚蓝档案》游戏风格。它拥有优雅的设计、丰富的功能，适合搭建个人博客站点。
功能特性
📝 内容展示
- 首页横幅 Banner
- 文章列表展示
- 标签分类系统
- 文章目录导航（TOC）
- 桌面端侧边栏固定
- 移动端底部弹窗
- 文章置顶功能
- 阅读时间估算
- 文章阅读进度条
🎨 视觉体验
- 亮色/暗色模式切换
- Spine 模型动画（Arona / Plana / Kei / Aris）
- 点击语音播放
- 复制事件提示
- 移动端自动隐藏
- 滚动到页脚自动抬升
- 首屏加载动画
- 路由跳转进度条（NProgress）
- 点击烟花效果
- 图片灯箱浏览（PhotoSwipe）
🔧 功能集成
- 全文搜索功能
- Waline 评论系统
- RSS 订阅
- 站点地图 Sitemap 生成
- PWA 支持（离线访问、自动更新）
- 追番页面（支持 Bilibili 和 Bangumi.tv）
- 友链页面
- 项目展示页面
- 背景音乐播放
🛠️ 开发体验
- 代码高亮与行号显示
- LaTeX 数学公式支持
- 图片懒加载
- 手机端响应式适配
- 键盘快捷键（
/打开搜索，Esc关闭） - Open Graph / SEO 优化
技术栈
| 技术 | 说明 |
|---|---|
| Astro | 高性能静态站点生成器 |
| Vue 3 | 渐进式 JavaScript 框架 |
| Less | 动态样式语言 |
| Expressive Code | 美观的代码高亮 |
| KaTeX | 数学公式渲染 |
| Waline | 评论系统 |
| PhotoSwipe | 图片灯箱 |
| Spine | 2D 骨骼动画 |
| Howler.js | 音频引擎 |
| NProgress | 页面加载进度 |
快速开始
# 克隆项目git clone https://github.com/sf-yuzifu/astro-theme-AronaNote.gitcd astro-theme-AronaNote
# 安装依赖yarn install
# 启动开发服务器yarn dev
# 构建生产版本yarn build配置说明
配置文件位于 config.yml，包含站点信息、导航菜单、友链、项目、评论、Spine角色、音乐等配置。
站点配置
site: title: "Your Blog" description: "Your description" author: "Your Name" avatar: "/avatar.png" url: "https://your-domain.com" social: - icon: "fa7-brands:github" url: "https://github.com/username"Spine 角色配置
支持配置亮色/暗色模式下的不同角色：
spine: enable: true voiceLang: "zh" characters: arona: # 亮色模式 skelUrl: "/spine_assets/aris/aris_spr.skel" atlasUrl: "/spine_assets/aris/aris_spr.atlas" voiceConfig: - audio: "/audio/voice1.ogg" text: "语音文本" plana: # 暗色模式 skelUrl: "/spine_assets/kei/CH0335_spr.skel" # ...追番配置
支持 Bilibili 和 Bangumi.tv 两种数据源：
bangumi: enable: true integration: source: "bili" # 或 "bgmv0" vmid: "你的用户ID" title: "追番列表" quote: "生命不息，追番不止！"文章配置
在文章 Frontmatter 中可以配置：
---title: 文章标题description: 文章描述pubDate: 2024-01-01updatedDate: 2024-01-02heroImage: /cover.jpgtags: - 标签1 - 标签2pinned: 1 # 置顶等级，数值越大越靠前---预览
亮色模式：
暗色模式：
项目地址
致谢
- Astro - 快速、内容驱动的网站框架
- vitepress-theme-bluearchive - 设计灵感来源
- spine-runtimes - Spine 动画运行时
- Resource Han Rounded - 字体资源
