ディレクトリ構造

Slidevは設定面を最小化し、機能拡張を柔軟かつ直感的に行うために、いくつかのディレクトリ構造の規約を採用しています。

基本的な構造は以下の通りです：

your-slidev/
  ├── components/       # カスタムコンポーネント
  ├── layouts/          # カスタムレイアウト
  ├── public/           # 静的アセット
  ├── setup/            # カスタムセットアップ/フック
  ├── styles/           # カスタムスタイル
  ├── index.html        # index.htmlへのインジェクション
  ├── slides.md         # メインスライド
  └── vite.config.ts   # 拡張されたviteの設定

すべてオプションです。

コンポーネント

規約： ./components/*.{vue,js,ts,jsx,tsx,md}

このディレクトリ内のコンポーネントは、ファイル名と同じコンポーネント名で、スライドのMarkdownで直接使用することができます。

例：

your-slidev/
  ├── ...
  └── components/
      ├── MyComponent.vue
      └── HelloWorld.ts

<!-- slides.md -->

# My Slide

<MyComponent :count="4"/>

<!-- どちらの名前も使えます -->

<hello-world foo="bar">
  Slot
</hello-world>

この機能はvite-plugin-componentsによって提供されています。詳細はこちらを参照してください。

またSlidevはいくつかのビルトインコンポーネントを提供していますので、それを利用することもできます。

レイアウト

規約： ./layouts/*.{vue,js,ts,jsx,tsx}

your-slidev/
  ├── ...
  └── layouts/
      ├── cover.vue
      └── my-cool-theme.vue

レイアウトには任意のファイル名を使用することができます。そしてファイル名を使用して、YAMLヘッダでレイアウトを参照します。

---
layout: my-cool-theme
---

作成したレイアウトがビルトインのレイアウトやテーマと同じ名前の場合、カスタムレイアウトがビルトイン/テーマレイアウトより優先されます。優先順位はローカル > テーマ > ビルトインの順です。

レイアウトコンポーネントでは、スライドのコンテンツに対して<slot />を使用します。例：

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

静的アセット

規約： ./public/*

このディレクトリに配置されているアセットは、開発中はルートパス/で提供され、そのままdistディレクトリのルートにコピーされます。詳細はVite's public directoryを参照してください。

スタイル

規約： ./style.css | ./styles/index.{css,js,ts}

この規約に従って配置されたファイルは、Appのルートに挿入されます。複数のCSSをインポートする必要がある場合は、以下のような構造を作成し、インポートの順序を自分で管理することができます。

your-slidev/
  ├── ...
  └── styles/
      ├── index.ts
      ├── base.css
      ├── code.css
      └── layouts.css

// styles/index.ts

import './base.css'
import './code.css'
import './layouts.css'

スタイルはWindi CSSとPostCSSで処理されるため、CSSのネストやat-directivesをそのまま使用することができます。例：

.slidev-layout {
  @apply px-14 py-10 text-[1.1rem];

  h1, h2, h3, h4, p, div {
    @apply select-none;
  }

  pre, code {
    @apply select-text;
  }

  a {
    color: theme('colors.primary');
  }
}

シンタックスについて詳しく学ぶ

`index.html`

規約： index.html

index.htmlはメインのindex.htmlにmeteタグやscriptを挿入する機能を提供します。

例えば、次のようなカスタムindex.htmlの場合：

<!-- ./index.html -->
<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
</head>

<body>
  <script src="./your-scripts"></script>
</body>

最終的にホストされるindex.htmlは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png">
  <!-- 挿入されたhead -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Nunito+Sans:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="__ENTRY__"></script>
  <!-- 挿入されたbody -->
  <script src="./your-scripts"></script>
</body>
</html>

グローバルレイヤー

規約： global-top.vue | global-bottom.vue

詳細：グローバルレイヤー

# ディレクトリ構造

# コンポーネント

# レイアウト

# 静的アセット

# スタイル

# index.html