文档驱动
useContent()
useContent() 可组合函数可访问当前页面、周围页面和全局数据。
启用文档驱动模式后，useContent() 可在应用中的任何位置使用，并可访问基于您内容的 ref 列表。
<script setup lang="ts">
const {
// Global references
globals,
navigation,
surround,
page,
// Computed properties from `page` key
excerpt,
toc,
type,
layout,
// Computed properties from `surround` key
next,
prev
} = useContent()
</script>
渲染页面
使用此可组合函数渲染当前页面变得轻松愉快
pages/[...slug].vue
<script setup lang="ts">
const { page } = useContent()
</script>
<template>
<ContentRenderer :key="page._id" :value="page" />
</template>
前一个/下一个页面组件
PagePrevNext.vue
<script setup lang="ts">
const { prev, next } = useContent()
</script>
<template>
<div>
<NuxtLink v-if="prev" :to="prev._path">{{ prev.title }}</NuxtLink>
<NuxtLink v-if="next" :to="next._path">{{ next.title }}</NuxtLink>
</div>
</template>
目录组件
PageToc.vue
<script setup lang="ts">
const { toc } = useContent()
</script>
<template>
<div>
<ul v-if="toc && toc.links">
<li v-for="link in toc.links" :key="link.text">
<a :href="`#${link.id}`">
{{ link.text }}
</a>
</li>
</ul>
</div>
</template>