ContentSurround
一对用于在页面之间导航的上一页和下一页链接。
用法
<script setup lang="ts">
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
return queryContent()
.where({ _extension: 'md', navigation: { $ne: false } })
.only(['title', 'description', '_path'])
.findSurround(withoutTrailingSlash(route.path))
}, { default: () => [] })
</script>
<template>
<UContentSurround :surround="surround" />
</template>
您通常会在 [...slug].vue 页面中使用此组件
pages/[...slug].vue
<script setup lang="ts">
import { withoutTrailingSlash } from 'ufo'
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
return queryContent()
.where({ _extension: 'md', navigation: { $ne: false } })
.only(['title', 'description', '_path'])
.findSurround(withoutTrailingSlash(route.path))
}, { default: () => [] })
</script>
<template>
<UPage>
<UPageHeader :title="page.title" :description="page.description" :links="page.links" />
<UPageBody prose>
<ContentRenderer v-if="page.body" :value="page" />
<hr v-if="surround?.length">
<UContentSurround :surround="surround" />
</UPageBody>
<template v-if="page.body?.toc?.links?.length" #right>
<UContentToc :links="page.body.toc.links" />
</template>
</UPage>
</template>
属性
ui
Partial<{ wrapper: string; icon: { prev: string; next: string; }; link: {}; }>
{}surround
Pick<ParsedContent, string>[]
[]配置
{
wrapper: 'grid gap-8 sm:grid-cols-2',
icon: {
prev: 'i-heroicons-arrow-left-20-solid',
next: 'i-heroicons-arrow-right-20-solid'
},
link: {}
}