bluish/blog

Fork 0

Files

bluish 5c1399bb96 first commit

2026-01-07 16:24:34 +00:00

16 KiB

Raw Permalink Blame History

Firefly

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

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

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

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

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

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

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

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

ローカル開発

リポジトリのクローン：

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

まず自分のリポジトリにForkしてからクローン（推奨）

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

🧞 コマンド

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

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

著作権表示：

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

🍀 貢献者

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

16 KiB Raw Permalink Blame History Unescape Escape