📖 README： 简体中文 | 繁體中文 | English | 日本語 | Русский
🚀 クイックガイド： 🖥️ライブデモ / 📝ドキュメント / 🍀私のブログ
⚡ 静的サイト生成：Astroベースの超高速読み込み速度とSEO最適化
🎨 モダンデザイン：シンプルで美しいインターフェース、カスタマイズ可能なテーマカラー
📱 モバイルフレンドリー：完璧なレスポンシブ体験、モバイル専用最適化
🔧 高度にカスタマイズ可能：ほとんどの機能モジュールは設定ファイルでカスタマイズ可能
Fireflyは、AstroフレームワークとFuwariテンプレートをベースに開発された、清新で美しい個人ブログテーマテンプレートです。技術愛好家やコンテンツクリエイター向けに設計されています。このテーマはモダンなWeb技術スタックを統合し、豊富な機能モジュールと高度にカスタマイズ可能なインターフェースを提供し、プロフェッショナルで美しい個人ブログウェブサイトを簡単に作成できます。
重要なレイアウトでは、Fireflyは革新的に左右のデュアルサイドバー、記事グリッド（多列）レイアウト、メーソンリーレイアウトを追加し、サイト統計、カレンダーコンポーネント、記事目次などの小さなウィジェットを追加してサイドバーをより豊かにし、同時にfuwariのレイアウトシステムも保持しており、設定ファイルで自由に切り替えられます。
レイアウト設定とデモの詳細については、Fireflyレイアウトシステム詳細をご覧ください
Fireflyはi18n多言語切り替えをサポートしていますが、簡体字中国語以外はAI翻訳です。誤りがある場合は、Pull Requestを提出して修正してください。
✨ 機能
コア機能
- Astro + Tailwind CSS - モダンな技術スタックベースの超高速静的サイト生成
- スムーズなアニメーション - Swupページトランジションアニメーションで滑らかなブラウジング体験
- レスポンシブデザイン - デスクトップ、タブレット、モバイルデバイスに完璧に対応
- 多言語サポート - i18n国際化、簡体字中国語、繁体字中国語、英語、日本語、ロシア語をサポート
- 全文検索 - Pagefindベースのクライアントサイド検索、記事コンテンツのインデックスをサポート
パーソナライゼーション
- 動的サイドバー - シングルサイドバー、デュアルサイドバー設定をサポート
- 記事レイアウト - リスト（単列）、グリッド（多列/メーソンリー）レイアウトをサポート
- フォント管理 - カスタムフォントをサポート、豊富なフォントセレクター
- フッター設定 - HTMLコンテンツ注入、完全カスタマイズ可能
- ライト/ダークモード - ライト/ダーク/システム追従の3モードをサポート
- ナビゲーションバーのカスタマイズ - ロゴ、タイトル、リンクを完全カスタマイズ
- 壁紙モード切り替え - バナー壁紙、フルスクリーン壁紙、単色背景
- テーマカラーのカスタマイズ - 360°色相調整
ページコンポーネント
- ゲストブック - ゲストブックページをサポート
- お知らせバー - サイドバーのお知らせ通知をサポート
- マスコット - SpineとLive2Dの2つのアニメーションエンジンをサポート
- サイト統計 - 記事、カテゴリ、タグ数、総文字数などのデータを表示
- サイトカレンダー - 今月のカレンダーと今月公開された記事を表示
- スポンサーページ - スポンサーリンクのジャンプ、支払いQRコードの表示、スポンサーリスト、記事内スポンサーボタン
- シェアポスター - 美しい記事シェアポスターの生成をサポート
- 桜エフェクト - 桜エフェクトをサポート、フルスクリーン桜アニメーション
- 友人リンク - 美しい友人リンク展示ページ
- 広告コンポーネント - カスタムサイドバー広告コンテンツをサポート
- Bangumi - Bangumi APIベースのアニメとゲーム記録表示
- コメントシステム - Twikoo、Waline、Giscus、Disqus、Artalkコメントシステムを統合
- 訪問者数統計 - Waline、Twikoo組み込みの訪問追跡を呼び出し可能
- 音楽プレーヤー - Material Design 3 デザインの音楽プレーヤー
コンテンツ拡張
- 画像ライトボックス - Fancybox画像プレビュー機能
- フローティング目次 - 記事の目次を動的に表示、アンカージャンプをサポート、サイドバー目次非表示時に表示
- メールアドレス保護 - 自動クローラーによるメールアドレスの収集を防ぎ、スパムメールを回避
- サイドバー目次 - 記事の目次を動的に表示、アンカージャンプをサポート
- 強化されたコードブロック - Expressive Codeベース、コード折りたたみ、行番号、言語識別をサポート
- 数式サポート - KaTeXレンダリングエンジン、インラインとブロック数式をサポート
- ランダムカバー画像 - APIを介してランダムカバー画像の取得をサポート
- Markdown拡張 - より多くのMarkdown拡張構文サポート
SEO
- SEO最適化 - 完全なメタタグと構造化データ
- RSS購読 - RSSフィードを自動生成
- サイトマップ - XMLサイトマップを自動生成、ページフィルタリング設定をサポート
- 統計分析 - Google Analytics、Microsoft Clarityを統合
便利な機能や最適化があれば、Pull Requestを提出してください
🚀 クイックスタート
環境要件
- Node.js ≤ 22
- pnpm ≤ 9
ローカル開発
リポジトリのクローン：
git clone https://github.com/Cuteleaf/Firefly.git cd Fireflyまず自分のリポジトリにForkしてからクローン（推奨）。クローンする前にStarをクリックするのを忘れずに！
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 # 記事カバー画像設定
⚙️ 記事の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の3つのテーマ設定をサポート (プレビューと使用方法)
- 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ヘルプを表示 |
🙏 謝辞
- fuwariテンプレートを開発したsaicacaに深く感謝します。Fireflyはこのテンプレートをベースに開発されています
- ブロガー霞葉のBangumiコレクション表示とメール保護・画像タイトル案を参考にしました
- Mizukiのバナータイトル/多階層メニューナビゲーションバー/桜エフェクト/KaTeX/Fancyboxソリューションを参考にしました
- AstroとTailwind CSSを使用して構築
- Bilibili UP主公公的日常が提供するQ版
蛍マスコットスライスデータモデルを使用 - アイコンはIconifyから
- 蛍関連の画像素材の著作権はゲーム「崩壊：スターレイル」の開発元miHoYoに帰属します。
📝 ライセンス
本プロジェクトは MIT license の下で公開されています。詳細は LICENSE ファイルをご覧ください。
最初は saicaca/fuwari からフォークされました。元の作者の貢献に感謝します。元のプロジェクトは MIT License の下で公開されています。
著作権表示：
MITライセンスに基づき、コードの自由な使用、変更、配布が許可されていますが、上記の著作権表示を保持する必要があります。
🍀 貢献者
このプロジェクトに貢献してくれた以下の貢献者に感謝します。質問や提案がある場合は、IssueまたはPull Requestを提出してください。
このプロジェクトの基盤を築いた元のプロジェクトfuwariに貢献してくれた以下の貢献者に感謝します。