🚀 快速指南： 🖥️線上預覽 / 📝使用文檔 / 🍀我的部落格
📖 README： 简体中文 | 繁體中文 | English | 日本語 | Русский
⚡ 靜態站點生成: 基於Astro的超快載入速度和SEO優化
🎨 現代化設計: 簡潔美觀的介面，支援自訂主題色
📱 行動裝置友善: 完美的響應式體驗，行動端專項優化
🔧 高度可配置: 大部分功能模組均可透過配置檔案自訂
TIP
在重要的版面配置上，Firefly創新性地增加了左右雙側邊欄、文章網格(多列)版面配置，
增加了站點統計、日曆元件、文章目錄等小元件，讓側邊欄更加豐富，
同時也保留了 fuwari 的版面配置系統，可在配置檔案中自由切換。
更多版面配置及示範請查看：Firefly 版面配置系統詳解
- Astro + Tailwind CSS - 基於現代技術堆疊的超快靜態站點生成
- 流暢動畫 - Swup 頁面過渡動畫，提供絲滑的瀏覽體驗
- 響應式設計 - 完美適配桌面端、平板和行動裝置
- 多語言支援 - i18n 國際化，支援簡體中文、繁體中文、英文、日文、俄語
- 全文搜尋 - 基於 Pagefind 的客戶端搜尋，支援文章內容索引。
- 側邊欄 - 支援配置單側邊欄、雙側邊欄
- 文章版面配置 - 支援配置(單列)列表、網格(多列/瀑布流)版面配置
- 字型管理 - 支援自訂字型，豐富的字型選擇器
- 頁尾配置 - HTML 內容注入，完全自訂
- 導覽列自訂 - Logo、標題、連結全面自訂
- 桌布模式切換 - 橫幅桌布、全螢幕桌布、純色背景
- 主題色自訂 - 360° 色相調節，支援亮色/暗色/跟隨系統三種模式
- 留言板 - 支援留言頁面，整合留言系統
- 公告欄 - 側邊欄公告提示
- 看板娘 - 支援 Spine 和 Live2D 兩種動畫引擎
- 站點統計 - 顯示文章、分類、標籤數目、文章總字數等數據
- 站點日曆 - 顯示當月日曆，以及當月的發布文章
- 贊助頁面 - 贊助連結跳轉、收款碼展示、贊助者列表、文章內贊助按鈕
- 分享海報 - 支援生成精美的文章分享海報
- 櫻花特效 - 支援櫻花特效，全螢幕櫻花效果
- 友情連結 - 精美的友鏈展示卡片
- 廣告元件 - 支援自訂側邊欄廣告內容
- 番組計畫 - 基於 Bangumi API 的追番和遊戲記錄展示
- 留言系統 - 整合 Twikoo、Waline、Giscus、Disqus、Artalk 留言系統
- 訪問量統計 - 支援呼叫 Waline、Twikoo 自帶的訪問量追蹤
- 音樂播放器 - 基於 APlayer，支援本地音樂和 Meting API 線上音樂
- 圖片燈箱 - Fancybox 圖片預覽功能
- 浮動目錄 - 動態顯示文章目錄，支援錨點跳轉，在側邊欄目錄隱藏後顯示
- 信箱保護 - 讓自動化爬蟲程式無法直接爬取信箱地址，避免垃圾郵件騷擾
- 側邊欄目錄 - 動態顯示文章目錄，支援錨點跳轉
- 增強程式碼區塊 - 基於 Expressive Code，支援程式碼摺疊、行號、語言標識
- 數學公式支援 - KaTeX 渲染引擎，支援行內和區塊級公式
- 文章隨機封面圖 - 支援透過 API 獲取隨機封面圖
- Markdown擴充 - 預設支援GitHub Flavored Markdown，還包括了Admonitions、GitHub repository cards、Expressive Code
- SEO 優化 - 完整的 meta 標籤和結構化資料
- RSS 訂閱 - 自動生成 RSS Feed
- 站點地圖 - 自動生成 XML Sitemap，支援頁面篩選配置
- 重構 Live2D 看板娘
- 持續優化動畫流暢度
- 更多功能持續完善中...
如果你有好用的功能和優化，請提交 Pull Request
- Node.js ≤ 22
- pnpm ≤ 9
-
克隆儲存庫：
git clone https://github.com/Cuteleaf/Firefly.git cd Firefly先 Fork 到自己儲存庫再克隆（推薦）
git clone https://github.com/you-github-name/Firefly.git cd Firefly -
安裝依賴：
# 如果沒有安裝 pnpm，先安裝 npm install -g pnpm # 安裝專案依賴 pnpm install -
配置部落格：
- 編輯
src/config/目錄下的配置檔案自訂部落格設定
- 編輯
-
啟動開發伺服器：
pnpm dev部落格將在
http://localhost:4321可用
-
參考官方指南將部落格部署至 Vercel, Netlify, GitHub Pages, Cloudflare Pages, EdgeOne Pages 等。
框架預設：
Astro根目錄：
./輸出目錄：
dist建置命令：
pnpm run build安裝命令：
pnpm install
📚 詳細配置文檔: 查看 Firefly使用文檔 獲取完整的配置指南
要設定部落格的預設語言，請編輯 src/config/siteConfig.ts 檔案：
// 定義站點語言
const SITE_LANG = "zh_CN";
支援的語言代碼：
zh_CN- 簡體中文zh_TW- 繁體中文en- 英文ja- 日文ru- 俄文
src/ ├── config/ │ ├── index.ts # 配置索引檔案 │ ├── siteConfig.ts # 站點基礎配置 │ ├── backgroundWallpaper.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 # 友鏈配置 │ ├── sponsorConfig.ts # 贊助配置 │ └── coverImageConfig.ts # 文章隨機封面圖配置
---
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 # 是否允許留言
---
下列指令均需要在專案根目錄執行：
| Command | Action |
|---|---|
pnpm install | 安裝依賴 |
pnpm dev | 在 localhost:4321 啟動本地開發伺服器 |
pnpm build | 建置網站至 ./dist/ |
pnpm preview | 本地預覽已建置的網站 |
pnpm check | 檢查程式碼中的錯誤 |
pnpm format | 使用 Biome 格式化您的程式碼 |
pnpm new-post <filename> | 建立新文章 |
pnpm astro ... | 執行 astro add, astro check 等指令 |
pnpm astro --help | 顯示 Astro CLI 說明 |
- 非常感謝 saicaca 開發的 Fuwari 模板，Firefly 就是基於這個模板二次開發
- 參考了部落格主 霞葉 分享的 Bangumi 收藏展示頁面方案
- 參考了 Mizuki 的橫幅標題/多級選單導覽列/櫻花特效/KaTeX/Fancybox方案
- 使用了 Astro 和 Tailwind CSS 建置
- 使用了 MetingJS 和 APlayer 音樂播放器
- 使用了b站up 公公的日常 提供的Q版
流螢看板娘切片資料模型 - 圖示來自 Iconify
- 流螢部分相關圖片素材版權歸遊戲 《崩壞：星穹鐵道》 開發商 米哈遊 所有
本專案遵循 MIT license 開源協議，詳細查看 LICENSE 文件
版權聲明：
根據 MIT 開源協議，你可以自由使用、修改、分發程式碼，但需保留上述版權聲明。
感謝以下貢獻者對本專案做出的貢獻，如有問題或建議，請提交 Issue 或 Pull Request。
