ContentSurround专业版

GitHub
一对用于在页面之间导航的上一个和下一个链接。
此组件仅在安装了 @nuxt/content 模块时可用。

用法

使用 surround 属性，其值是您在获取页面 surround 时获得的值。

ContentSearchButton

一个预设样式的按钮，用于打开 ContentSearch 模态框。

ContentToc

一个带有自动活动锚点链接高亮的固定目录。

<script setup lang="ts">
const route = useRoute()

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description']
  })
})
</script>

<template>
  <UContentSurround :surround="(surround as any)" />
</template>

上一个 / 下一个

使用 prev-icon 和 next-icon 属性来自定义按钮的图标。

ContentSearchButton

一个预设样式的按钮，用于打开 ContentSearch 模态框。

ContentToc

一个带有可自定义插槽的固定目录。

<script setup lang="ts">
const surround = ref([
  {
    title: 'ContentSearchButton',
    path: '/components/content-search-button',
    stem: '3.components/content-search-button',
    description: 'A pre-styled Button to open the ContentSearch modal.'
  },
  {
    title: 'ContentToc',
    path: '/components/content-toc',
    stem: '3.components/content-toc',
    description: 'A sticky Table of Contents with customizable slots.'
  }
])
</script>

<template>
  <UContentSurround
    prev-icon="i-lucide-chevron-left"
    next-icon="i-lucide-chevron-right"
    :surround="surround"
  />
</template>

示例

在页面中

在页面中使用 ContentSurround 组件来显示上一个和下一个链接

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}
</script>

<template>
  <UPage v-if="page">
    <UPageHeader :title="page.title" />

    <UPageBody>
      <ContentRenderer v-if="page.body" :value="page" />

      <USeparator v-if="surround?.filter(Boolean).length" />

      <UContentSurround :surround="(surround as any)" />
    </UPageBody>

    <template v-if="page?.body?.toc?.links?.length" #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染成的元素或组件。

prevIcon

appConfig.ui.icons.arrowLeft

string

上一个链接中显示的图标。

nextIcon

appConfig.ui.icons.arrowRight

string

下一个链接中显示的图标。

surround

ContentSurroundLink[]

ui

{ root?: ClassNameValue; link?: ClassNameValue; linkLeading?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkTitle?: ClassNameValue; linkDescription?: ClassNameValue; }

插槽

插槽类型
link

{ link: ContentSurroundLink; }

link-leading

{ link: ContentSurroundLink; }

link-title

{ link: ContentSurroundLink; }

link-description

{ link: ContentSurroundLink; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    contentSurround: {
      slots: {
        root: 'grid grid-cols-1 sm:grid-cols-2 gap-8',
        link: [
          'group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary',
          'transition-colors'
        ],
        linkLeading: [
          'inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50',
          'transition'
        ],
        linkLeadingIcon: [
          'size-5 shrink-0 text-highlighted group-hover:text-primary',
          'transition-[color,translate]'
        ],
        linkTitle: 'font-medium text-[15px] text-highlighted mb-1 truncate',
        linkDescription: 'text-sm text-muted line-clamp-2'
      },
      variants: {
        direction: {
          left: {
            linkLeadingIcon: [
              'group-active:-translate-x-0.5'
            ]
          },
          right: {
            link: 'text-right',
            linkLeadingIcon: [
              'group-active:translate-x-0.5'
            ]
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        contentSurround: {
          slots: {
            root: 'grid grid-cols-1 sm:grid-cols-2 gap-8',
            link: [
              'group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary',
              'transition-colors'
            ],
            linkLeading: [
              'inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50',
              'transition'
            ],
            linkLeadingIcon: [
              'size-5 shrink-0 text-highlighted group-hover:text-primary',
              'transition-[color,translate]'
            ],
            linkTitle: 'font-medium text-[15px] text-highlighted mb-1 truncate',
            linkDescription: 'text-sm text-muted line-clamp-2'
          },
          variants: {
            direction: {
              left: {
                linkLeadingIcon: [
                  'group-active:-translate-x-0.5'
                ]
              },
              right: {
                link: 'text-right',
                linkLeadingIcon: [
                  'group-active:translate-x-0.5'
                ]
              }
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        contentSurround: {
          slots: {
            root: 'grid grid-cols-1 sm:grid-cols-2 gap-8',
            link: [
              'group block px-6 py-8 rounded-lg border border-default hover:bg-elevated/50 focus-visible:outline-primary',
              'transition-colors'
            ],
            linkLeading: [
              'inline-flex items-center rounded-full p-1.5 bg-elevated group-hover:bg-primary/10 ring ring-accented mb-4 group-hover:ring-primary/50',
              'transition'
            ],
            linkLeadingIcon: [
              'size-5 shrink-0 text-highlighted group-hover:text-primary',
              'transition-[color,translate]'
            ],
            linkTitle: 'font-medium text-[15px] text-highlighted mb-1 truncate',
            linkDescription: 'text-sm text-muted line-clamp-2'
          },
          variants: {
            direction: {
              left: {
                linkLeadingIcon: [
                  'group-active:-translate-x-0.5'
                ]
              },
              right: {
                link: 'text-right',
                linkLeadingIcon: [
                  'group-active:translate-x-0.5'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

ContentSearchButton

一个预设样式的按钮，用于打开 ContentSearch 模态框。

ContentToc

一个带有自动活动锚点链接高亮的固定目录。