slidev-navigation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Navigation

Slidev 导航

This skill covers all navigation features in Slidev, including keyboard shortcuts, navigation bar, overview mode, and customizing navigation behavior.

本文涵盖Slidev的所有导航功能，包括键盘快捷键、导航栏、概览模式以及导航行为定制。

When to Use This Skill

适用场景

Learning navigation controls
Customizing keyboard shortcuts
Setting up presentation navigation
Configuring navigation bar
Creating custom navigation components

学习导航控制
自定义键盘快捷键
设置演示文稿导航
配置导航栏
创建自定义导航组件

Default Keyboard Shortcuts

默认键盘快捷键

Basic Navigation

基础导航

Key	Action
`Space`	Next animation or slide
`→` / `Right`	Next animation or slide
`←` / `Left`	Previous animation or slide
`↑` / `Up`	Previous slide (skip animations)
`↓` / `Down`	Next slide (skip animations)

按键	操作
`Space`	下一个动画或幻灯片
`→` / `Right`	下一个动画或幻灯片
`←` / `Left`	上一个动画或幻灯片
`↑` / `Up`	上一张幻灯片（跳过动画）
`↓` / `Down`	下一张幻灯片（跳过动画）

Mode Toggles

模式切换

Key	Action
`o`	Toggle overview mode
`d`	Toggle dark mode
`f`	Toggle fullscreen
`p`	Toggle presenter mode

按键	操作
`o`	切换概览模式
`d`	切换深色模式
`f`	切换全屏模式
`p`	切换演示者模式

Navigation Jumps

导航跳转

Key	Action
`g`	Go to specific slide
`Home`	Go to first slide
`End`	Go to last slide

按键	操作
`g`	跳转到指定幻灯片
`Home`	跳转到第一张幻灯片
`End`	跳转到最后一张幻灯片

Other Controls

其他控制

Key	Action
`Esc`	Exit fullscreen/overview/drawing
`e`	Toggle drawing mode
`r`	Toggle recording

按键	操作
`Esc`	退出全屏/概览/绘图模式
`e`	切换绘图模式
`r`	切换录制状态

Navigation Bar

导航栏

Location

位置

Bottom-left corner of the slide (appears on hover).

幻灯片左下角（hover时显示）。

Available Buttons

可用按钮

Home: Go to first slide
Previous: Previous slide/animation
Current/Total: Click to open go-to dialog
Next: Next slide/animation
Presenter: Open presenter mode
Camera: Toggle camera view
Record: Start/stop recording
Drawing: Toggle drawing mode
Overview: Open slide overview
Dark Mode: Toggle dark/light
Fullscreen: Toggle fullscreen
Export: Export options
Info: Presentation info

首页：跳转到第一张幻灯片
上一页：上一个动画或幻灯片
当前/总数：点击打开跳转对话框
下一页：下一个动画或幻灯片
演示者：打开演示者模式
摄像头：切换摄像头视图
录制：开始/停止录制
绘图：切换绘图模式
概览：打开幻灯片概览
深色模式：切换深色/浅色模式
全屏：切换全屏模式
导出：导出选项
信息：演示文稿信息

Overview Mode

概览模式

Accessing

进入方式

Press
```
o
```
key
Click overview button in navigation bar
Navigate to
```
/overview
```
URL

按下
```
o
```
键
点击导航栏中的概览按钮
导航到
```
/overview
```
地址

Features

功能

Grid view of all slides
Click any slide to navigate
Keyboard navigation within overview
Search slides (if implemented)

所有幻灯片的网格视图
点击任意幻灯片进行导航
概览内支持键盘导航
幻灯片搜索（若已实现）

Overview Navigation

概览内导航

Key	Action
`←` `→` `↑` `↓`	Navigate grid
`Enter`	Select slide
`Esc` / `o`	Close overview

按键	操作
`←` `→` `↑` `↓`	导航网格
`Enter`	选择幻灯片
`Esc` / `o`	关闭概览

Go-To Dialog

跳转对话框

Opening

打开方式

Press
```
g
```
key
Click slide number in navigation bar

按下
```
g
```
键
点击导航栏中的幻灯片编号

Usage

使用方法

Dialog opens
Type slide number
Press Enter

打开对话框
输入幻灯片编号
按下回车

Quick Jump

快速跳转

g → 15 → Enter

Goes directly to slide 15.

g → 15 → Enter

直接跳转到第15张幻灯片。

Customizing Shortcuts

自定义快捷键

Configuration File

配置文件

Create

setup/shortcuts.ts

typescript

import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // Keep default shortcuts
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
    {
      key: 'ctrl+f',
      fn: () => nav.go(1),
    },
  ]
})

创建

setup/shortcuts.ts

：

typescript

import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // 保留默认快捷键
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
    {
      key: 'ctrl+f',
      fn: () => nav.go(1),
    },
  ]
})

Shortcut Properties

