Skip to content

README.ja.md

Latest commit

 

History

History
287 lines (211 loc) · 14.5 KB

README.ja.md

File metadata and controls

287 lines (211 loc) · 14.5 KB

Firefly

Firefly

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

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

Stars Forks Issues

ko-fi

QQ交流群：1087127207

GitHub License Ask DeepWiki Afdian Sponsor

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

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

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

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

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

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

firefly

Lighthouse

Tip

Fireflyは、AstroフレームワークとFuwariテンプレートをベースに開発された、清新で美しい個人ブログテーマテンプレートです。技術愛好家やコンテンツクリエイター向けに設計されています。このテーマはモダンなWeb技術スタックを統合し、豊富な機能モジュールと高度にカスタマイズ可能なインターフェースを提供し、プロフェッショナルで美しい個人ブログウェブサイトを簡単に作成できます。

重要なレイアウトでは、Fireflyは革新的に左右のデュアルサイドバー、記事グリッド（多列）レイアウト、メーソンリーレイアウトを追加し、サイト統計、カレンダーコンポーネント、記事目次などの小さなウィジェットを追加してサイドバーをより豊かにし、同時にfuwariのレイアウトシステムも保持しており、設定ファイルで自由に切り替えられます。

レイアウト設定とデモの詳細については、Fireflyレイアウトシステム詳細をご覧ください

Fireflyはi18n多言語切り替えをサポートしていますが、簡体字中国語以外はAI翻訳です。誤りがある場合は、Pull Requestを提出して修正してください。

✨ 機能

コア機能

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

パーソナライゼーション

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

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

🚀 クイックスタート

環境要件

  • Node.js ≥ 22
  • pnpm ≥ 9

ローカル開発

  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 - ロシア語

設定ファイル構造

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      # 友人リンク設定
│   ├── galleryConfig.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機能があります：

�🧞 コマンド

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

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はこのテンプレートをベースに二次開発されています。

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

技術スタック

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

その他の参考

📝 ライセンス

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

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

著作権表示：

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

🍀 貢献者

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

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

⭐ Star History

Star History Chart