テーマの作成

最初に 📖 テーマとアドオンを読んでください。

各スライドプロジェクトは 1 つのテーマのみを持つことができます。テーマはスライドの外観を提供することに焦点を当てるべきです。機能が外観に関連していない場合、別々に使用できる場合は、アドオンとして実装するべきです。

開始するために、最初のテーマをひな型から展開するためにジェネレータを使用することをお勧めします

bash

$ pnpm create slidev-theme

bash

$ npm init slidev-theme@latest

bash

$ yarn create slidev-theme

bash

$ bun create slidev-theme

bash

$ deno init --npm slidev-theme

その後、それを修正して遊ぶことができます。公式テーマも例として参照できます。

機能

テーマは以下のポイントに寄与できます:

グローバルスタイル
デフォルト設定を提供する
カスタムレイアウトを提供するか、既存のものをオーバーライドする
カスタムコンポーネントを提供する
UnoCSS、Shiki などのツールを構成する

ただし、以下のポイントはテーマで実装することは推奨されず、アドオンとして実装する方が良いかもしれません:

新しいコードスニペット
新しいコードランナー
別々に使用できるその他のもの

基本的に、グローバルスタイル、レイアウト、コンポーネントを提供し、ツールを構成する方法は、スライドプロジェクトで同じです。たとえば、Shiki を設定するために、ハイライターの設定に説明されているように ./setup/shiki.ts を作成できます。詳細については、カスタマイズガイドを参照してください。

デフォルト Slidev 設定を提供するために、package.json ファイルに slidev.defaults フィールドを追加できます。これはユーザーの設定とマージされます:

package.json

json

{
  "slidev": {
    "defaults": {
      "transition": "slide-left",
      "aspectRatio": "4/3"
    }
  }
}

必須 Slidev バージョンを指定する

テーマが新しく導入された Slidev の特定の機能に依存している場合、テーマが正しく機能するために必要な最小 Slidev バージョンを設定できます:

json

{
  "engines": {
    "slidev": ">=0.48.0"
  }
}

互換性のないバージョンが使用されると、エラーメッセージが表示されます。

テーマのメタデータ

デフォルトでは、Slidev はテーマがライトモードとダークモードの両方をサポートしていると想定しています。テーマを特定の色スキームでのみ対応させたい場合は、package.json で明示的に指定する必要があります:

package.json

json

{
  "slidev": {
    "colorSchema": "light" // or "dark" or "both"
  }
}

プレビュー

開発時にテーマをプレビューするには、デモスライドデッキを使用できます。そうするには、次のヘッドマターで ./slides.md ファイルを作成します:

slides.md

---
theme: ./  # カレントディレクトリのテーマを使用する
---

その後、通常と同じようにデモスライドを開始できます。

公開

テーマを公開する場合、.vue や .ts ファイルなどの非 JS ファイルはコンパイルせずに直接公開できます。Slidev はテーマを使用するときに自動的にコンパイルします。

テーマは以下の規約に従う必要があります:

パッケージ名は slidev-theme- で始まるべきです。たとえば、slidev-theme-name または @scope/slidev-theme-name
package.json の keywords フィールドに "slidev-theme" と "slidev" を追加します

テーマは NPM に公開せずにローカルで使用できます。テーマが個人的な使用のためのみの場合、単にそれをローカルテーマとして使用するか、プライベートスコープ付きパッケージとして公開できます。ただし、他のユーザーと共有したい場合は、NPM レジストリに公開することをお勧めします。

テーマの作成 ​

機能 ​

必須 Slidev バージョンを指定する ​

テーマのメタデータ ​

プレビュー ​

公開 ​

テーマの作成

機能

必須 Slidev バージョンを指定する

テーマのメタデータ

プレビュー

公開