mcpField
W
wix-headless-templates

wix-headless-templates

github.com/wix開発36179 回インストール今日更新
リポジトリ

wix-headless-templates について

ビジネスソリューション別に整理された Wix Headless サイト用テンプレート集で、`wix-headless-kit` とともに使います。ソースコードとシード用素材を提供し、kit がデプロイ可能なプロジェクトに組み立てます。

主な機能

  1. 0113種類の Wix ビジネスソリューション用テンプレート
  2. 02フレームワーク非依存のアプリコア
  3. 03編集可能な SEO を備えた Astro ページ
  4. 04標準 fetch を使う REST データ層
  5. 05サイトのシードと確認用スクリプト
  6. 06組み立て済みプロジェクトの雛形

活用シーン

  1. 01Wix Headless のストアやブログを始める
  2. 02予約、イベント、フォームを軸にサイトを構築する
  3. 03プランからサイトにデータを投入し、内容を確認する

インストール

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

$npx skills add https://github.com/wix/skills --skill wix-headless-templates

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

blank/project/
.gitignore
astro.config.mjs
package.json
README.md
tsconfig.json
blank/project/public/
favicon.svg
blank/project/src/assets/
astro.svg
background.svg
wix.svg
blank/project/src/components/
Hero.astro
Welcome.astro
blank/project/src/layouts/
Layout.astro
blank/project/src/pages/
index.astro
blog/app-astro/layouts/
SiteLayout.astro
blog/app-astro/pages/
blog.astro
blog/app-astro/pages/blog/
[...slug].astro
blog/app-astro/pages/blog/category/
[slug].astro
blog/app-astro/pages/blog/tag/
[slug].astro
blog/app/components/blog/
BlogFeedView.tsx
CommentsView.tsx
PostLikeButton.tsx
PostView.tsx
RichContent.tsx
blog/app/hooks/blog/
useBlogFeed.ts
useComments.ts
usePost.ts
blog/app/wix/blog/
authors-core.ts
authors.ts
blog-feed-store.ts
comments-core.ts

詳細

Wix Headless Templates

Wix Headless サイトを構成するコードが、Wix Business Solution ごとに1つのフォルダーにまとめられています。ビルドを実行するのは wix-headless-kit スキルです。その install/templates.mjs がこのフォルダーを一度だけキット自身の templates/ に取得します（skills/wix-headless-templates/ のスパースクローン、またはキットがリポジトリのチェックアウトから実行される場合はそのチェックアウト）。キットはそこからコピー、デプロイ、シードを行います。このスキル独自のフローはありません。公開、ミラーリングされ、スキルとして読みやすい形に保つための素材です。

レイアウト

パス内容
<solution>/INSTRUCTIONS.mdソリューションのプレイブックです。含まれるもの、各フック、ストア、DTO のコントラクト、ページ、ダッシュボードへのリンクを記載しています
<solution>/app/フレームワークに依存しないコアです。wix/<solution>/*-core.ts（純粋なロジック）、SDK トランスポート、*-store.ts ステートマシン、types.ts を含みます。hooks/（React バインディング）と components/（正確でシンプルなリファレンス実装）も含みます
<solution>/app-astro/所有者が編集できる SEO があらかじめ組み込まれた Astro のページとレイアウトです
<solution>/rest/シンプルな fetch を使用した、データレイヤーの別実装です。エクスポートは同じで、バンドラーのないサイト向けです
<solution>/seed/SEED.md（プランの形式と注意点）、seed-<solution>.mjs（プランからサイトにデータを投入します。冪等です）、read-site.mjs（サイトにすでに存在する内容を報告します）を含みます
<solution>/project/組み立て済みのプロジェクトです。CLI の空のスキャフォールドにソリューションをデプロイし、package-lock.json を加えたもので、作成時またはアタッチ時にそのままコピーされます。そのため、解決処理を実行せずに npm ci でインストールできます
shared/すべてのサイトが満たすべき基準を定めた DESIGN.md と CONTENT.md、権限の高い呼び出しが必要なサーバー側の作業を記載した CUSTOM_OPERATIONS.md、クライアント、メディア、設定の接続部分を含む app/ と rest/、サイト検索やメディアアップロードを含む capabilities/、すべてのシードで使う CLI リゾルバー、トークン、画像リゾルバー、サイトコンテキストを含む seed/ があります
blank/組み立て済みプロジェクトの起点となる、変更のない CLI スキャフォールドです
compose.mjsリポジトリのツールです。blank/ とデプロイ内容からソリューションの project/ とロックファイルを再構築します

ソリューションは、storefront、bookings、rentals、blog、cms、forms、members、events、 restaurants、donations、pricing-plans、portfolio、faq です。

単独で読む

  • ソリューションの内容と各要素の連携方法：<solution>/INSTRUCTIONS.md、続いて app/wix/<solution>/types.ts。
  • サイトへのデータ投入方法と、シードで拒否される内容：<solution>/seed/SEED.md。
  • 何も書き込む前に既存のサイトに含まれている内容を確認する方法：node <solution>/seed/read-site.mjs --site <siteId>（ログイン済みの Wix CLI が必要です）。
  • wix.config.json があるプロジェクトフォルダーから、手動でシードを実行する方法：node <solution>/seed/seed-<solution>.mjs plan.json。

変更する

app/、app-astro/、rest/、seed/ 配下のコードがソースです。project/ はリポジトリのチェックアウトから node compose.mjs <solution> を実行して生成します（プロジェクトの依存関係を再インストールするため、型チェックの前にプロジェクトで npm ci を実行してください）。組み立て済みのプロジェクトは、独自の tsconfig.json を使って tsc でチェックします。ロックファイルはサンドボックスのミラーではなく、ローカルで解決されます。

コメント

Markdown 対応