mcpField
V
valaxy

valaxy

github.com/yunyoujun開発1.1k47 回インストール3 日前に更新
リポジトリ

valaxy について

Valaxyは、Markdownベースのサイトを構築するVue 3・Viteの静的ブログフレームワークです。ファイルベースルーティングとテーマ・アドオン設定を備え、ユーザーコンポーネントでテーマやコアのコンポーネントを上書きできます。

主な機能

  1. 01Markdownによる静的サイト生成
  2. 02Vue 3とViteを基盤に採用
  3. 03ファイルベースルーティング
  4. 04frontmatterによる投稿メタデータ設定
  5. 05テーマとアドオンの設定
  6. 06コンポーネントとスタイルのカスタマイズ

活用シーン

  1. 01Markdown投稿を使った静的ブログの作成
  2. 02タグやカテゴリーによる投稿整理
  3. 03複数言語オプションを使ったコンテンツ構築
  4. 04テーマのコンポーネントやスタイルの上書き

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/yunyoujun/valaxy --skill valaxy

インストール後、Claude Code で/valaxyを入力して読み込まれたか確認します。

同梱ファイルreferences/architecture.mdreferences/theme-addon-dev.md

詳細

Valaxy

次世代の静的ブログフレームワーク：Vue 3 + Vite + UnoCSS + ファイルベースルーティング + markdown-it。

クイックリファレンス

pnpm create valaxy          # scaffold new site
pnpm i                      # MUST use pnpm
pnpm dev                    # dev server at localhost:4859
pnpm build                  # SSG build to dist/

設定ファイルは2つです：

  • site.config.ts — defineSiteConfig() を使ったサイトメタデータ（タイトル、作者、ソーシャル、検索、コメント）
  • valaxy.config.ts — defineValaxyConfig<ThemeConfig>() を使ったフレームワーク設定（テーマ、アドオン、Markdown、Vite）
  • 任意の theme.config.ts — defineThemeConfig() を使ったテーマ固有の設定

投稿は pages/posts/*.md に配置します。フロントマターでタイトル、日付、タグ、カテゴリー、カバー画像、下書き、暗号化、レイアウトなどを設定します。

主なパターン

設定のマージ

設定ソースは defu を使ってマージされます（ユーザー設定が優先）：デフォルト → テーマ → アドオン → ユーザー。

ファイル解決（ルーツシステム）
roots = [clientRoot, themeRoot, ...addonRoots, userRoot]

ユーザーのコンポーネント／レイアウト／スタイルは、ファイル名の一致により、テーマのものより優先され、テーマのものはコアのものより優先されます。

ルーティング

vue-router/vite によるファイルベースのルーティングです。pages/ 内のファイルがルートになります。レイアウトは自動的に割り当てられます：

  • pages/posts/** → post レイアウト
  • pages/tags/** → tags レイアウト
  • pages/categories/** → categories レイアウト

フロントマターで layout: xxx を指定すると上書きできます。

コレクション

defineCollection() を使って pages/collections/{name}/index.ts に定義します：

import { defineCollection } from 'valaxy'

export default defineCollection({
  key: 'hamster',
  title: 'Hamster Stories',
  items: [
    { title: 'Chapter 1', key: '1' },
  ],
})
i18n
  • CSS ベースのバイリンガル対応：Markdown 内の ::: zh-CN / ::: en コンテナ
  • ファイルベース：locales/*.yml
  • フロントマター：title: { en: 'Title', 'zh-CN': '标题' }
  • タグ：$locale:tag.notes 構文
カスタムスタイル

styles/index.ts（または .scss／.css）を作成すると、自動的に読み込まれます。テーマ設定では CSS 変数を上書きします。

カスタムコンポーネント

.vue ファイルを components/ に配置すると自動登録され、名前に基づいてテーマ／コアのコンポーネントを上書きします。

モノレポ開発

Valaxy コアフレームワーク自体を開発する場合：

pnpm i                     # install all workspace deps
pnpm run build             # build core: utils → valaxy → devtools
pnpm dev:lib               # watch core packages
pnpm demo                  # run demo site
pnpm docs:dev              # run docs site
pnpm test                  # unit tests (vitest)
pnpm e2e                   # E2E tests (playwright)
pnpm lint                  # eslint
pnpm typecheck             # type check
リポジトリ URL の正規化

package.json のリポジトリ URL を表示する場合は、@valaxyjs/utils から normalizeRepositoryUrl() をインポートして使用し、git+ プレフィックスを削除します。

参考資料

  • 概要からテーマを生成または再設計する：このリポジトリの専用 valaxy-theme スキルを使用します（pnpm dlx skills add YunYouJun/valaxy --skill valaxy-theme）。実行可能なテーマ／デモ、UI ライブラリとの統合、検証について説明しています。

  • フレームワークのアーキテクチャ、仮想モジュール、コンポーザブル、コンポーネント：references/architecture.md をお読みください

  • テーマ／アドオンの開発、投稿のフロントマター、アドオンギャラリー：references/theme-addon-dev.md をお読みください

コメント

Markdown 対応