---

🚀 クイックガイド： 🖥️ライブデモ / 📝ドキュメント / 🍀私のブログ

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

⚡ 静的サイト生成：Astroベースの超高速読み込み速度とSEO最適化

🎨 モダンデザイン：シンプルで美しいインターフェース、カスタマイズ可能なテーマカラー

📱 モバイルフレンドリー：完璧なレスポンシブ体験、モバイル専用最適化

🔧 高度にカスタマイズ可能：ほとんどの機能モジュールは設定ファイルでカスタマイズ可能

• Astro + Tailwind CSS - モダンな技術スタックベースの超高速静的サイト生成
• スムーズなアニメーション - Swupページトランジションアニメーションで滑らかなブラウジング体験
• レスポンシブデザイン - デスクトップ、タブレット、モバイルデバイスに完璧に対応
• 多言語サポート - i18n国際化、簡体字中国語、繁体字中国語、英語、日本語、ロシア語をサポート
• 全文検索 - Pagefindベースのクライアントサイド検索、記事コンテンツのインデックスをサポート

• サイドバー - シングルサイドバー、デュアルサイドバー設定をサポート
• 記事レイアウト - リスト（単列）、グリッド（多列/メーソンリー）レイアウトをサポート
• フォント管理 - カスタムフォントをサポート、豊富なフォントセレクター
• フッター設定 - HTMLコンテンツ注入、完全カスタマイズ可能
• ナビゲーションバーのカスタマイズ - ロゴ、タイトル、リンクを完全カスタマイズ
• 壁紙モード切り替え - バナー壁紙、フルスクリーン壁紙、単色背景
• テーマカラーのカスタマイズ - 360°色相調整、ライト/ダーク/システム追従の3モードをサポート

• ゲストブック - ゲストブックページをサポート、コメントシステム統合
• お知らせバー - サイドバーのお知らせ通知
• マスコット - SpineとLive2Dの2つのアニメーションエンジンをサポート
• サイト統計 - 記事、カテゴリ、タグ数、総文字数などのデータを表示
• サイトカレンダー - 今月のカレンダーと今月公開された記事を表示
• スポンサーページ - スポンサーリンクのジャンプ、支払いQRコードの表示、スポンサーリスト、記事内スポンサーボタン
• シェアポスター - 美しい記事シェアポスターの生成をサポート
• 桜エフェクト - 桜エフェクトをサポート、フルスクリーン桜アニメーション
• 友人リンク - 美しい友人リンク表示カード
• 広告コンポーネント - カスタムサイドバー広告コンテンツをサポート
• Bangumi - Bangumi APIベースのアニメとゲーム記録表示
• コメントシステム - Twikoo、Waline、Giscus、Disqus、Artalkコメントシステムを統合
• 訪問者数統計 - Waline、Twikoo組み込みの訪問追跡を呼び出し可能
• 音楽プレーヤー - APlayerベース、ローカル音楽とMeting APIオンライン音楽をサポート

• 画像ライトボックス - Fancybox画像プレビュー機能
• フローティング目次 - 記事の目次を動的に表示、アンカージャンプをサポート、サイドバー目次非表示時に表示
• メールアドレス保護 - 自動クローラーによるメールアドレスの収集を防ぎ、スパムメールを回避
• サイドバー目次 - 記事の目次を動的に表示、アンカージャンプをサポート
• 強化されたコードブロック - Expressive Codeベース、コード折りたたみ、行番号、言語識別をサポート
• 数式サポート - KaTeXレンダリングエンジン、インラインとブロック数式をサポート
• ランダムカバー画像 - APIを介してランダムカバー画像の取得をサポート
• Markdown拡張 - デフォルトでGitHub Flavored Markdownをサポート、Admonitions、GitHubリポジトリカード、Expressive Codeも含まれています

• SEO最適化 - 完全なメタタグと構造化データ
• RSS購読 - RSSフィードを自動生成
• サイトマップ - XMLサイトマップを自動生成、ページフィルタリング設定をサポート

• Live2Dマスコットのリファクタリング
• アニメーションの滑らかさの継続的な最適化
• より多くの機能が継続的に改善中...

便利な機能や最適化があれば、Pull Requestを提出してください

• Node.js ≤ 22
• pnpm ≤ 9

1. リポジトリのクローン：

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

   まず自分のリポジトリに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   # 記事カバー画像設定

---
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ヘルプを表示

• Fuwariテンプレートを開発したsaicacaに深く感謝します。Fireflyはこのテンプレートをベースに開発されています
• ブロガー霞葉のBangumiコレクション表示とメール保護・画像タイトル案を参考にしました
• Mizukiのバナータイトル/多階層メニューナビゲーションバー/桜エフェクト/KaTeX/Fancyboxソリューションを参考にしました
• AstroとTailwind CSSを使用して構築
• MetingJSとAPlayer音楽プレーヤーを使用
• Bilibili UP主公公的日常が提供するQ版蛍マスコットスライスデータモデルを使用
• アイコンはIconifyから
• 蛍関連の画像素材の著作権はゲーム「崩壊：スターレイル」の開発元miHoYoに帰属します。

本プロジェクトは MIT license の下で公開されています。詳細は LICENSE ファイルをご覧ください。

著作権表示：

• Copyright (c) 2024 saicaca - fuwari
• Copyright (c) 2025 CuteLeaf - Firefly

MITライセンスに基づき、コードの自由な使用、変更、配布が許可されていますが、上記の著作権表示を保持する必要があります。

このプロジェクトに貢献してくれた以下の貢献者に感謝します。質問や提案がある場合は、IssueまたはPull Requestを提出してください。