快捷键属性

Property	Type	Description
`key`	string	Key combination
`fn`	function	Action to perform
`autoRepeat`	boolean	Repeat when held

属性	类型	描述
`key`	string	按键组合
`fn`	function	执行的操作
`autoRepeat`	boolean	长按是否重复触发

Key Syntax

按键语法

typescript

// Single key
{ key: 'enter', fn: () => {} }

// Modifier + key
{ key: 'ctrl+s', fn: () => {} }

// Multiple modifiers
{ key: 'ctrl+shift+s', fn: () => {} }

typescript

// 单个按键
{ key: 'enter', fn: () => {} }

// 修饰符 + 按键
{ key: 'ctrl+s', fn: () => {} }

// 多个修饰符
{ key: 'ctrl+shift+s', fn: () => {} }

Available Modifiers

可用修饰符

```
ctrl
```
```
shift
```
```
alt
```
```
meta
```
(Cmd on Mac)

```
ctrl
```
```
shift
```
```
alt
```
```
meta
```
（Mac上的Cmd键）

Navigation API

导航API

In Components

在组件中使用

vue

<script setup>
import { useNav } from '@slidev/client'

const {
  currentSlideNo,  // Current slide number (ref)
  currentPage,     // Current page number
  total,           // Total slides
  clicks,          // Current click count
  next,            // Go to next
  prev,            // Go to previous
  go,              // Go to slide number
  nextSlide,       // Next slide (skip animations)
  prevSlide,       // Previous slide (skip animations)
} = useNav()
</script>

vue

<script setup>
import { useNav } from '@slidev/client'

const {
  currentSlideNo,  // 当前幻灯片编号（响应式变量）
  currentPage,     // 当前页码
  total,           // 总幻灯片数
  clicks,          // 当前点击次数
  next,            // 跳转到下一个
  prev,            // 跳转到上一个
  go,              // 跳转到指定幻灯片编号
  nextSlide,       // 跳转到下一张幻灯片（跳过动画）
  prevSlide,       // 跳转到上一张幻灯片（跳过动画）
} = useNav()
</script>

Navigation Functions

导航函数示例

vue

<template>
  <!-- Custom navigation buttons -->
  <button @click="nav.prev()">Previous</button>
  <button @click="nav.next()">Next</button>
  <button @click="nav.go(1)">Go to Start</button>
  <button @click="nav.go(total.value)">Go to End</button>
</template>

<script setup>
import { useNav } from '@slidev/client'
const nav = useNav()
</script>

vue

<template>
  <!-- 自定义导航按钮 -->
  <button @click="nav.prev()">上一页</button>
  <button @click="nav.next()">下一页</button>
  <button @click="nav.go(1)">跳转到开头</button>
  <button @click="nav.go(total.value)">跳转到结尾</button>
</template>

<script setup>
import { useNav } from '@slidev/client'
const nav = useNav()
</script>

Custom Navigation Components

自定义导航组件

Slide Progress Bar

幻灯片进度条

vue

<!-- components/ProgressBar.vue -->
<script setup>
import { computed } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo, total } = useNav()
const progress = computed(() =>
  (currentSlideNo.value / total.value) * 100
)
</script>

<template>
  <div class="fixed top-0 left-0 right-0 h-1 bg-gray-200">
    <div
      class="h-full bg-blue-500 transition-all"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

vue

<!-- components/ProgressBar.vue -->
<script setup>
import { computed } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo, total } = useNav()
const progress = computed(() =>
  (currentSlideNo.value / total.value) * 100
)
</script>

<template>
  <div class="fixed top-0 left-0 right-0 h-1 bg-gray-200">
    <div
      class="h-full bg-blue-500 transition-all"
      :style="{ width: `${progress}%` }"
    />
  </div>
</template>

Custom Page Number

自定义页码

vue

<!-- components/PageNumber.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 right-4 text-sm">
    {{ currentSlideNo }} / {{ total }}
  </div>
</template>

vue

<!-- components/PageNumber.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 right-4 text-sm">
    {{ currentSlideNo }} / {{ total }}
  </div>
</template>

Navigation Buttons

导航按钮

vue

