ガイド / はじめる

テーマを追加する

テーマは1つのディレクトリでできています。ビルドはページ単位で分離されるので、既存のテーマに影響を与えずに増やせます。

NOTE

テーマは独自のトークンを持ちません。大きさ・字間・角丸は Tailwind 既定のスケールで書き、入口が名乗るのは色だけです。

1. ディレクトリを作る

ルートを直下に、それを組み立てるものを _theme/ に置きます。

src/pages/themes/izakaya/tree

izakaya/
├── index.astro          トップページ
├── menu/index.astro     お品書き
├── news/[slug].astro    お知らせ
└── _theme/
    ├── global.css       色だけを名乗る
    ├── theme.ts         自分を名乗る
    ├── Base.astro
    ├── routes.ts        BASE = "/themes/izakaya"
    └── components/

2. カタログに載せる

テーマ自身が theme.ts で名乗り、カタログはそれを集めます。登録する表はありません。

src/pages/themes/izakaya/_theme/theme.tsTypeScript

import { defineTheme } from "@/lib/theme";

export const identity = {
  title: "居酒屋テンプレート",
  tagline: "居酒屋のテンプレートです。",
  favicon: "/themes/izakaya/favicon.svg",
};

export default defineTheme({
  site: identity,
  card: {
    name: "居酒屋",
    description: "暗い下地にお品書きを並べる、夜の店の顔になるサイト。",
    tags: [
      "和食・ダイニングバー",
      "お品書き（価格つき）",
      "コース・飲み放題",
      "宴会・貸切の受付",
    ],
    background: "#17130f",
  },
});

theme.ts

カタログのカードが読むフィールド。

フィールド	型	必須	説明
site	ThemeSite	必須	サイトの中で名乗る名前・タグライン・favicon
card.name	string	必須	カードに出す表示名
card.description	string	必須	何のためのテーマかを1文で
card.tags	string[]	1〜4件	1件目は誰向けか、残りはそのサイトに載るもの
card.background	string	必須	カードの絵の下地に敷く、テーマ自身の背景色

CAUTION

base は各テーマの routes.ts の BASE と一致させてください。ルートのテストが両者を突き合わせます。