Skip to content

README.zh-TW.md

Latest commit

 

History

History
332 lines (249 loc) · 13.3 KB

README.zh-TW.md

File metadata and controls

332 lines (249 loc) · 13.3 KB
Raw

Firefly

Firefly

一款清新美觀的 Astro 靜態博客主題模板

Node.js >= 22 pnpm >= 11 Astro TypeScript

Stars Forks Issues

ko-fi

QQ交流群：1087127207

GitHub License Ask DeepWiki 愛發電打賞

📖 README： 简体中文 | 繁體中文 | English | 日本語 | 한국어

🚀 快速指南： 🖥️線上預覽 / 📝使用文檔 / 🍀我的部落格

⚡ 靜態站點生成: 基於 Astro 的超快載入速度和 SEO 優化

🎨 現代化設計: 簡潔美觀的介面，支援自訂主題色

📱 行動裝置友善: 完美的響應式體驗，行動端專項優化

🔧 高度可配置: 大部分功能模組均可透過配置檔案自訂


橫幅模式

透明覆蓋模式
全螢幕桌布模式
純色模式

Lighthouse

Tip

Firefly 是一款基於 Astro 框架和 Fuwari 模板開發的清新美觀且現代化個人部落格主題模板，專為技術愛好者和內容創作者設計。該主題融合了現代 Web 技術棧，提供了豐富的功能模組和高度可自訂的介面，讓您能夠輕鬆打造出專業且美觀的個人部落格網站。

如果你參考或使用了 Firefly 元件設計和相關程式碼，請註明來自 Firefly。

Firefly 也保留了原版 fuwari 的版面，可根據自己的喜好在配置檔案中自由切換。

更多版面配置及示範請查看：Firefly 版面配置系統詳解

Firefly 支援 i18n 多語言 UI，但除了簡體中文，其他語言均為 AI 翻譯轉換，如有錯誤，歡迎提交 Pull Request 修正。

✨ 功能特性

核心功能

  • Astro + Tailwind CSS - 基於現代技術堆疊的超快靜態站點生成
  • 流暢動畫 - Swup 頁面過渡動畫，提供絲滑的瀏覽體驗
  • 響應式設計 - 完美適配桌面端、平板和行動裝置
  • 多語言支援 - i18n 國際化UI，支援簡體中文、繁體中文、英文、日文、俄語、韓文
  • 全文搜尋 - 基於 Pagefind 的客戶端搜尋，支援文章內容索引。

個性化

  • 動態側邊欄 - 支援配置單側邊欄、雙側邊欄
  • 文章版面配置 - 支援配置(單列)列表、網格(多列/瀑布流)版面配置
  • 字型管理 - 支援自訂字型，豐富的字型選擇器
  • 頁尾配置 - HTML 內容注入，完全自訂
  • 亮暗色模式 - 支援亮色/暗色/跟隨系統三種模式
  • 導覽列自訂 - Logo、標題、連結全面自訂
  • 桌布模式切換 - 橫幅桌布、全螢幕桌布、全螢幕透明桌布、純色背景
  • 主題色自訂 - 360° 色相調節

如果你有好用的功能和優化，請提交 Pull Request

🚀 快速開始

環境要求

  • Node.js ≥ 22
  • pnpm ≥ 11

本地開發部署

  1. 克隆儲存庫：

    git clone https://github.com/Cuteleaf/Firefly.git
cd Firefly

    先 Fork 到自己儲存庫再克隆（推薦），記得先點 Star 再 Fork 哦！

    git clone https://github.com/you-github-name/Firefly.git
cd Firefly

  2. 安裝依賴：

    # 如果沒有安裝 pnpm，先安裝
npm install -g pnpm

# 安裝專案依賴
pnpm install

  3. 配置部落格：

    • 編輯 src/config/ 目錄下的配置檔案自訂部落格設定

  4. 啟動開發伺服器：

    pnpm dev

    部落格將在 http://localhost:4321 可用

社區教程

Cloudflare Workers 部署：【不用服务器，无需备案，零成本搭建一个自己的个人博客】

平台託管部署

  • 參考官方指南將部落格部署至 Vercel, Netlify, Cloudflare Pages, EdgeOne Pages 等。

  • Vercel、Netlify 等主流平台自動部署，會根據環境自動選擇適配器。

    框架預設： Astro

    根目錄： ./

    輸出目錄： dist

    建置命令： pnpm run build

    安裝命令： pnpm install

    Deploy with Vercel Deploy to Netlify

📖 配置說明

📚 詳細配置文檔: 查看 Firefly使用文檔 獲取完整的配置指南

設定網站語言

要設定部落格的預設語言，請編輯 src/config/siteConfig.ts 檔案：

// 定義站點語言
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

---
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 檔案代表一則動態。可使用快捷命令建立：

pnpm new-d 今天天氣真不錯

pnpm new-dynamic <content> 是功能相同的完整命令。

---
published: 2026-07-15 16:15:29
pinned: true  # 置頂
location: China # 位置
---

動態內容支援 Markdown 語法。

也支援對接 Memos 作為資料來源，在 src/config/dynamicConfig.ts 中設定 memos 選項即可即時取得 Memos 動態，支援置頂同步和圖片附件展示。詳見動態檔案。

🧩 Markdown 擴充語法

除了 Astro 預設支援的 GitHub Flavored Markdown 之外，還包含了一些額外的 Markdown 功能：

  • 提醒塊（Admonitions） - 支援 GitHub, Obsidian, VitePress 三種風格主題配置 (預覽和用法)
  • GitHub 儲存庫卡片 (預覽和用法)
  • 基於 Expressive Code 的增強程式碼區塊 (預覽 / 文檔)

🧞 指令

下列指令均需要在專案根目錄執行：

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 開發的 fuwari 範本，Firefly 就是基於這個範本二次開發

流螢部分相關圖片素材版權歸遊戲 《崩壞：星穹鐵道》 開發商 米哈遊 所有

技術棧

靈感專案

其他參考

📝 許可協議

本專案遵循 MIT license 開源協議，詳細查看 LICENSE 文件

最初 Fork 自 saicaca/fuwari，感謝原作者的貢獻

版權聲明：

根據 MIT 開源協議，你可以自由使用、修改、分發程式碼，但需保留上述版權聲明。

🍀 貢獻者

感謝以下貢獻者對本專案做出的貢獻，如有問題或建議，請提交 Issue 或 Pull Request。

感謝以下貢獻者對原專案 fuwari 做出的貢獻，為本專案奠定了基礎。

⭐ Star History

Star History Chart