AstroBlog

astro-theme-AronaNote — Astro Blog Template

By sf-yuzifu

A personal blog theme built with Astro, featuring Blue Archive-style visuals, with integrated Spine character animations, Waline comments, full-text search, and a bangumi tracking page.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Blue Archive-style visuals, including light and dark homepage backgrounds

02

Spine character animations (Arona / Plana / Kei / Aris), supporting click voice, copy notifications, and automatic hiding on mobile

03

Integrated Waline comments, full-text search, KaTeX math formulas, and Expressive Code syntax highlighting

04

Provides friends, project showcase, and Bilibili bangumi tracking pages

05

Supports PWA offline access, RSS, Sitemap, image lightbox, and reading progress bar

06

Centralized configuration in config.yml for site, navigation, comments, music, and bangumi modules

Template Details

AronaNote is a personal blog theme built on the Astro framework, with a visual style referencing the Blue Archive game. The theme provides common blog capabilities such as a homepage banner, article lists, tag categories, full-text search, Waline comments, code highlighting with line numbers, LaTeX math formulas, RSS and Sitemap, image lightbox, reading time estimation, article table of contents navigation, PWA offline access, keyboard shortcuts, and Open Graph/SEO.

In terms of interaction and visuals, the theme includes built-in Spine model animations (Arona / Plana / Kei / Aris), supporting click-to-play voice, copy event notifications, automatic hiding on mobile, desktop transparency adjustment, and automatic lifting when scrolling to the footer; it also includes a first-screen loading animation, dark mode toggle, click fireworks effect, and background music playback (Howler.js with a random track library).

For content organization, the theme provides a friends page, project showcase page, bangumi tracking page (tracking Bilibili anime via astro-bangumi integration), and article pinning (by setting a pinned value in frontmatter). Site configuration is centralized in config.yml, allowing adjustment of site information, navigation, comments, sponsorship, feature toggles, Spine characters, hitokoto, music, and bangumi modules.

Regarding usage limitations, comments depend on an external Waline server, background music depends on an external music API, and bangumi data depends on Bilibili or bgmv0 data sources; these external services may incur additional costs or require self-deployment. Third-party assets such as demo images, fonts, icons, and Spine models must be checked against their respective licenses and cannot be judged solely by the code's MIT license.

AstroBlog

Is it right for your project?

Use Cases

  • Building a personal blog with anime-style character animations and background music
  • A writing site that needs article tags, full-text search, comments, and math formula support
  • A site for showcasing personal projects, friend links, and tracking Bilibili anime
  • A static blog that needs PWA offline access and RSS/Sitemap

Suitable For

  • Individual developers familiar with Astro or front-end build processes
  • Users who like the Blue Archive visual style and are willing to configure Spine assets
  • Users who can self-deploy or use external services such as a Waline server and music API
  • Creators who need a Chinese interface and a mobile-responsive blog

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    After cloning the repository, use yarn install to install dependencies, yarn dev to start the development server, and yarn build to build the production version

  2. 2

    Fill in basic information such as site title, description, author, URL, navigation menu, and social links in config.yml

  3. 3

    The comment feature requires configuring Waline's serverURL; the music feature requires providing a music API address and a list of song IDs

  4. 4

    The bangumi page requires filling in the Bilibili or bgmv0 user ID and data source in the bangumi configuration

  5. 5

    Resources such as Spine models, audio, avatars, and background images must be placed according to the directory structure in the README, and third-party asset licenses must be checked

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version's code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
  • The comment feature depends on an external Waline server, requiring self-deployment or use of a third-party Waline service, which may incur additional costs or require account configuration.
  • Background music playback depends on an external music API address, which must be provided or deployed by the user and may incur additional costs.
  • The bangumi page depends on external data sources from Bilibili or bgmv0, requires a user ID, and data retrieval is subject to the availability of third-party services.
  • Third-party assets such as Spine character models must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

comments: enable: true type: "waline" # 支持: waline waline: serverURL: "https://your-waline-server.vercel.app"

Original README

# 音乐 API 地址，{id} 会被替换为歌曲 ID api: "https://your-music-api.com/song/{id}"

Original README

source: "bili" # 'bili' | 'bgmv0' - 数据源选择 vmid: "你的用户ID" # 用户 ID（必填，Bilibili UID 或 BGMTV UID）

Original README

- **Spine 模型**: `public/spine_assets/` - 支持 Arona、Plana、Kei、Aris 等角色模型

Original README
https://github.com/sf-yuzifu/astro-theme-AronaNote/blob/main/LICENSEhttps://github.com/sf-yuzifu/astro-theme-AronaNote/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-04. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 83 / 100
Technologies
Astro
Website type
Blog
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2026-04-11
Screenshot last checked
2026-10-04

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Astro as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-05

