🌸 Mizuki

Astroをベースにした、先進的な機能と美しいデザインを備えた現代的な静的ブログテンプレートです。

🖥️ ライブデモ 📝 ドキュメント

🌏 README 言語 English / 中文 / 日本語 / 中文繁体 /

• ページリファクタリング: アニメ、タイムライン、プロジェクト、スキル、アルバム、フレンドリンク、日記、アバウトページを完全にリファクタリングし、パフォーマンスとユーザーエクスペリエンスを向上させました。
• ページ切り替え機能: ページ切り替え機能とSEO最適化モジュールを追加し、機能ページの表示/非表示を制御できるようになりました。
• 新しいグリッドレイアウト: 新しいグリッド記事リストレイアウトを導入し、コンテンツ表示効果を改善しました。
• リップル管理: リップル効果管理モジュールを追加し、視覚的なインタラクション効果を強化しました。

• Pio Live2D統合: Pio Live2Dキャラクターを統合し、可愛らしいインタラクティブな仲間を提供してユーザーエンゲージメントを向上させます。
• 高度な設定: モデルパス、位置、サイズ、会話内容など、src/config.tsで詳細な設定をサポートし、パーソナライズされたニーズに対応します。
• シームレスなナビゲーション: 「ホームに戻る」機能は、テーマに組み込まれたSwupを使用して、スムーズでリフレッシュなしのページ遷移を提供します。

• アニメページ： より可愛くて魅力的なアニメページにリデザインし、アニメリスト、詳細、タイムラインを含みます。
• アルバムページ： ページネーション+フォルダデータインデックス方式を使用してアルバムページを再構築しました。

• 新しいページ： プロジェクト紹介、スキル紹介、タイムラインページを追加し、あなたの作品、専門スキル、成長の旅を表示できるようになりました。
• ドロップダウンメニュー修正： ドロップダウンメニューをクリックした際に表示される境界線の問題を解決し、インターフェースの一貫性を向上させました。
• 検索機能の最適化： 検索機能のパフォーマンスと精度を向上させました。
• フッターHTMLインジェクション： ページの下部にカスタムHTMLコンテンツを挿入できる新機能を導入し、より大きな柔軟性を提供します。

• Mermaid構文サポート： Mermaidチャート構文のサポートを追加し、フローチャート、シーケンス図、ガントチャートなどをMarkdown内に直接埋め込むことができるようになりました。
• Umamiアナリティクス： Umamiアナリティクスのサポートを追加し、ウェブサイトの訪問データ分析を簡単に統合できるようになりました。

• 統一された設定アーキテクチャ： 動的コンポーネント管理と順序設定をサポートする全く新しいモジュラーコンポーネント設定システム
• 設定駆動のコンポーネントローディング： SideBarコンポーネントを再構築し、完全に設定ベースのコンポーネントローディングメカニズムを実装
• 統一制御スイッチ： 音楽プレーヤーとお知らせコンポーネントの独立したenableスイッチを削除し、sidebarLayoutConfigによる統一制御に
• レスポンシブレイアウト適応： コンポーネントがレスポンシブレイアウトをサポートし、デバイスタイプに基づいて表示を自動調整

• Umami API キー（任意）： Umami アナリティクスを使用する場合は、デプロイ先プラットフォームに環境変数 UMAMI_API_KEY を設定するか、プロジェクトの設定ファイルに直接キーを記載することを推奨します。
• 型安全性： 設定の型安全性を確保する包括的なTypeScript型定義
• 拡張性： カスタムコンポーネントタイプと設定オプションのサポート

• テストファイルのクリーンアップ： 未使用のテスト設定と依存関係を削除し、プロジェクトサイズを削減
• コード構造の最適化： コンポーネントアーキテクチャを改善し、コードの保守性を向上
• パフォーマンス向上： コンポーネントローディングロジックを最適化し、ページレンダリングパフォーマンスを向上

• AstroとTailwind CSSで構築
• Swupを使用したスムーズなアニメーションとページ遷移
• システム設定検出機能付きのライト/ダークテーマ切り替え
• カスタマイズ可能なテーマカラーと動的バナーカルーセル
• カルーセル、透明度、ぼかし効果を備えた全画面背景画像
• すべてのデバイスに対応した完全レスポンシブデザイン
• JetBrains Monoフォントによる美しいタイポグラフィ

• Pagefindベースの高度な検索機能
• 構文強調表示付きの拡張Markdown機能
• 自動スクロール機能付きのインタラクティブな目次
• RSSフィード生成
• 読書時間の推定
• 記事のカテゴリ化とタグシステム

• アニメトラッキングページ - アニメの視聴進捗と評価を追跡
• 友達ページ - 友達のウェブサイトを美しいカードで紹介
• 日記ページ - ソーシャルメディアのような生活の瞬間を共有
• アーカイブページ - 記事の整理されたタイムラインビュー
• アバウトページ - カスタマイズ可能な自己紹介

• Expressive Codeベースの拡張コードブロック
• KaTeXレンダリングによる数式サポート
• PhotoSwipeギャラリー統合による画像最適化
• サイトマップとメタタグを含むSEO最適化
• 遅延読み込みとキャッシュによるパフォーマンス最適化
• Twikoo統合によるコメントシステム

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

   git clone https://github.com/matsuzaka-yuki/mizuki.git
   cd mizuki
   

