グローバルコンテキスト

Slidev は高度なナビゲーション制御のためにいくつかのグローバルコンテキスト値を注入します。

直接使用

スライドまたはコンポーネント内で直接アクセスできます。

slides.md

# ページ 1

現在のページは: {{ $nav.currentPage }}

Foo.vue

<template>
  <div>タイトル: {{ $slidev.configs.title }}</div>
  <button @click="$nav.next">
    次のクリック
  </button>
  <button @click="$nav.nextSlide">
    次のスライド
  </button>
</template>

コンポーザブルの使用方法

v0.48.0 以降で利用可能

プログラム的に（また型安全に）コンテキストを取得したい場合は、@slidev/client からコンポーザブルをインポートできます。

<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 を使用してください。

注意

ファイルで useSlideContext コンポーザブルを使用する場合、$slidev の自動注入は無効になります。useSlideContext 関数から $slidev オブジェクトを手動で取得する必要があります。

参照:

✨ スライドフック

プロパティ

$slidev

グローバルコンテキストオブジェクト。

$frontmatter

現在のスライドのフロントマターオブジェクト。✨ グローバルレイヤー のようなスライド外のコンポーネントではこれは空。

$clicks

$clicks は現在のスライド上のクリック数を保持します。クリックに応じて、異なるコンテンツを条件付きで表示するために使用できます。

<div v-if="$clicks > 3">コンテンツ</div>

詳細は 📖 アニメーション ガイドを参照してください。

$nav

スライドナビゲーションのプロパティとコントロールを保持するリアクティブオブジェクト。例えば:

$nav.next() // 次のステップに進む
$nav.nextSlide() // 次のスライドに進む (クリックをスキップ)
$nav.go(10) // スライド #10 に進む

$nav.currentPage // 現在のスライド番号
$nav.currentLayout // 現在のレイアウト名

利用可能なその他のプロパティについては、SlidevContextNav インターフェース を参照してください。

$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: 初めての Slidev!
---

# ページ 1

---

# 任意のページ

{{ $slidev.configs.title }} // '初めての Slidev!'

$slidev.themeConfigs

解析されたテーマ設定を保持するリアクティブオブジェクト:

---
title: 初めての 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>