slidev-project-structure

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Project Structure

Slidev 项目结构

This skill helps you understand the complete structure of a Slidev project, including configuration files, directory conventions, and customization options.

本技能可帮助你了解Slidev项目的完整结构，包括配置文件、目录规范和自定义选项。

When to Use This Skill

何时使用本技能

Setting up a complex Slidev project
Adding custom components or layouts
Configuring themes and addons
Understanding where to put assets and styles
Troubleshooting project structure issues

搭建复杂的Slidev项目
添加自定义组件或布局
配置主题与插件
了解资源与样式的存放位置
排查项目结构相关问题

Standard Project Structure

标准项目结构

my-presentation/
├── slides.md              # Main presentation file
├── package.json           # Project dependencies
├── components/            # Custom Vue components
│   └── Counter.vue
├── layouts/               # Custom layouts
│   └── my-layout.vue
├── pages/                 # Additional slide files
│   └── intro.md
├── public/                # Static assets
│   ├── images/
│   └── favicon.ico
├── styles/                # Global styles
│   └── index.css
├── setup/                 # Setup scripts
│   ├── main.ts           # Vue app setup
│   ├── monaco.ts         # Monaco editor setup
│   └── shiki.ts          # Shiki highlighter setup
├── snippets/              # External code snippets
│   └── example.ts
├── .slidev/               # Generated files (gitignore)
│   └── drawings/         # Persisted drawings
├── vite.config.ts         # Vite configuration
├── uno.config.ts          # UnoCSS configuration
└── netlify.toml           # Deployment config (optional)

my-presentation/
├── slides.md              # 主演示文稿文件
├── package.json           # 项目依赖
├── components/            # 自定义Vue组件
│   └── Counter.vue
├── layouts/               # 自定义布局
│   └── my-layout.vue
├── pages/                 # 额外的幻灯片文件
│   └── intro.md
├── public/                # 静态资源
│   ├── images/
│   └── favicon.ico
├── styles/                # 全局样式
│   └── index.css
├── setup/                 # 配置脚本
│   ├── main.ts           # Vue应用配置
│   ├── monaco.ts         # Monaco编辑器配置
│   └── shiki.ts          # Shiki代码高亮配置
├── snippets/              # 外部代码片段
│   └── example.ts
├── .slidev/               # 生成文件（需加入gitignore）
│   └── drawings/         # 持久化绘图内容
├── vite.config.ts         # Vite配置
├── uno.config.ts          # UnoCSS配置
└── netlify.toml           # 部署配置（可选）

Core Files

核心文件

slides.md

The main presentation file containing all slides:

markdown

---
theme: seriph
title: My Presentation
---

包含所有幻灯片的主演示文稿文件：

markdown

---
theme: seriph
title: My Presentation
---

Slide 1

幻灯片1

Slide 2

幻灯片2

undefined

undefined

package.json

Essential scripts and dependencies:

json

{
  "name": "my-presentation",
  "private": true,
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  },
  "dependencies": {
    "@slidev/cli": "^0.50.0",
    "@slidev/theme-seriph": "^0.25.0"
  }
}

必备的脚本与依赖：

json

{
  "name": "my-presentation",
  "private": true,
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  },
  "dependencies": {
    "@slidev/cli": "^0.50.0",
    "@slidev/theme-seriph": "^0.25.0"
  }
}

Global Configuration

全局配置

Headmatter (First Slide)

首幻灯片前置元数据（Headmatter）

The first slide's frontmatter configures the entire presentation:

yaml

---

首幻灯片的前置元数据用于配置整个演示文稿：

yaml

---

Theme

主题

theme: seriph addons:

slidev-addon-excalidraw

theme: seriph addons:

slidev-addon-excalidraw

Metadata

元数据

title: My Presentation titleTemplate: '%s - Slidev' info: |

Slidev Starter Template

Presentation slides for developers.

title: 我的演示文稿 titleTemplate: '%s - Slidev' info: |

Slidev 起始模板

面向开发者的演示文稿幻灯片。

Appearance

外观

colorSchema: auto aspectRatio: 16/9 canvasWidth: 980 themeConfig: primary: '#5d8392'

Code

代码相关

highlighter: shiki lineNumbers: true monaco: true

Features

功能特性

drawings: enabled: true persist: true presenterOnly: false syncAll: true selectable: true record: true

Navigation

Export

导出设置

exportFilename: my-presentation download: true

Layout

布局

layout: cover background: /cover.jpg class: text-center

undefined

layout: cover background: /cover.jpg class: text-center

undefined

Directory Conventions

目录规范

components/

Custom Vue components auto-imported into slides:

vue

<!-- components/Counter.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div class="flex items-center gap-4">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

Use in slides:

markdown

undefined

