レイアウトの作成

最初に 📖 レイアウト を読んでください。

カスタムレイアウトを作成するには、layouts ディレクトリに新しい Vue ファイルを作成するだけです:

your-slidev/
  ├── ...
  ├── slides.md
  └── layouts/
      ├── ...
      └── MyLayout.vue

レイアウトは Vue コンポーネントなので、Vue のすべての機能を使用できます。

レイアウトコンポーネントで、スライドコンテンツに <slot/> (デフォルトスロット) を使用します:

default.vue

<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

より複雑なレイアウト用に 名前付きスロット を持つこともできます:

split.vue

<template>
  <div class="slidev-layout split">
    <div class="left">
      <slot name="left" />
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

その後、✨ レイアウト向け Slot Sugar で使用します。