2. 依存関係をインストール：

   # pnpmがインストールされていない場合はインストール
   npm install -g pnpm
   
   # プロジェクトの依存関係をインストール
   pnpm install
   

3. ブログを設定：

   • src/config.tsを編集してブログ設定をカスタマイズ
   • サイト情報、テーマカラー、バナー画像、ソーシャルリンクを更新
   • 機能ページの機能を設定

4. 開発サーバーを起動：

   pnpm dev
   

   ブログはhttp://localhost:4321で利用可能になります

• 新しい投稿を作成： pnpm new-post <ファイル名>
• 投稿を編集： src/content/posts/内のファイルを修正
• 特別ページをカスタマイズ： src/content/spec/内のファイルを編集
• 画像を追加： 画像をsrc/assets/またはpublic/に配置

ブログを任意の静的ホスティングプラットフォームにデプロイ：

• Vercel： GitHubリポジトリをVercelに接続
• Netlify： GitHubから直接デプロイ
• GitHub Pages： 付属のGitHub Actionsワークフローを使用
• Cloudflare Pages： リポジトリを接続

デプロイ前に、astro.config.mjsのsite URLを更新してください。

---
title: 私の最初のブログ投稿
published: 2023-09-09
description: これは私の新しいブログの最初の投稿です。
image: ./cover.jpg
tags: [タグ1, タグ2]
category: フロントエンド
draft: false
pinned: false
lang: ja      # 記事の言語がconfig.tsのサイト言語と異なる場合のみ設定
---

• title: 記事のタイトル（必須）
• published: 公開日（必須）
• description: SEOとプレビュー用の記事の説明
• image: カバー画像のパス（記事ファイルからの相対パス）
• tags: カテゴリ化のためのタグの配列
• category: 記事のカテゴリ
• draft: 本番環境で記事を非表示にするにはtrueに設定
• pinned: 記事を上部に固定するにはtrueに設定
• lang: 記事の言語（サイトのデフォルト言語と異なる場合のみ設定）

pinnedフィールドを使用すると、重要な記事をブログリストの上部に固定できます。ピン留めされた記事は、公開日に関係なく、常に通常の記事の前に表示されます。

使用方法：

pinned: true  # この記事を上部に固定
pinned: false # 通常の記事（デフォルト）

ソートルール：

1. ピン留め記事が最初に表示され、公開日でソート（最新が先）
2. 通常の記事がその後に表示され、公開日でソート（最新が先）

Mizukiは標準のGitHub Flavored Markdownを超える拡張機能をサポートしています：

• コールアウト： > [!NOTE]、> [!TIP]、> [!WARNING]などを使用して美しい注釈ボックスを作成
• 数式： $インライン$と$$ブロック$$構文を使用してLaTeX数式を記述
• コード強調表示： 行番号とコピーボタン付きの高度な構文強調表示
• GitHubカード： ::github{repo="ユーザー/リポジトリ"}を使用してリポジトリカードを埋め込み

• 画像ギャラリー： 画像表示のための自動PhotoSwipe統合
• 折りたたみセクション： 展開可能なコンテンツブロックを作成
• カスタムコンポーネント： 特別なディレクティブでコンテンツを強化

• 目次： 見出しから自動生成され、スムーズスクロールをサポート
• 読書時間： 自動計算して表示
• 記事メタデータ： カテゴリとタグを含む豊富なフロントマターサポート

すべてのコマンドはプロジェクトルートから実行します：

src/config.tsを編集してブログをカスタマイズ：

export const siteConfig: SiteConfig = {
  title: "あなたのブログ名",
  subtitle: "あなたのブログの説明",
  lang: "ja", // または "zh-CN"、"en" など
  themeColor: {
    hue: 210, // 0-360、テーマの色相
    fixed: false, // テーマカラーピッカーを非表示
  },
  banner: {
    enable: true,
    src: ["assets/banner/1.webp"], // バナー画像
    carousel: {
      enable: true,
      interval: 0.8, // 秒
    },
  },
};

• アニメページ： src/pages/anime.astroでアニメリストを編集
• 友達ページ： src/content/spec/friends.mdで友達データを編集
• 日記ページ： src/pages/diary.astroで瞬間を編集
• アバウトページ： src/content/spec/about.mdでコンテンツを編集

貢献は歓迎します！お気軽に問題やプルリクエストを提出してください。

1. リポジトリをフォーク
2. 機能ブランチを作成 (git checkout -b feature/amazing-feature)
3. 変更をコミット (git commit -m 'Add some amazing feature')
4. ブランチにプッシュ (git push origin feature/amazing-feature)
5. プルリクエストを開く

このプロジェクトはMITライセンスの下でライセンスされています - 詳細はLICENSEファイルをご覧ください。

• オリジナルのFuwariテンプレートをベースにしています
• AstroとTailwind CSSで構築
• Yukina - 美しくエレガントなブログテンプレートにインスパイアされました
• アイコンはIconifyから

• Yukina - このプロジェクトの形成に役立ったデザインのインスピレーションと創造性を提供してくれたことに感謝します。Yukinaは優れたデザイン原則とユーザーエクスペリエンスを示す、エレガントなブログテンプレートです。

⭐ このプロジェクトが役立つと思ったら、スターを付けることを検討してください！