自定义Vue组件会被自动导入到幻灯片中：

vue

<!-- components/Counter.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div class="flex items-center gap-4">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

在幻灯片中使用：

markdown

undefined

Interactive Counter

交互式计数器

<Counter /> ```

layouts/

Custom layouts extend built-in ones:

vue

<!-- layouts/my-intro.vue -->
<template>
  <div class="slidev-layout my-intro">
    <div class="header">
      <slot name="header" />
    </div>
    <div class="main">
      <slot />
    </div>
    <div class="footer">
      <slot name="footer">
        <span>My Company</span>
      </slot>
    </div>
  </div>
</template>

<style scoped>
.my-intro {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 2rem;
}
</style>

Use in slides:

markdown

---
layout: my-intro
---

::header::

自定义布局可扩展内置布局：

vue

<!-- layouts/my-intro.vue -->
<template>
  <div class="slidev-layout my-intro">
    <div class="header">
      <slot name="header" />
    </div>
    <div class="main">
      <slot />
    </div>
    <div class="footer">
      <slot name="footer">
        <span>我的公司</span>
      </slot>
    </div>
  </div>
</template>

<style scoped>
.my-intro {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 2rem;
}
</style>

在幻灯片中使用：

markdown

---
layout: my-intro
---

::header::

Welcome

欢迎

::default:: Main content here

::footer:: Custom footer

undefined

::default:: 主内容区域

::footer:: 自定义页脚

undefined

public/

Static assets served at root URL:

public/
├── images/
│   ├── logo.png        # Use: /images/logo.png
│   └── diagram.svg
├── favicon.ico         # Use: /favicon.ico
└── data.json           # Use: /data.json

静态资源会在根URL下提供访问：

public/
├── images/
│   ├── logo.png        # 使用方式：/images/logo.png
│   └── diagram.svg
├── favicon.ico         # 使用方式：/favicon.ico
└── data.json           # 使用方式：/data.json

styles/

Global styles applied to all slides:

css

/* styles/index.css */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root {
  --slidev-theme-primary: #3b82f6;
}

.slidev-layout {
  font-family: 'Inter', sans-serif;
}

/* Custom utility classes */
.highlight {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  padding: 0 0.25em;
}

全局样式会应用到所有幻灯片：

css

/* styles/index.css */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

:root {
  --slidev-theme-primary: #3b82f6;
}

.slidev-layout {
  font-family: 'Inter', sans-serif;
}

/* 自定义工具类 */
.highlight {
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  padding: 0 0.25em;
}

setup/

Configuration scripts:

typescript

// setup/main.ts - Vue app configuration
import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => {
  // Register global components
  // Configure plugins
})

typescript

// setup/shiki.ts - Code highlighter
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'vitesse-dark',
      light: 'vitesse-light',
    },
  }
})

typescript

// setup/monaco.ts - Monaco editor
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => {
  return {
    editorOptions: {
      fontSize: 14,
      minimap: { enabled: false },
    },
  }
})

配置脚本：

typescript

// setup/main.ts - Vue应用配置
import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => {
  // 注册全局组件
  // 配置插件
})

typescript

// setup/shiki.ts - 代码高亮配置
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'vitesse-dark',
      light: 'vitesse-light',
    },
  }
})

typescript

// setup/monaco.ts - Monaco编辑器配置
import { defineMonacoSetup } from '@slidev/types'

export default defineMonacoSetup(() => {
  return {
    editorOptions: {
      fontSize: 14,
      minimap: { enabled: false },
    },
  }
})

pages/

Additional slide files for modular presentations:

markdown

<!-- pages/intro.md -->

用于模块化演示文稿的额外幻灯片文件：

markdown

<!-- pages/intro.md -->

Introduction Section

介绍部分

About Me

关于我

Agenda

议程


Import in main file:

```markdown
---
src: ./pages/intro.md
---

---


在主文件中导入：

