テーマ概要
このページで分かること
- EmDashのテーマは
create-astroのテンプレートとして配布されるAstroのプロジェクト全体であることと、テンプレートに含まれるファイル - 公式テンプレートの一覧（
blank、starter、blog、portfolio、marketingのNode版とCloudflare版）とインストール方法 - 初回のセットアップでシードファイルを探す順番と適用のされ方、インストールしたサイトの編集方法
このページの目次
EmDashのテーマは、create-astro のテンプレートとして配布される、Astroのプロジェクト全体です。公開側のルートとコンポーネント、EmDashの実行時の設定、サイトの最初のコンテンツモデルを定める任意のシードファイルを含みます。
実行時に読み込むテーマのパッケージや、テンプレートの階層構造はありません。雛形を作ったあとは、テーマのファイルはサイトのものになり、直接編集できます。
テーマの中身
現在のEmDashのテンプレートは、次のパスを使います。
astro.config.mjs
package.json
seed/
└── seed.json
src/
├── components/
├── layouts/
├── live.config.ts
├── pages/
└── styles/
astro.config.mjsは、サーバー出力、デプロイ用のアダプター、EmDash、データベース、ストレージを設定します。src/live.config.tsは、_emdashライブコレクションを登録します。src/pages/は、公開側のルートを定義します。seed/seed.jsonでは、最初のコレクション、フィールド、設定、タクソノミー、バイライン、メニュー、リダイレクト、ウィジェットエリア、セクション、サンプルコンテンツを宣言できます。package.json#emdash.seedは、シードファイルの場所を指します。
blankテンプレートは、意図的にユーザーのシードを持たず、EmDashに組み込まれた標準のシードを使います。現在のそれ以外のテンプレートは、seed/seed.json を指しています。
やさしい解説
WordPressのテーマは、インストール済みのWordPressに後から追加して切り替えるものです。EmDashのテーマは、サイトを作るときに使うAstroのプロジェクトの雛形そのものです。雛形を作ったあとは、テーマのファイルはそのまま自分のサイトのファイルになり、テーマを更新する仕組みや親テーマ・子テーマのような階層はありません。見た目もルートも、src/ の中のファイルを直接編集して変えます。
テンプレートのインストール
次のコマンドは、Node版のblogテンプレートから雛形を作ります。
npm create astro@latest -- --template @emdash-cms/template-blog
Cloudflare Workersのプロジェクトには、対応する -cloudflare のパッケージを使います。
npm create astro@latest -- --template @emdash-cms/template-blog-cloudflare
現在のテンプレートのパッケージは次のとおりです。
| 用途 | Node | Cloudflare |
|---|---|---|
| 空のプロジェクトの外枠 | @emdash-cms/template-blank |
現在は対応するものなし |
| 基本的なページのサイト | @emdash-cms/template-starter |
@emdash-cms/template-starter-cloudflare |
| 投稿、ページ、カテゴリー、タグ、ウィジェット | @emdash-cms/template-blog |
@emdash-cms/template-blog-cloudflare |
| 制作実績のポートフォリオ | @emdash-cms/template-portfolio |
@emdash-cms/template-portfolio-cloudflare |
| 独自のPortable Textのレンダラーを持つマーケティングページ | @emdash-cms/template-marketing |
@emdash-cms/template-marketing-cloudflare |
雛形を作ったら、依存パッケージをインストールし、生成されたサイトを起動します。
cd my-site
npm install
npm run dev
http://localhost:4321/_emdash/admin を開きます。最初のアクセスではセットアップにリダイレクトされ、サイトの基本情報と管理者の情報を入力します。選んだテンプレートにサンプルのエントリーがある場合は、ウィザードでそれを含めるかどうかも選べます。ルートが描画する現実的なコンテンツがそろうため、デザインを評価している間は含めておくと役立ちます。
初回のセットアップ
EmDashは、ビルド時にシードを読み込みます。次の順番で探します。
.emdash/seed.json。package.json#emdash.seedのパス。seed/seed.json。- ユーザーのシードが見つからない場合は、組み込みの標準のシード。
管理画面への最初のアクセスで、セットアップウィザードはシードのメタデータを表示し、管理者がサンプルコンテンツを含めるかどうかを選べるようにします。ウィザードは、空のデータベースにシードを適用し、セットアップの完了を記録します。以降の起動では、既存のサイトにシードを再度適用しません。
やさしい解説
WordPressでは、インストールしたあとに管理画面で投稿タイプやカテゴリーを用意していきます。EmDashのシードファイルは、コレクションやフィールド、サンプルコンテンツなどの最初の状態をまとめて書いておき、初回のセットアップで一度だけ適用するためのファイルです。セットアップが終わったサイトでは、seed/seed.json を書き換えても、既存のサイトには反映されません。コレクションやフィールドを変えるときは、管理画面の「コンテンツタイプ」で変更します。
インストールしたサイトのカスタマイズ
生成されたプロジェクトを直接編集します。
- ルートのファイルは
src/pages/で変更します。 - 共通のマークアップは
src/layouts/とsrc/components/で変更します。 - 最初のモデルは、初回のセットアップの前に
seed/seed.jsonで変更します。 - 既存のサイトのモデルは、管理画面の「コンテンツタイプ」で管理します。