Skip to content

README.ja.md

Latest commit

 

History

History
330 lines (247 loc) · 16.2 KB

README.ja.md

File metadata and controls

330 lines (247 loc) · 16.2 KB
Raw

Firefly

Firefly

美しくモダンな Astro 静的ブログテーマテンプレート

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

Stars Forks Issues

ko-fi

QQ交流群：1087127207

GitHub License Ask DeepWiki Afdian Sponsor

📖 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コンテンツ注入、完全カスタマイズ可能
  • ライト/ダークモード - ライト/ダーク/システム追従の3モードをサポート
  • ナビゲーションバーのカスタマイズ - ロゴ、タイトル、リンクを完全カスタマイズ
  • 壁紙モード切り替え - バナー壁紙、フルスクリーン壁紙、フルスクリーン透明壁紙、単色背景
  • テーマカラーのカスタマイズ - 360° 色相調整

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

🚀 クイックスタート

環境要件

  • Node.js ≥ 22
  • pnpm ≥ 11

ローカル開発

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

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

    まず自分のリポジトリにForkしてからクローン（推奨）。クローンする前に Star をクリックするのを忘れずに！

    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、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/ に保存され、1つの Markdown ファイルが1件のモーメントに対応します。次のコマンドで作成できます：

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 オプションを設定すると、ピン留めの同期や画像添付ファイルの表示に対応したリアルタイムデータ取得が可能です。詳細はモーメントドキュメントをご参照ください。

🧩 Markdown拡張

Astro がデフォルトで対応しているGitHub Flavored Markdownに加えて、いくつかの追加の Markdown 機能があります：

🧞 コマンド

すべてのコマンドはプロジェクトルートディレクトリで実行する必要があります：

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

🙏 謝辞

fuwari テンプレートを開発したsaicacaに深く感謝します。Firefly はこのテンプレートをベースに二次開発されています。

蛍関連の画像素材の著作権はゲーム「崩壊：スターレイル」の開発元 miHoYo に帰属します。

技術スタック

インスピレーションプロジェクト

その他の参考

📝 ライセンス

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

最初は saicaca/fuwari からフォークされました。元の作者の貢献に感謝します。

著作権表示：

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

🍀 貢献者

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

このプロジェクトの基盤を築いた元のプロジェクトfuwariに貢献してくれた以下の貢献者に感謝します。

⭐ Star History

Star History Chart