namyki/blog-code
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
main
blog-code/README.ja.md
Namyki 5c77d25b6d 111
2025-12-08 01:03:07 +08:00

15 KiB
Raw Permalink Blame History

🌸 Mizuki

Node.js >= 20 pnpm >= 9 Astro TypeScript License: Apache-2.0

Mizuki Preview

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

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

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

設定

🔧 コンポーネント設定システムの再構築

  • 統一された設定アーキテクチャ： 動的コンポーネント管理と順序設定をサポートする全く新しいモジュラーコンポーネント設定システム
  • 設定駆動のコンポーネントローディング： 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. 通常の記事がその後に表示され、公開日でソート（最新が先）

🧩 Markdown拡張機能

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

📝 拡張ライティング

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

🎨 ビジュアル要素

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

📊 コンテンツ整理

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

⚡ コマンド

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

コマンド アクション
pnpm install 依存関係をインストール
pnpm dev localhost:4321でローカル開発サーバーを起動
pnpm build 本番サイトを./dist/にビルド
pnpm preview デプロイ前にビルドをローカルでプレビュー
pnpm check Astroエラーチェックを実行
pnpm format Biomeでコードをフォーマット
pnpm lint コードの問題をチェックして修正
pnpm new-post <ファイル名> 新しいブログ投稿を作成
pnpm astro ... Astro CLIコマンドを実行

🎯 設定ガイド

🔧 基本設定

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. プルリクエストを開く

📄 ライセンス

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

元のプロジェクトライセンス

このプロジェクトはFuwariに基づいて開発され、元のプロジェクトはMITライセンスを使用しています。MITライセンスの要件に従い、元の著作権表示と許可通知はLICENSE.MITファイルに含まれています。

🙏 謝辞

  • オリジナルのFuwariテンプレートをベースにしています
  • Yukina - 美しくエレガントなブログテンプレートにインスパイアされました
  • 一部のデザインはFireflyテンプレートからインスピレーションを得ています
  • Pioを使用してかわいいLive2D看板娘プラグインを実装
  • AstroとTailwind CSSで構築
  • アイコンはIconifyから

🌸 特別な感謝

  • Fuwari by saicaca - このプロジェクトのベースとなるオリジナルテンプレート。このような美しく機能的なテンプレートを作成していただきありがとうございます。
  • Yukina - このプロジェクトの形成に役立ったデザインのインスピレーションと創造性を提供してくれたことに感謝します。Yukinaは優れたデザイン原則とユーザーエクスペリエンスを示す、エレガントなブログテンプレートです。
  • Firefly - 優れたレイアウトデザインのアイデアを提供していただきありがとうございます。デュアルサイドバーレイアウト、記事の2カラムグリッドレイアウト、およびいくつかのウィジェットのデザインと実装により、Mizukiのインターフェースがより豊かになりました。

🍀 コントリビューター

このプロジェクトに貢献してくださったすべてのコントリビューターに感謝します。質問や提案がある場合は、IssueまたはPull Requestを提出してください。

⭐ Star History

Star History Chart

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