Skip to content

Firefly 一款清新美观的 Astro 博客主题模板, Firefly is a fresh and visually appealing Astro blog theme template.

License

Notifications You must be signed in to change notification settings

CuteLeaf/Firefly

Repository files navigation

NapCat

Firefly

一款清新美观的 Astro 博客主题模板


🖥️在线预览(Netlify) / 📝使用文档 / 🍀我的博客

⚡ 静态站点生成: 基于Astro的超快加载速度和SEO优化

🎨 现代化设计: 简洁美观的界面,支持自定义主题色

📱 移动友好: 完美的响应式体验,移动端专项优化

🌟 看板娘支持: 同时支持Spine和Live2D动画引擎

🔧 高度可配置: 大部分功能模块均可通过配置文件自定义

firefly

✨ 功能特性

核心功能

  • Astro + Tailwind CSS - 基于现代技术栈的超快静态站点生成
  • 流畅动画 - Swup 页面过渡动画,提供丝滑的浏览体验
  • 响应式设计 - 完美适配桌面端、平板和移动设备
  • 多语言支持 - i18n 国际化,支持简体中文、繁体中文、英文、日文、俄语
  • 全文搜索 - 基于 Pagefind 的客户端搜索,支持文章内容索引

个性化

  • 主题色自定义 - 360° 色相调节,支持亮色/暗色/跟随系统三种模式
  • 壁纸模式切换 - 横幅壁纸、全屏壁纸、纯色背景,前台一键切换
  • 布局切换 - 列表/网格布局,前台自由切换
  • 字体管理 - 支持自定义字体,丰富的字体选择器
  • 樱花特效 - 可配置数量的樱花飘落动画

页面组件

  • 文章目录 (TOC) - 自动生成,支持桌面端和移动端
  • 侧边栏配置 - 可关闭/切换左右位置,丰富的侧边栏组件
  • 导航栏定制 - Logo、标题、链接全面自定义
  • 友情链接 - 精美的友链展示卡片
  • 公告栏 - 顶部公告提示,支持关闭和自定义样式
  • 页脚配置 - HTML 内容注入,完全自定义
  • 关于页面 - 自定义个人介绍

媒体功能

  • 音乐播放器 - 支持本地音乐和 Meting API 在线音乐(网易云/QQ音乐等)
  • 看板娘 - 支持 Spine 和 Live2D 两种动画引擎
  • 追番页 - 基于 Bangumi API 的追番记录展示

交互功能

  • 评论系统 - 集成 Twikoo、Waline、Giscus、Disqus 评论系统
  • 访问量统计 - 支持调用Waline,Twikoo自带的访问量追踪
  • 增强代码块 - 基于 Expressive Code,支持代码折叠、行号、语言标识
  • 数学公式支持 - KaTeX 渲染引擎,支持行内和块级公式
  • 图片灯箱 - Fancybox 图片预览功能
  • RSS 订阅 - 自动生成 RSS Feed
  • 站点地图 - 自动生成 XML Sitemap,支持页面过滤配置

性能优化

  • 图片优化 - Astro Image 自动处理
  • 代码分割 - 自动按需加载
  • SEO 优化 - 完整的 meta 标签和结构化数据
  • 懒加载 - 图片和组件按需加载
  • 站点地图优化 - 自动生成 sitemap-index.xml 和多级站点地图

📝计划中...

  • 重构 Live2D 看板娘
  • 修复追番页加载数据问题
  • 更多功能持续完善中...

如果你有好用的功能和优化,请提交 Pull Request

🚀 快速开始

环境要求

  • Node.js ≤ 22
  • pnpm ≤ 9

本地开发部署

  1. 克隆仓库:

    git clone https://github.com/Cuteleaf/Firefly.git
    cd Firefly
  2. 安装依赖:

    # 如果没有安装 pnpm,先安装
    npm install -g pnpm
    
    # 安装项目依赖
    pnpm install
  3. 配置博客:

    • 编辑 src/config/ 目录下的配置文件自定义博客设置
  4. 启动开发服务器:

    pnpm dev

    博客将在 http://localhost:4321 可用

平台托管部署

  • 参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等。

📖 配置说明

📚 详细配置文档: 查看 Firefly使用文档 获取完整的配置指南

配置文件结构

src/
├── config/
│   ├── index.ts              # 配置索引文件
│   ├── siteConfig.ts         # 站点基础配置
│   ├── profileConfig.ts      # 用户资料配置
│   ├── commentConfig.ts      # 评论系统配置
│   ├── announcementConfig.ts # 公告配置
│   ├── licenseConfig.ts      # 许可证配置
│   ├── footerConfig.ts       # 页脚配置
│   ├── FooterConfig.html     # 页脚HTML内容
│   ├── expressiveCodeConfig.ts # 代码高亮配置
│   ├── sakuraConfig.ts       # 樱花特效配置
│   ├── fontConfig.ts         # 字体配置
│   ├── sidebarConfig.ts      # 侧边栏布局配置
│   ├── navBarConfig.ts       # 导航栏配置
│   ├── musicConfig.ts        # 音乐播放器配置
│   ├── pioConfig.ts          # 看板娘配置
│   ├── adConfig.ts           # 广告配置
│   └── friendsConfig.ts      # 友链配置

⚙️ 文章 Frontmatter

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg
tags: [Foo, Bar]
category: Front-end
draft: false
lang: jp      # 仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
---

🧞 指令

下列指令均需要在项目根目录执行:

Command Action
pnpm installpnpm add sharp 安装依赖
pnpm dev localhost:4321 启动本地开发服务器
pnpm build 构建网站至 ./dist/
pnpm preview 本地预览已构建的网站
pnpm new-post <filename> 创建新文章
pnpm astro ... 执行 astro add, astro check 等指令
pnpm astro --help 显示 Astro CLI 帮助

🙏 致谢

🍀贡献者

感谢以下贡献者对本项目做出的贡献,如有问题或建议,请提交 IssuePull Request

Alt

⭐Star History

Star History Chart

About

Firefly 一款清新美观的 Astro 博客主题模板, Firefly is a fresh and visually appealing Astro blog theme template.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published