```markdown
---
src: ./pages/intro.md
---

---

Main Content

主内容

src: ./pages/conclusion.md

undefined

src: ./pages/conclusion.md

undefined

Vite Configuration

Vite配置

typescript

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  slidev: {
    vue: {
      // Vue plugin options
    },
  },
  // Standard Vite options
  server: {
    port: 3030,
  },
})

typescript

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  slidev: {
    vue: {
      // Vue插件选项
    },
  },
  // 标准Vite选项
  server: {
    port: 3030,
  },
})

UnoCSS Configuration

UnoCSS配置

typescript

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'bg-main': 'bg-white dark:bg-slate-900',
    'text-main': 'text-slate-900 dark:text-slate-100',
  },
  theme: {
    colors: {
      primary: '#3b82f6',
    },
  },
})

typescript

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  shortcuts: {
    'bg-main': 'bg-white dark:bg-slate-900',
    'text-main': 'text-slate-900 dark:text-slate-100',
  },
  theme: {
    colors: {
      primary: '#3b82f6',
    },
  },
})

Theme Configuration

主题配置

Using a Theme

使用主题

yaml

---
theme: seriph
themeConfig:
  primary: '#5d8392'
  secondary: '#8b5cf6'
---

yaml

---
theme: seriph
themeConfig:
  primary: '#5d8392'
  secondary: '#8b5cf6'
---

Ejecting a Theme

导出主题代码

To customize a theme's source code:

bash

slidev theme eject

This copies the theme to your project for full customization.

如需自定义主题的源代码，执行：

bash

slidev theme eject

该命令会将主题代码复制到你的项目中，以便进行完全自定义。

Multi-File Presentations

多文件演示文稿

Importing Slides

导入幻灯片

markdown

---
src: ./pages/section1.md
---

---
src: ./pages/section2.md
---

markdown

---
src: ./pages/section1.md
---

---
src: ./pages/section2.md
---

With Frontmatter Merging

合并前置元数据

markdown

---
src: ./pages/intro.md
title: Overridden Title
class: custom-class
---

markdown

---
src: ./pages/intro.md
title: 重写后的标题
class: custom-class
---

Generated Files (.slidev/)

生成文件（.slidev/）

The

.slidev/

directory contains:

```
drawings/
```
- Persisted drawings
Other generated assets

Add to

.gitignore

gitignore

.slidev
node_modules
dist

.slidev/目录包含：

```
drawings/
```
- 持久化的绘图内容
其他生成的资源

将其加入.gitignore：

gitignore

.slidev
node_modules
dist

Best Practices

最佳实践

Keep slides.md focused: Use
```
src
```
imports for large presentations
Organize assets: Use
```
public/images/
```
for all images
Reuse components: Create components for repeated patterns
Version control: Commit all source files except
```
.slidev/
```
and
```
dist/
```
Document custom layouts: Add comments explaining slot usage

保持slides.md简洁：对于大型演示文稿，使用
```
src
```
导入方式
整理资源：所有图片放入
```
public/images/
```
目录
复用组件：为重复出现的样式创建组件
版本控制：提交所有源文件，排除
```
.slidev/
```
和
```
dist/
```
文档化自定义布局：添加注释说明插槽的使用方式

Output Format

输出格式

When explaining project structure, provide:

RECOMMENDED STRUCTURE:
├── slides.md           # Main file
├── components/         # Custom Vue components
├── layouts/           # Custom layouts
├── public/            # Static assets
├── styles/            # Global CSS
└── package.json       # Dependencies

KEY CONFIGURATION:
- Theme: [theme name]
- Addons: [list of addons]
- Custom components: [component names]
- Custom layouts: [layout names]

FILES TO CREATE:
1. [filename] - [purpose]
2. [filename] - [purpose]

GITIGNORE:
.slidev/
node_modules/
dist/

当解释项目结构时，需提供：

推荐结构:
├── slides.md           # 主文件
├── components/         # 自定义Vue组件
├── layouts/           # 自定义布局
├── public/            # 静态资源
├── styles/            # 全局CSS
└── package.json       # 依赖文件

关键配置:
- 主题: [主题名称]
- 插件: [插件列表]
- 自定义组件: [组件名称]
- 自定义布局: [布局名称]

需创建的文件:
1. [文件名] - [用途]
2. [文件名] - [用途]

Git忽略配置:
.slidev/
node_modules/
dist/

slidev-project-structure

Original

Translation

Slidev Project Structure

Slidev 项目结构

When to Use This Skill

何时使用本技能

Standard Project Structure

标准项目结构

Core Files

核心文件

slides.md

slides.md

Slide 1

幻灯片1

Slide 2

幻灯片2

package.json

package.json

Global Configuration

全局配置

Headmatter (First Slide)

首幻灯片前置元数据（Headmatter）

Theme

主题

Metadata

元数据

Slidev Starter Template

Slidev 起始模板

Appearance

外观

Code

代码相关

Features

功能特性

Navigation

导航

Export

导出设置

Layout

布局

layout: cover background: /cover.jpg class: text-center

layout: cover background: /cover.jpg class: text-center

Directory Conventions

目录规范

components/

components/

Interactive Counter

交互式计数器

layouts/

layouts/

Welcome

欢迎

public/

public/

styles/

styles/

setup/

setup/

pages/

pages/

Introduction Section

介绍部分

About Me

关于我

Agenda

议程

Main Content

主内容

src: ./pages/conclusion.md

src: ./pages/conclusion.md

Vite Configuration

Vite配置

UnoCSS Configuration

UnoCSS配置

Theme Configuration

主题配置

Using a Theme

使用主题

Ejecting a Theme