bluish/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0642d158191d7cf2e8e41d3e22f7fbdf7edc2b15
blog/docs/README.ja.md
bluish 5c1399bb96 first commit
2026-01-07 16:24:34 +00:00

16 KiB
Raw Blame History

Firefly

Firefly

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

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

Stars Forks Issues

GitHub License Ask DeepWiki Afdian Sponsor

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

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

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

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

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

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

firefly

Tip

重要なレイアウトでは、Fireflyは革新的に左右のデュアルサイドバー、記事グリッド（多列）レイアウト、メーソンリーレイアウトを追加し、

サイト統計、カレンダーコンポーネント、記事目次などの小さなウィジェットを追加してサイドバーをより豊かにし、

同時にfuwariのレイアウトシステムも保持しており、設定ファイルで自由に切り替えられます。

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

✨ 機能

コア機能

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

パーソナライゼーション

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

ページコンポーネント

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

コンテンツ拡張

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

SEO

  • 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   # 記事カバー画像設定

⚙️ 記事の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`のサイト言語と異なる場合のみ設定
---

🧞 コマンド

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

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 ファイルをご覧ください。

著作権表示：

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

🍀 貢献者

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

Alt

⭐ Star History

Star History Chart