Forked from Fuwari and built on Astro, using Tailwind CSS and Iconify, with the original Fuwari layout retained and switchable
AstroBlog
Blog (Chimeng1314) — Astro Blog Template
By Chimeng1314
A fresh-style personal blog theme template forked from Fuwari and built on Astro, offering a multilingual interface, multiple wallpaper and sidebar layouts, and configuration-file-driven customization.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
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-09-30View source
What stands out
A quick read of the recorded project description.
Offers four wallpaper modes: banner wallpaper, fullscreen wallpaper, fullscreen transparent wallpaper, and solid color background, plus light/dark/system-following display
Supports single-sidebar and dual-sidebar layouts, with the article list switchable between single-column list and grid (multi-column/masonry) layouts
Built-in Pagefind client-side full-text search with article content indexing
UI supports Simplified Chinese, Traditional Chinese, English, Japanese, Russian, and Korean; languages other than Simplified Chinese are AI-translated
Markdown extensions support four styles of admonitions, GitHub repository cards, and enhanced code blocks based on Expressive Code
Template Details
Firefly is a personal blog theme template built on Astro, forked by CuteLeaf from the Fuwari template and released under the MIT license. Aimed at tech enthusiasts and content creators, it uses Astro for static site generation, Tailwind CSS for styling, Iconify for icons, and retains the original Fuwari layout, which can be freely switched in configuration files.
On the interface level, the template offers wallpaper modes including banner wallpaper, fullscreen wallpaper, fullscreen transparent wallpaper, and solid color background. It supports light, dark, and system-following display modes, with theme colors adjustable across a 360° hue range. Layout-wise, it supports single-sidebar and dual-sidebar configurations, and the article list can be set to a single-column list or grid (multi-column/masonry). The navigation bar's logo, title, and links, as well as the footer HTML content, are customizable.
For content and functionality, the template includes client-side full-text search based on Pagefind, supporting article content indexing. The UI provides i18n multilingual support, including Simplified Chinese, Traditional Chinese, English, Japanese, Russian, and Korean. Languages other than Simplified Chinese are AI-translated, and corrections via pull requests are welcome. Markdown support extends beyond GitHub Flavored Markdown to include admonitions (in GitHub, Obsidian, VitePress, and Docusaurus styles), GitHub repository cards, and enhanced code blocks based on Expressive Code.
For content organization, articles use Markdown and Frontmatter to define title, publication date, description, cover, tags, categories, draft status, language, pinning, and comment toggles. Dynamic content is stored under src/content/dynamic/, with one Markdown file per dynamic post; alternatively, Memos can be configured in dynamicConfig.ts as a data source for real-time dynamic fetching. Configuration is centralized in the src/config/ directory, covering modules such as site basics, analytics, announcements, background wallpapers, comments, cover images, settings panel, dynamics, animation effects, code highlighting, fonts, footer, friend links, albums, license, music player, navigation bar, kanban musume, Mermaid, PlantUML, user profile, sidebar, and tipping.
Regarding usage constraints, running requires Node.js and pnpm. Local development starts via pnpm dev at localhost:4321, and the build outputs to the dist directory, deployable to platforms such as Vercel, Netlify, Cloudflare Pages, and EdgeOne Pages. Copyright for Firefly-related image assets belongs to miHoYo, the developer of Honkai: Star Rail. Third-party assets such as demo images, fonts, and icons must be checked against their respective licenses; the MIT license for the code alone is not sufficient to determine usage rights.
AstroBlog
Is it right for your project?
Use Cases
- Building an article-focused personal tech blog and adjusting sidebar, wallpaper, and theme color via configuration files
- Blog sites that need a multilingual interface or publish content for readers in different languages
- Writing in Markdown with Frontmatter to manage tags, categories, covers, and pinned articles
- Static sites that need client-side full-text search, code highlighting, and writing enhancements such as admonitions
- Maintaining dynamic content as Markdown files or integrating Memos as a dynamic data source
Suitable For
- Personal bloggers familiar with or willing to use Astro and Markdown
- Blog authors who need a multilingual interface and multiple layout and wallpaper customization options
- Developers who want to freely modify and distribute based on MIT-licensed code
- Users preparing to deploy a static site to platforms such as Vercel, Netlify, or Cloudflare Pages
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Environment requires Node.js and pnpm; install dependencies with pnpm install, and start local development with pnpm dev (default localhost:4321)
- 2
Blog settings are centralized in the src/config/ directory; site language is set via SITE_LANG in src/config/siteConfig.ts
- 3
Build command is pnpm run build, output directory is dist; when deploying to Vercel, Netlify, etc., choose Astro as the framework preset
- 4
Articles use Markdown and Frontmatter; dynamic content goes in src/content/dynamic/; create with pnpm new-post and pnpm new-d
- 5
Code is MIT-licensed; retain the original copyright notice when distributing; demo images, fonts, icons, and Firefly-related assets require separate license checks
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not imply that 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 full MIT license notice.
- The code is provided as-is; warranties and liability limitations are governed by the original license and applicable law.
Additional costs & items to verify
- When using or referencing Firefly's component design and code, credit Firefly as the source.
- Copyright for Firefly-related image assets belongs to miHoYo; these assets cannot be used solely under the code's MIT license.
- The code may be freely used, modified, and distributed, but the copyright notices of saicaca and CuteLeaf must be retained.
- To use Memos as a dynamic data source, you must deploy or use a Memos service and complete the corresponding configuration.
- Deploying to Vercel, Netlify, Cloudflare Pages, or similar platforms requires the respective third-party hosting services.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone is not sufficient to determine usage rights.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
**如果你参考或使用了 Firefly 的组件设计和相关代码，请注明来自 Firefly。**
Original README
流萤部分相关图片素材版权归游戏 [《崩坏：星穹铁道》](https://sr.mihoyo.com/) 开发商 [米哈游](https://www.mihoyo.com/) 所有
Original README
根据 MIT 开源协议，你可以自由使用、修改、分发代码，但需保留上述版权声明。
Original README
也支持对接 [Memos](https://www.usememos.com/) 作为数据源，在 `src/config/dynamicConfig.ts` 中配置 `memos` 选项即可实时获取 Memos 动态
Original README
https://github.com/Chimeng1314/Blog/blob/master/LICENSEhttps://github.com/Chimeng1314/Blog/blob/master/README.md**Vercel**、**Netlify** 等主流平台自动部署，会根据环境自动选择适配器。
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-01. 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 · 80 / 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-09-30
- Screenshot last checked
- 2026-10-01
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.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 5788e0c29e410760961e30d03de7685f57075670596bfec08193635e79018b97
2026-10-01T15:11:15.365Z
Source file / repository
<img src="./docs/images/1131.png" width = "350" height = "500" alt="Firefly" align=right />
<div align="center">
# 流萤 / Firefly
> 一款清新美观的 Astro 静态博客主题模板
>
> 
>
> [](https://github.com/CuteLeaf/Firefly/stargazers)
[](https://github.com/CuteLeaf/Firefly/network/members)
[](https://github.com/CuteLeaf/Firefly/issues)
>
> [](https://ko-fi.com/Z8Z41NQALY)
>
> **QQ交流群：[1087127207](https://qm.qq.com/q/ZGsFa8qX2G)**
>
> 
[](https://deepwiki.com/CuteLeaf/Firefly)
[](https://ifdian.net/a/cuteleaf)
</div>
---
📖 README：
**[简体中文](README.md)** | **[繁體中文](docs/README.zh-TW.md)** | **[English](README.en.md)** | **[日本語](docs/README.ja.md)** | **[한국어](docs/README.ko.md)**
🚀 快速指南：
[**🖥️在线预览**](https://firefly.cuteleaf.cn/) /
[**📝使用文档**](https://docs-firefly.cuteleaf.cn/) /
[**🍀我的博客**](https://blog.cuteleaf.cn)
⚡ 静态站点生成: 基于 Astro 的超快加载速度和 SEO 优化
🎨 现代化设计: 简洁美观的界面，支持自定义主题色
📱 移动友好: 完美的响应式体验，移动端专项优化
🔧 高度可配置: 大部分功能模块均可通过配置文件自定义
<table width="100%" align="center">
<tr>
<td colspan="3" align="center">
<img src="./docs/images/1.webp" >
<br>横幅模式</td>
</td>
</tr>
<tr>
<td align="center"><img src="./docs/images/3.webp" width="300"><br>透明覆盖模式</td>
<td align="center"><img src="./docs/images/2.webp" width="300"><br>全屏壁纸模式</td>
<td align="center"><img src="./docs/images/4.webp" width="300"><br>纯色模式</td>
</tr>
</table>
<img alt="Lighthouse" src="./docs/images/Lighthouse.png" />
>[!TIP]
>
>Firefly 是一款基于 Astro 框架和 Fuwari 模板开发的清新美观且现代化个人博客主题模板，专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈，提供了丰富的功能模块和高度可定制的界面，让您能够轻松打造出专业且美观的个人博客网站。
>
>**如果你参考或使用了 Firefly 的组件设计和相关代码，请注明来自 Firefly。**
>
>Firefly 也保留了原版 fuwari 的布局，可根据自己的喜好在配置文件中自由切换。
>
>**更多布局配置及演示请查看：[Firefly 布局系统详解](https://firefly.cuteleaf.cn/posts/guide/firefly-layout-system/)**
>
>Firefly 支持 i18n 多语言 UI，但除了简体中文，其他语言均为 AI 翻译转换，如有错误，欢迎提交 [Pull Request](https://github.com/CuteLeaf/Firefly/pulls) 修正。
## ✨ 功能特性
### 核心功能
- [x] **Astro + Tailwind CSS** - 基于现代技术栈的超快静态站点生成
- [x] **流畅动画** - Swup 页面过渡动画，提供丝滑的浏览体验
- [x] **响应式设计** - 完美适配桌面端、平板和移动设备
- [x] **多语言支持** - i18n 国际化，UI 支持简体中文、繁体中文、英文、日文、俄语、韩文
- [x] **全文搜索** - 基于 Pagefind 的客户端搜索，支持文章内容索引
### 个性化
- [x] **动态侧边栏** - 支持配置单侧边栏、双侧边栏
- [x] **文章布局** - 支持配置(单列)列表、网格(多列/瀑布流)布局
- [x] **字体管理** - 支持自定义字体，丰富的字体选择器
- [x] **页脚配置** - HTML 内容注入，完全自定义
- [x] **亮暗色模式** - 支持亮色/暗色/跟随系统三种模式
- [x] **导航栏自定义** - Logo、标题、链接全面自定义
- [x] **壁纸模式切换** - 横幅壁纸、全屏壁纸、全屏透明壁纸、纯色背景
- [x] **主题色自定义** - 360° 色相调节
如果你有好用的功能和优化，请提交 [Pull Request](https://github.com/CuteLeaf/Firefly/pulls)
## 🚀 快速开始
### 环境要求
- Node.js ≥ 22
- pnpm ≥ 11
### 本地开发部署
1. **克隆仓库：**
```bash
git clone https://github.com/Cuteleaf/Firefly.git
cd Firefly
```
**先 [Fork](https://github.com/CuteLeaf/Firefly/fork) 到自己仓库再克隆（推荐），记得先点 Star 再 Fork 哦！**
```bash
git clone https://github.com/you-github-name/Firefly.git
cd Firefly
```
3. **安装依赖：**
```bash
# 如果没有安装 pnpm，先安装
npm install -g pnpm
# 安装项目依赖
pnpm install
```
4. **配置博客：**
- 编辑 `src/config/` 目录下的配置文件自定义博客设置
5. **启动开发服务器：**
```bash
pnpm dev
```
博客将在 `http://localhost:4321` 可用
### 平台托管部署
- **参考[官方指南](https://docs.astro.build/zh-cn/guides/deploy/)将博客部署至 Vercel, Netlify, Cloudflare Pages, EdgeOne Pages 等。**
- **Vercel**、**Netlify** 等主流平台自动部署，会根据环境自动选择适配器。
框架预设： `Astro`
根目录： `./`
输出目录： `dist`
构建命令： `pnpm run build`
安装命令： `pnpm install`
[](https://vercel.com/new/clone?repository-url=https://github.com/CuteLeaf/Firefly&project-name=Firefly&repository-name=Firefly)
[](https://app.netlify.com/start/deploy?repository=https://github.com/CuteLeaf/Firefly)
## 📖 配置说明
> 📚 **详细配置文档**: 查看 [Firefly 使用文档](https://docs-firefly.cuteleaf.cn/) 获取完整的配置指南
### 设置网站语言
要设置博客的默认语言，请编辑 `src/config/siteConfig.ts` 文件：
```typescript
// 定义站点语言
const SITE_LANG = "zh_CN";
```
**支持的语言代码：**
- `zh_CN` - 简体中文
- `zh_TW` - 繁体中文
- `en` - 英文
- `ja` - 日文
- `ru` - 俄文
- `ko` - 韩文
### 配置文件结构
```
src/
├── config/
│ ├── index.ts # 配置索引文件
│ ├── siteConfig.ts # 站点基础配置
│ ├── analyticsConfig.ts # 统计分析配置
│ ├── announcementConfig.ts # 公告配置
│ ├── backgroundWallpaper.ts # 背景壁纸配置
│ ├── commentConfig.ts # 评论系统配置
│ ├── coverImageConfig.ts # 封面图配置
│ ├── displaySettingsConfig.ts # 设置面板配置
│ ├── dynamicConfig.ts # 动态页面配置
│ ├── effectsConfig.ts # 动画特效配置（樱花等）
│ ├── expressiveCodeConfig.ts # 代码高亮配置
│ ├── fontConfig.ts # 字体配置
│ ├── FooterConfig.html # 页脚配置
│ ├── friendsConfig.ts # 友链配置
│ ├── galleryConfig.ts # 相册配置
│ ├── licenseConfig.ts # 许可证配置
│ ├── musicConfig.ts # 音乐播放器配置
│ ├── navBarConfig.ts # 导航栏配置
│ ├── pioConfig.ts # 看板娘配置
│ ├── mermaidConfig.ts # Mermaid 图表配置
│ ├── plantumlConfig.ts # PlantUML 图表配置
│ ├── profileConfig.ts # 用户资料配置
│ ├── sidebarConfig.ts # 侧边栏布局配置
│ └── sponsorConfig.ts # 打赏配置
```
## ⚙️ 文章 Frontmatter
```yaml
---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg # 或使用 "api" 来启用随机封面图
tags: [Foo, Bar]
category: Front-end
draft: false
lang: zh-CN # 仅当文章语言与 `siteConfig.ts` 中的网站语言不同时需要设置
pinned: false # 置顶
comment: true # 是否允许评论
---
```
## 动态
动态文件保存在 `src/content/dynamic/` 中，一个 Markdown 文件对应一条动态。可以使用快捷命令创建：
```bash
pnpm new-d 今天心情不错，出去吃了一顿火锅
```
`pnpm new-dynamic <content>` 也可以使用，和 `new-d` 完全等价。
```yaml
---
published: 2026-07-15 16:15:29
pinned: true # 置顶
location: China # 位置
---
动态内容可以使用 Markdown 语法。
```
也支持对接 [Memos](https://www.usememos.com/) 作为数据源，在 `src/config/dynamicConfig.ts` 中配置 `memos` 选项即可实时获取 Memos 动态，支持置顶同步和图片附件展示。详见[动态文档](https://docs-firefly.cuteleaf.cn/zh/guide/dynamic.html)。
## 🧩 Markdown 扩展语法
除了 Astro 默认支持的 [GitHub Flavored Markdown](https://github.github.com/gfm/) 之外，还包含了一些额外的 Markdown 功能：
- 提醒块（Admonitions） - 支持 GitHub, Obsidian, VitePress, Docusaurus 四种风格主题配置 ([预览和用法](https://firefly.cuteleaf.cn/posts/markdown-extended/))
- GitHub 仓库卡片 ([预览和用法](https://firefly.cuteleaf.cn/posts/markdown-extended/))
- 基于 Expressive Code 的增强代码块 ([预览](http://firefly.cuteleaf.cn/posts/code-examples/) / [文档](https://expressive-code.com/))
## 🧞 指令
下列指令均需要在项目根目录执行：
| Command | Action |
| :------------------------- | :------------------------------------- |
| `pnpm install` | 安装依赖 |
| `pnpm dev` | 在 `localhost:4321` 启动本地开发服务器 |
| `pnpm build` | 构建网站至 `./dist/` |
| `pnpm preview` | 本地预览已构建的网站 |
| `pnpm check` | 检查代码中的错误 |
| `pnpm format` | 使用 Biome 格式化您的代码 |
| `pnpm new-post <filename>` | 创建新文章 |
| `pnpm new-d <content>` | 创建一条动态 |
| `pnpm new-dynamic <content>` | 创建一条动态（完整命令） |
| `pnpm astro ...` | 执行 `astro add`, `astro check` 等指令 |
| `pnpm astro --help` | 显示 Astro CLI 帮助 |
## 🙏 致谢
非常感谢 [saicaca](https://github.com/saicaca) 开发的 [fuwari](https://github.com/saicaca/fuwari) 模板，Firefly 就是基于这个模板二次开发
流萤部分相关图片素材版权归游戏 [《崩坏：星穹铁道》](https://sr.mihoyo.com/) 开发商 [米哈游](https://www.mihoyo.com/) 所有
### 技术栈
- [Astro](https://astro.build)
- [Tailwind CSS](https://tailwindcss.com)
- [Iconify](https://iconify.design)
### 灵感项目
- [fuwari](https://github.com/saicaca/fuwari)
- [hexo-theme-shoka](https://github.com/amehime/hexo-theme-shoka)
- [astro-koharu](https://github.com/cosZone/astro-koharu)
- [Mizuki](https://github.com/matsuzaka-yuki/Mizuki)
### 其他参考
- 博主`霞葉`的 [Bangumi 收藏](https://kasuha.com/posts/fuwari-enhance-ep2/) 页面组件
- 哔哩哔哩up主 `公公的日常` 的Q版 [流萤看板娘 Spine 切片数据](https://www.bilibili.com/video/BV1fuVzzdE5y)
## 📝 许可协议
本项目遵循 [MIT license](https://mit-license.org/) 开源协议，详细查看 [LICENSE](./LICENSE) 文件
最初 Fork 自 [saicaca/fuwari](https://github.com/saicaca/fuwari)，感谢原作者的贡献
**版权声明：**
- Copyright (c) 2024 [saicaca](https://github.com/saicaca) - [fuwari](https://github.com/saicaca/fuwari)
- Copyright (c) 2025 [CuteLeaf](https://github.com/CuteLeaf) - [Firefly](https://github.com/CuteLeaf/Firefly)
根据 MIT 开源协议，你可以自由使用、修改、分发代码，但需保留上述版权声明。
## 🍀 贡献者
感谢以下贡献者对本项目做出的贡献，如有问题或建议，请提交 [Issue](https://github.com/CuteLeaf/Firefly/issues) 或 [Pull Request](https://github.com/CuteLeaf/Firefly/pulls)。
><a href="https://github.com/CuteLeaf/Firefly/graphs/contributors">
> <img src="https://contrib.rocks/image?repo=CuteLeaf/Firefly" />
></a>
感谢以下贡献者对原项目 [fuwari](https://github.com/saicaca/fuwari) 做出的贡献，为本项目奠定了基础。
><a href="https://github.com/saicaca/fuwari/graphs/contributors">
> <img src="https://contrib.rocks/image?repo=saicaca/fuwari" />
></a>
## ⭐ Star History
[](https://star-history.com/#CuteLeaf/Firefly&Date)
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
Explore similar templates
Compare previews and descriptions within the same stack and category.
astrowind
AstroWind is a free, open-source Astro starter theme using Astro and Tailwind CSS, released under the MIT license.
Astro · Blog
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 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 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 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 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