README.ja.md

🌸 Mizuki

Astro で構築された高度な機能と美しいデザインを備えた、モダンで機能が豊富な静的ブログテンプレート。

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

包括的なドキュメントですぐに始めましょう。テーマのカスタマイズや機能の設定、本番環境へのデプロイなどブログを完成させるために必要なすべての情報がドキュメントに網羅されています。

🚀 NEW: 自動解像度スケーリング

🎯 スマート解像度アルゴリズム - デバイスの解像度に応じてレイアウトをインテリジェントに適応、あらゆるデバイスでの閲覧体験を提供します。

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

🔧 コンポーネント構成システムを再構築

統合された構成アーキテクチャ: 全く新しいモジュール型コンポーネント構成システムにより、動的なコンポーネント管理と順序設定に対応
構成駆動型のコンポーネントの読み込み: サイドバーコンポーネントを再構築し、完全に構成ベースのコンポーネントの読み込みメカニズムを実装しています
統合コントロールの切り替え: 音楽プレーヤーとお知らせのコンポーネントを独立した有効化切り替えを削除、sidebarLayoutConfig を通じた統合コントロールを実現しています
適応型レスポンシブレイアウト: コンポーネントはレスポンシブレイアウトに対応しており、デバイスの種類に応じた表示を自動調整します

📐 レイアウトシステムを最適化

動的なサイドバーの位置調整: 自動なレイアウト適応による、左右サイドバーの切り替えに対応
インテリジェントな記事ディレクトリの位置付け: サイドバーが右側にある場合に自動で左側に移動で、より良い読書体験を提供します
グリッドレイアウトの改善: CSS グリッドレイアウトを最適化でコンテナ幅の異常問題を解決済み

🎛️ 構成ファイル形式の標準化

標準化された構成形式: 統一されたコンポーネント設定ファイル形式仕様を作成
型安全性: 構成の型安全性を確保するための TypeScript 型な定義
拡張性: カスタムコンポーネントタイプと構成オプションに対応

🧹 コードの最適化

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

✨ 機能

🎨 デザインとインターフェース

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

🔍 コンテンツと検索

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

📱 特別ページ

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

🛠 技術的特徴

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

🚀 クイックスタート

📦 インストール

リポジトリをクローン：

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

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

# pnpmがインストールされていない場合はインストール
npm install -g pnpm

# プロジェクトの依存関係をインストール
pnpm install

ブログを設定：
- src/config.tsを編集してブログ設定をカスタマイズ
- サイト情報、テーマカラー、バナー画像、ソーシャルリンクを更新
- 機能ページの機能を設定
開発サーバーを起動：
```
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： リポジトリを接続

デプロイ前に、src/config.tsのsiteURLを更新してください。

環境変数設定（オプション）： .env.exampleを参照して設定してください 推奨されません.envファイルをGitにコミットすること。.envはローカルデバッグまたはビルドのみで使用する必要があります。クラウドプラットフォームにデプロイする場合、プラットフォームの環境変数設定経由で設定することをお勧めします。

📝 投稿フロントマター形式

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

フロントマターフィールドの説明

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

ピン留め記事機能

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

使用方法：

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

ソートルール：

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

記事レベルのコメント制御

commentフィールドを使用すると、各記事のコメントエリアの有効化と無効化を個別に制御できます。

使用方法：

comment: true  # コメントを有効にする（デフォルト）
comment: false # コメントを無効にする

注意： この機能を使用するには、まずsrc/config.tsでコメントシステムを有効にする必要があります。

🧩 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`	Prettierでコードをフォーマット
`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でコンテンツを編集

📦 コードとコンテンツの分離（オプション）

Mizukiは、コードとコンテンツを2つの独立したリポジトリに分けて管理することをサポートしており、チーム协作や大規模プロジェクトに適しています。

簡単選択:

使用シナリオ	設定方法	対象者
🆕 ローカルモード（デフォルト）	設定不要、そのまま使用	初心者、個人ブログ
🔧 分離モード	`ENABLE_CONTENT_SYNC=true`を設定	チーム协作、プライベートコンテンツ

ワンクリック有効化/無効化:

# 方法 1: ローカルモード（初心者向け）
# .envファイルを作成せず、そのまま実行
pnpm dev

# 方法 2: コンテンツ分離モード
# 1. 設定ファイルをコピー
cp .env.example .env

# 2. .envを編集してコンテンツ分離を有効化
ENABLE_CONTENT_SYNC=true
CONTENT_REPO_URL=https://github.com/your-username/Mizuki-Content.git

# 3. コンテンツを同期
pnpm run sync-content

機能:

✅ パブリックおよびプライベートリポジトリをサポート 🔐
✅ ワンクリックで有効化/無効化、コード修正不要
✅ 自動同期、開発前に最新コンテンツを自動プル

📖 詳細設定: コンテンツ分離完全ガイド 🔄 移行チュートリアル: シングルリポジトリから分離モードへ移行 📚 その他のドキュメント: ドキュメントインデックス

✏️ 貢献

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

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

📄 ライセンス

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

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

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

🙏 謝辞

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

🌸 特別な感謝

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

🍀 コントリビューター

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

⭐ Star History

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🌸 Mizuki

🚀 NEW: 自動解像度スケーリング

🔧 コンポーネント構成システムを再構築

📐 レイアウトシステムを最適化

🎛️ 構成ファイル形式の標準化

🧹 コードの最適化

✨ 機能

🎨 デザインとインターフェース

🔍 コンテンツと検索

📱 特別ページ

🛠 技術的特徴

🚀 クイックスタート

📦 インストール

📝 コンテンツ管理

🚀 デプロイ

📝 投稿フロントマター形式

フロントマターフィールドの説明

ピン留め記事機能

記事レベルのコメント制御

🧩 Markdown拡張機能

📝 拡張ライティング

🎨 ビジュアル要素

📊 コンテンツ整理

⚡ コマンド

🎯 設定ガイド

🔧 基本設定

📱 機能ページの設定

📦 コードとコンテンツの分離（オプション）

✏️ 貢献

📄 ライセンス

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

🙏 謝辞

🌸 特別な感謝

🍀 コントリビューター

⭐ Star History

FilesExpand file tree

README.ja.md

Latest commit

History

README.ja.md

File metadata and controls

🌸 Mizuki

🚀 NEW: 自動解像度スケーリング

🔧 コンポーネント構成システムを再構築

📐 レイアウトシステムを最適化

🎛️ 構成ファイル形式の標準化

🧹 コードの最適化

✨ 機能

🎨 デザインとインターフェース

🔍 コンテンツと検索

📱 特別ページ

🛠 技術的特徴

🚀 クイックスタート

📦 インストール

📝 コンテンツ管理

🚀 デプロイ

📝 投稿フロントマター形式

フロントマターフィールドの説明

ピン留め記事機能

記事レベルのコメント制御

🧩 Markdown拡張機能

📝 拡張ライティング

🎨 ビジュアル要素

📊 コンテンツ整理

⚡ コマンド

🎯 設定ガイド

🔧 基本設定

📱 機能ページの設定

📦 コードとコンテンツの分離（オプション）

✏️ 貢献

📄 ライセンス

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

🙏 謝辞

🌸 特別な感謝

🍀 コントリビューター

⭐ Star History