Inspect the recorded source material

SHA-256: 80d871e2bb8394d118b3396ecf698746194545da5e20282661a539e38fca1b74

2026-10-04T21:25:25.208Z

Source file / repository
# AronaNote

![logo](src/assets/theme/icon/footLogo.png)

基于 Astro 构建的个人博客主题，灵感来自 Blue Archive 游戏风格。

**预览**: [arona-note.netlify.app](https://arona-note.netlify.app)

**亮色模式：**

![亮色模式](images/light.png)

**暗色模式：**

![暗色模式](images/dark.png)


## 功能特性

- [x] 首页横幅 Banner
- [x] 文章列表展示
- [x] 标签分类系统
- [x] 全文搜索功能
- [x] Waline 评论系统
- [x] 代码高亮与行号显示
- [x] 手机端响应式适配
- [x] LaTeX 数学公式支持
- [x] 点击烟花效果
- [x] 底栏信息展示
- [x] 优化 404 页面
- [x] Spine 模型动画（Arona / Plana / Kei / Aris）
  - [x] 点击语音播放
  - [x] 复制事件提示
  - [x] 移动端自动隐藏
  - [x] 桌面端透明度优化
  - [x] 滚动到页脚自动抬升
- [x] 首屏加载动画
- [x] 夜间模式切换
- [x] RSS 订阅
- [x] 站点地图Sitemap生成
- [x] 图片灯箱浏览
- [x] 阅读时间估算
- [x] 友链页面
- [x] 项目展示页面
- [x] 背景音乐播放（Howler.js + 随机曲库）
- [x] 文章目录导航 (TOC)
  - [x] 桌面端侧边栏固定
  - [x] 移动端底部弹窗
- [x] PWA 支持（离线访问、自动更新）
- [x] 键盘快捷键（`/` 打开搜索，`Esc` 关闭）
- [x] Open Graph / SEO 优化
- [x] 文章置顶功能（在 frontmatter 中设置 `pinned` 数值）
- [x] 图片懒加载
- [x] 文章阅读进度条
- [x] 路由跳转进度条（NProgress）
- [x] 追番页面（Bilibili 番剧追踪）

## 技术栈

- **框架**: [Astro](https://astro.build/) - 高性能静态站点生成器
- **UI 框架**: [Vue 3](https://vuejs.org/) - 渐进式 JavaScript 框架
- **样式**: [Less](https://lesscss.org/) - 动态样式语言
- **代码高亮**: [Expressive Code](https://expressive-code.com/) - 美观的代码块
- **数学公式**: [KaTeX](https://katex.org/) - 快速数学排版
- **评论系统**: [Waline](https://waline.js.org/) - 简洁安全的评论系统
- **图片浏览**: [PhotoSwipe](https://photoswipe.com/) - 触摸优化的图片灯箱
- **渲染引擎**: [PixiJS](https://pixijs.com/) - 高性能 2D WebGL 渲染器
- **动画模型**: [Spine](https://esotericsoftware.com/) - 2D 骨骼动画
- **音频引擎**: [Howler.js](https://howlerjs.com/) - Web Audio API 音频库
- **图标**: [Astro Icon](https://www.astroicon.dev/) + [Phosphor Icons](https://phosphoricons.com/) + [Font Awesome](https://fontawesome.com/)
- **PWA**: [@vite-pwa/astro](https://vite-pwa-org.netlify.app/frameworks/astro.html) - Astro PWA 插件
- **进度条**: [NProgress](https://ricostacruz.com/nprogress/) - 页面加载进度指示器
- **图片处理**: [Sharp](https://sharp.pixelplumbing.com/) - 高性能 Node.js 图像处理库
- **阅读时间**: [reading-time](https://github.com/ngryman/reading-time) - 文章阅读时间估算
- **YAML 解析**: [js-yaml](https://github.com/nodeca/js-yaml) - YAML 解析器和序列化器
- **追番集成**: [astro-bangumi](https://github.com/sf-yuzifu/astro-bangumi) - Bilibili 番剧追踪集成

## 快速开始

```bash
# 克隆项目
git clone <repository-url>
cd astro-blog

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 构建生产版本
yarn build

# 预览生产构建
yarn preview
```

## 项目配置

配置文件位于 `config.yml`，包含以下主要配置项：

```yaml
# 站点基本信息
site:
  title: "Astro Blog"
  description: "Welcome to my website!"
  author: "Your Name"
  avatar: "/theme/banner/avatar.webp"
  favicon: "/favicon.ico"
  faviconDark: "/favicon_dark.ico" # 暗色模式图标（可选）
  url: "https://example.com"
  lang: "zh-CN"
  # 备案信息（可选）
  icp:
    - text: "萌ICP备114514号"
      url: "https://icp.gov.moe/"
  # 社交链接
  social:
    - icon: "fa7-brands:github"
      url: "https://github.com/username"

# 导航菜单
nav:
  - name: "首页"
    url: "/"
  - name: "标签"
    url: "/tags/"
  - name: "项目"
    url: "/project/"
  - name: "追番"
    url: "/bangumi/"
  - name: "友链"
    url: "/friends/"
  - name: "关于"
    url: "/about/"

# 友链配置
friends:
  enable: true
  title: "友情链接"
  description: "与优秀的开发者们互相连接"
  list:
    - name: "Astro"
      url: "https://astro.build"
      description: "The web framework for content-driven websites"
      avatar: "https://astro.build/favicon.svg"

# 项目展示配置
projects:
  enable: true
  title: "我的项目"
  description: "开源作品与个人项目展示"
  list:
    - name: "Astro Blog"
      url: "https://github.com/withastro/astro"
      description: "使用 Astro 构建的个人博客网站"
      tags: ["Astro", "TypeScript"]
      icon: "ph:rocket-launch-bold"

# 评论系统
comments:
  enable: true
  type: "waline"  # 支持: waline
  waline:
    serverURL: "https://your-waline-server.vercel.app"
    dark: 'html[theme="dark"]'
    lang: "zh-CN"
    requiredMeta: ["nick", "mail"]
    pageview: true
    comment: true
    # 任何其他 Waline 支持的配置...（https://waline.js.org/reference/client/props.html）
    # 比如：
    # emoji: ['https://unpkg.com/@waline/[email protected]/weibo']
    # ...

# 捐赠/赞助配置
sponsor:
  enable: true
  title: "喜欢这篇文章？打赏一下作者吧"
  description: "如果我的文章对你有帮助，欢迎赞赏支持"
  methods:
    - name: "微信"
      image: "/donate/donate.png"
      icon: "ph:wechat-logo-bold"
      color: "#07c160"

# 功能开关
features:
  search: true          # 搜索功能
  backToTop: true       # 返回顶部
  themeToggle: true     # 主题切换
  pageTransition: true  # 页面过渡动画
  readingTime: true     # 阅读时间估算

# Spine Live2D 角色配置
spine:
  enable: true
  voiceLang: "zh"  # zh (中文) 或 jp (日语)
  characters:
    arona:  # 亮色主题角色
      skelUrl: "/spine_assets/aris/aris_spr.skel"
      atlasUrl: "/spine_assets/aris/aris_spr.atlas"
      idleAnimationName: "Idle_01"
      eyeCloseAnimationName: "Eye_Close_01"
      rightEyeBone: "R_Eye_01"
      leftEyeBone: "L_Eye_01"
      frontHeadBone: "Head_01"
      backHeadBone: "Head_Back"
      eyeRotationAngle: 76.307
      voiceConfig:
        - audio: "/spine_assets/aris/audio/aris_01.ogg"
          animation: "10"
          text: "唔——肚子饿了。"
      copyConfig:  # 复制事件配置（可选）
        audio: "/spine_assets/aris/audio/aris_copy.mp3"
        animation: "07"
        text: "邦邦咔邦！复制了有用的知识呢！"
      # 位置偏移配置（可选，不配置则使用默认位置）
      offset:
        left: "0" # 水平位置偏移，支持 % 或 px
      #   bottom: "20px"  # 垂直位置偏移，支持 % 或 px
    plana:  # 暗色主题角色
      skelUrl: "/spine_assets/kei/CH0335_spr.skel"
      atlasUrl: "/spine_assets/kei/CH0335_spr.atlas"
      idleAnimationName: "Idle_01"
      eyeCloseAnimationName: "Eye_Close_01"
      rightEyeBone: "R_Eye_01"
      leftEyeBone: "L_Eye_01"
      frontHeadBone: "Head_Rot"
      backHeadBone: "Head_Back"
      eyeRotationAngle: 97.331
      voiceConfig:
        - audio: "/spine_assets/kei/audio/kei_01.ogg"
          animation: "17"
          text: "请别说我可爱啦！"
      copyConfig:
        audio: "/spine_assets/kei/audio/kei_copy.ogg"
        animation: "07"
        text: "我能帮上忙吗？"
      # 位置偏移配置（可选，不配置则使用默认位置）
      # offset:
      #   left: "5%"      # 水平位置偏移，支持 % 或 px
      #   bottom: "20px"  # 垂直位置偏移，支持 % 或 px

# 一言/座右铭配置
hitokoto:
  enable: true
  list:
    - "生活不止眼前的苟且，还有诗和远方。"
    - "Stay hungry, stay foolish."

# 背景音乐配置
music:
  # 是否启用（需要 features.music 也为 true）
  enable: true
  # 音乐 API 地址，{id} 会被替换为歌曲 ID
  api: "https://your-music-api.com/song/{id}"
  # 曲库歌曲 ID 列表（随机播放）
  songIds:
    - 12345678
    - 87654321
  # 音量（0-1，默认 0.3）
  volume: 0.3
  # 音乐 URL 在返回 JSON 中的字段路径，用 . 分隔层级
  urlField: "data.url"

# 追番配置
bangumi:
  # 是否启用
  enable: true
  # 页面配置
  page:
    title: "我的追番"
    description: "追番快乐！我收藏的番剧都在这里"
  # 集成配置
  integration:
    source: "bili"  # 'bili' | 'bgmv0' - 数据源选择
    vmid: "你的用户ID"  # 用户 ID（必填，Bilibili UID 或 BGMTV UID）
    title: "追番列表"  # 页面标题
    quote: "生命不息，追番不止！"  # 页面引言
    coverMirror: ""  # 封面图片代理地址，用于解决防盗链
    category: [1, 2]  # 分类：1=番剧, 2=影视（仅 bili 源）
    lazyload: true  # 启用图片懒加载
    devMode: true  # 开发模式，开发环境下自动获取数据
    refreshEndpoint: "/api/bangumi/refresh"  # 刷新 API 端点路径，设为 false 禁用
    showMyComment: false  # 显示个人评论（仅 bgmv0 源）
    localDataPath: "./bangumi-local.json"  # 本地番剧数据文件路径（相对项目根目录）
    extraOrder: 0  # 本地数据显示顺序：1=优先显示，其他=默认顺序
  # 组件配置
  component:
    categoryFilter: "all"  # 'all' | '1' | '2'
    show: 1  # 0=想看, 1=在看, 2=看过
    title: ""
    quote: ""
    darkSelector: "html:not([theme='dark'])"
```

## 文章配置

在文章 Frontmatter 中可以配置以下选项：

```markdown
---
title: 文章标题
description: 文章描述
date: 2024-01-01
tags:
  - 标签1
  - 标签2
image: /blog-placeholder-1.jpg  # 封面图片
pinned: 1  # 置顶等级，数值越大越靠前
---

文章摘要，会显示在文章列表中

---

正文内容...
```

## 资源文件

- **头像/背景**: `src/assets/theme/banner/`
  - `avatar.webp` - 站点头像
  - `banner.webp` - 首页背景
  - `banner_dark.webp` - 暗色模式首页背景
  - `bgm.mp3` - 背景音乐

- **Spine 模型**: `public/spine_assets/`
  - 支持 Arona、Plana、Kei、Aris 等角色模型

## 感谢

- [Astro](https://astro.build/) - 快速、内容驱动的网站框架
- [vitepress-theme-bluearchive](https://github.com/Alittfre/vitepress-theme-bluearchive) - 本主题的设计灵感来源
- [vitepress-theme-sakura](https://github.com/flaribbit/vitepress-theme-sakura) - 提供参考
- [spine-runtimes](https://github.com/esotericsoftware/spine-runtimes) - Spine 动画运行时
- [Resource Han Rounded](https://github.com/CyanoHao/Resource-Han-Rounded) - 字体资源
- [hexo-bilibili-bangumi](https://github.com/HCLonely/hexo-bilibili-bangumi) - 追番功能灵感来源

## License

[MIT](LICENSE)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

astrowind

astrowind

AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.

Astro · Blog

astro-paper

astro-paper

AstroPaper is a minimal, responsive, accessible, and SEO-friendly Astro blog theme. Articles are stored as Markdown/MDX in src/content/posts/, with subdirectories affecting URLs.

Astro · Blog

fuwari

fuwari

Fuwari is a static blog template built with Astro and Tailwind CSS for personal blogs. It manages posts as Markdown files in src/content/posts/, with frontmatter for title, date, description, cover, tags, categories, draft status, and language.

Astro · Blog

Firefly

Firefly

Firefly is a clean personal blog theme forked from Astro and Fuwari, offering four background modes, single/double sidebar and list/grid layouts, Pagefind client-side full-text search, and a six-language UI.

Astro · Blog

astro-theme-cactus

astro-theme-cactus

Astro Cactus is an Astro-based blog and portfolio theme that uses Markdown/MDX content collections to manage posts, notes, and tags, with frontmatter type-checked by a schema.

Astro · Portfolio

astrofy

astrofy

Astrofy is a free and open-source personal portfolio website template built with Astro and TailwindCSS, with built-in blog, CV timeline, project showcase, store, and RSS feed modules.

Astro · Portfolio