全局上下文

Slidev 注入了一些全局上下文。它们可用于高级导航控制。

直接使用

你可以直接在你的幻灯片或组件中访问它们：

<!-- slides.md -->

# Page 1

当前正在查看第 {{ $nav.currentPage }} 页

<!-- Foo.vue -->

<template>
  <div>Title: {{ $slidev.configs.title }}</div>
  <button @click="$nav.next">
    下一步动画
  </button>
  <button @click="$nav.nextSlide">
    下一张幻灯片
  </button>
</template>

通过 Composable 使用

自 v0.48.0 起可用

如果你想以编程方式获取上下文（也是类型安全的），你可以从 @slidev/client 导入 composable：

<script setup>
import { onSlideEnter, onSlideLeave, useDarkMode, useIsSlideActive, useNav, useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const { currentPage, currentLayout, currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
const isActive = useIsSlideActive()
onSlideEnter(() => { /* ... */ })
onSlideLeave(() => { /* ... */ })
// ...
</script>

NOTE

之前，你可能看到过导入嵌套模块的用法，例如 import { isDark } from '@slidev/client/logic/dark.ts'，这是不推荐的，因为它们是内部实现细节，可能会在未来更改。如果可能的话，请始终使用 @slidev/client 中的公共 API。

WARNING

当使用 useSlideContext 时，将禁用自动注入 $slidev。你需要手动将 $slidev 对象传递给 useSlideContext 函数。

了解更多:

✨ 幻灯片钩子

注入的属性

$slidev

全局上下文对象。

$frontmatter

当前幻灯片的 frontmatter 对象。注意这对于幻灯片之外的组件（如 ✨ 全局图层）是空的。

$clicks

该属性表示当前幻灯片上的点击次数。可以用于根据点击次数显示不同的内容：

<div v-if="$clicks > 3">Content</div>

参阅 📖 动画 了解更多关于点击动画的信息。

$nav

一个响应式对象，包含幻灯片导航的属性和控制：

$nav.next() // 下一步动画
$nav.nextSlide() // 下一张幻灯片，跳过动画
$nav.go(10) // 跳转到第 10 页

$nav.currentPage // 当前页码
$nav.currentLayout // 当前幻灯片的布局

请参阅 SlidevContextNav interface 以了解更多细节。

$page

$page 保存当前页的页码，从 1 开始。

这是第 {{ $page }} 页

正在查看该页吗? {{ $page === $nav.currentPage }}

NOTE

$nav.clicks 是全局导航状态，而 $clicks 是每张幻灯片的自己的点击次数。

$renderContext

$renderContext 保存当前的渲染上下文，可以是 slide, overview, presenter 或 previewNext。

<div v-if="['slide', 'presenter'].includes($renderContext)">
  该内容仅在主幻灯片视图中呈现
</div>

你还可以使用 <RenderWhen> 组件。

$slidev.configs

一个响应式对象，保存幻灯片项目的配置。例如：

---
title: My First Slidev!
---

# 第一页

---

# 其他任何页面

{{ $slidev.configs.title }} // 'My First Slidev!'

$slidev.themeConfigs

一个响应式对象，保存解析后的主题配置：

---
title: My First Slidev!
themeConfig:
  primary: '#213435'
---

然后，主题可以像这样访问主要颜色：

{{ $slidev.themeConfigs.primary }} // '#213435'

类型支持

可以从 @slidev/types 导入 TocItem 等类型信息：

<script setup>
import type { TocItem } from '@slidev/types'

function tocFunc(tree: TocItem[]): TocItem[] {
  // ...
}
</script>