<!-- components/NavButtons.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { prev, next, currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 flex gap-2">
    <button
      @click="prev()"
      :disabled="currentSlideNo === 1"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      Previous
    </button>
    <button
      @click="next()"
      :disabled="currentSlideNo === total"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      Next
    </button>
  </div>
</template>

vue

<!-- components/NavButtons.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { prev, next, currentSlideNo, total } = useNav()
</script>

<template>
  <div class="fixed bottom-4 flex gap-2">
    <button
      @click="prev()"
      :disabled="currentSlideNo === 1"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      上一页
    </button>
    <button
      @click="next()"
      :disabled="currentSlideNo === total"
      class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
    >
      下一页
    </button>
  </div>
</template>

Touch Navigation

触摸导航

Default Behavior

默认行为

Swipe left: Next slide
Swipe right: Previous slide

向左滑动：下一张幻灯片
向右滑动：上一张幻灯片

Touch Areas

触摸区域

Screen is divided into:

Left third: Previous
Right two-thirds: Next

屏幕分为：

左侧三分之一区域：上一张
右侧三分之二区域：下一张

Mouse Navigation

鼠标导航

Click Areas

点击区域

Left side of slide: Previous
Right side of slide: Next

幻灯片左侧：上一张
幻灯片右侧：下一张

Disable Click Navigation

禁用点击导航

yaml

---

yaml

---

In frontmatter

在 frontmatter 中配置


Custom CSS to disable:
```css
.slidev-page {
  pointer-events: none;
}


使用自定义CSS禁用：
```css
.slidev-page {
  pointer-events: none;
}

URL Navigation

URL导航

Direct Slide Access

直接访问幻灯片

http://localhost:3030/5      # Slide 5
http://localhost:3030/10     # Slide 10

http://localhost:3030/5      # 第5张幻灯片
http://localhost:3030/10     # 第10张幻灯片

Presenter Mode

演示者模式

http://localhost:3030/presenter
http://localhost:3030/presenter/5  # Presenter at slide 5

http://localhost:3030/presenter
http://localhost:3030/presenter/5  # 从第5张幻灯片进入演示者模式

Overview Mode

概览模式

http://localhost:3030/overview

http://localhost:3030/overview

Slide Numbering

幻灯片编号

Default Numbering

默认编号

Slides numbered 1 to N based on order.

幻灯片按顺序从1到N编号。

Custom Slide IDs

自定义幻灯片ID

yaml

---
routeAlias: introduction
---

Access via:

http://localhost:3030/introduction

yaml

---
routeAlias: introduction
---

通过以下地址访问：

http://localhost:3030/introduction

Link to Slide by ID

通过ID链接到幻灯片

markdown

[Go to Introduction](/introduction)

markdown

[跳转到介绍页](/introduction)

Navigation Events

导航事件

Watch Navigation

监听导航变化

vue

<script setup>
import { watch } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo } = useNav()

watch(currentSlideNo, (newSlide, oldSlide) => {
  console.log(`Navigated from ${oldSlide} to ${newSlide}`)
})
</script>

vue

<script setup>
import { watch } from 'vue'
import { useNav } from '@slidev/client'

const { currentSlideNo } = useNav()

watch(currentSlideNo, (newSlide, oldSlide) => {
  console.log(`从第${oldSlide}张幻灯片导航到第${newSlide}张`)
})
</script>

Best Practices

最佳实践

1. Learn Core Shortcuts

1. 学习核心快捷键

Essential for smooth presenting:

```
Space
```
/
```
→
```
- Forward
```
←
```
- Back
```
o
```
- Overview
```
g
```
- Go to

这些快捷键对流畅演示至关重要：

```
Space
```
/
```
→
```
- 前进
```
←
```
- 后退
```
o
```
- 概览
```
g
```
- 跳转

2. Custom Shortcuts for Your Style

2. 根据使用习惯自定义快捷键

typescript

// If you prefer Enter/Backspace
{
  key: 'enter',
  fn: () => nav.next(),
}

typescript

// 如果你偏好使用Enter/Backspace
{
  key: 'enter',
  fn: () => nav.next(),
}

3. Hide Navigation for Clean Presentations

3. 隐藏导航栏以获得简洁的演示效果

CSS to hide nav bar:

css

.slidev-nav {
  display: none;
}

使用CSS隐藏导航栏：

css

.slidev-nav {
  display: none;
}

4. Add Progress Indicator

4. 添加进度指示器

Global bottom component for progress.

全局底部组件用于显示进度。

5. Practice Navigation

5. 练习导航操作

Before presenting:

Run through all slides
Practice overview jumping
Test any custom shortcuts

演示前：

浏览所有幻灯片
练习概览跳转
测试所有自定义快捷键

Output Format

配置格式

When configuring navigation:

typescript

// setup/shortcuts.ts
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // Keep defaults

    // Custom shortcuts
    { key: '[key]', fn: () => nav.[action]() },
  ]
})

NAVIGATION PLAN:

Forward: [key]
Backward: [key]
Overview: [key]
Jump: [method]

CUSTOM COMPONENTS:

Progress bar: [yes/no]
Page numbers: [yes/no]
Custom buttons: [yes/no]

配置导航时：

typescript

// setup/shortcuts.ts
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav, base) => {
  return [
    ...base, // 保留默认设置

    // 自定义快捷键
    { key: '[key]', fn: () => nav.[action]() },
  ]
})

导航规划：

前进：[按键]
后退：[按键]
概览：[按键]
跳转：[方法]

自定义组件：

进度条：[是/否]
页码：[是/否]
自定义按钮：[是/否]