Hugging Face's logo

Spaces:
cacode
/
blog
Paused

App Files Community
blog / docs /README.zh-TW.md
cacode's picture
cacode
Upload 434 files
96dd062 verified
preview code
|
raw
history blame contribute delete
13.9 kB
Firefly

Firefly

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

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

Stars Forks Issues

ko-fi

GitHub License Ask DeepWiki 愛發電贊助

📖 README： 简体中文 | 繁體中文 | English | 日本語 | Русский

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

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

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

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

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

firefly Lighthouse

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

在重要的版面配置上，Firefly 創新性地增加了左右雙側邊欄、文章網格(多列)版面配置、瀑布流配置，增加了站點統計、日曆元件、文章目錄等小元件，讓側邊欄更加豐富，同時也保留了原版 fuwari 的版面配置，可根據自己的喜好在配置檔案中自由切換。

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

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

✨ 功能特性

核心功能

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

個性化

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

頁面元件

  • 留言板 - 支援留言頁面
  • 公告欄 - 支援側邊欄公告提示
  • 看板娘 - 支援 Spine 和 Live2D 兩種動畫引擎
  • 站點統計 - 顯示文章、分類、標籤數目、文章總字數等數據
  • 站點日曆 - 顯示當月日曆，以及當月的發布文章
  • 贊助頁面 - 贊助連結跳轉、收款碼展示、贊助者列表、文章內贊助按鈕
  • 分享海報 - 支援生成精美的文章分享海報
  • 櫻花特效 - 支援櫻花特效，全螢幕櫻花效果
  • 友情連結 - 精美的友情連結展示頁面
  • 廣告元件 - 支援自訂側邊欄廣告內容
  • 番組計畫 - 基於 Bangumi API 的追番和遊戲記錄展示
  • 留言系統 - 整合 Twikoo、Waline、Giscus、Disqus、Artalk 留言系統
  • 訪問量統計 - 支援呼叫 Waline、Twikoo 自帶的訪問量追蹤
  • 音樂播放器 - Material Design 3 設計風格的音樂播放器

內容增強

  • 圖片燈箱 - Fancybox 圖片預覽功能
  • 浮動目錄 - 動態顯示文章目錄，支援錨點跳轉，在側邊欄目錄隱藏後顯示
  • 信箱保護 - 讓自動化爬蟲程式無法直接爬取信箱地址，避免垃圾郵件騷擾
  • 側邊欄目錄 - 動態顯示文章目錄，支援錨點跳轉
  • 增強程式碼區塊 - 基於 Expressive Code，支援程式碼摺疊、行號、語言標識
  • 數學公式支援 - KaTeX 渲染引擎，支援行內和區塊級公式
  • 文章隨機封面圖 - 支援透過 API 獲取隨機封面圖
  • Markdown擴充 - 更多的 Markdown 擴充語法

SEO

  • SEO 優化 - 完整的 meta 標籤和結構化資料
  • RSS 訂閱 - 自動生成 RSS Feed
  • 站點地圖 - 自動生成 XML Sitemap，支援頁面篩選配置
  • 統計分析 - 集成 Google Analytics、Microsoft Clarity

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

🚀 快速開始

環境要求

  • Node.js ≤ 22
  • pnpm ≤ 9

本地開發部署

  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 可用

平台託管部署

  • 參考官方指南將部落格部署至 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   # 文章隨機封面圖配置

⚙️ 文章 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    # 是否允許留言
---

🧩 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 astro ... 執行 astro add, astro check 等指令
pnpm astro --help 顯示 Astro CLI 說明

🙏 致謝

📝 許可協議

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

最初 Fork 自 saicaca/fuwari，感謝原作者的貢獻，原專案採用 MIT license

版權聲明：

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

🍀 貢獻者

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

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

⭐ Star History

Star History Chart