Lzh on GitHub

queryCollectionItemSurroundings

queryCollectionItemSurroundings composable 用于查找特定路径的同级内容。

类型

function queryCollectionItemSurroundings<T extends keyof PageCollections>(
  collection: T,
  path: string,
  opts?: SurroundOptions<keyof PageCollections[T]>
): ChainablePromise<T, ContentNavigationItem[]>

interface ChainablePromise<T extends keyof PageCollections, R> extends Promise<R> {
  where(field: keyof PageCollections[T] | string, operator: SQLOperator, value?: unknown): ChainablePromise<T, R>
  andWhere(groupFactory: QueryGroupFunction<PageCollections[T]>): ChainablePromise<T, R>
  orWhere(groupFactory: QueryGroupFunction<PageCollections[T]>): ChainablePromise<T, R>
  order(field: keyof PageCollections[T], direction: 'ASC' | 'DESC'): ChainablePromise<T, R>
}

用法

使用自动导入的 queryCollectionItemSurroundings 来查找集合中相对于特定内容项的前后项。这对于创建相关内容页面之间的导航特别有用。

该函数返回一个可链式调用的 Promise，允许你添加额外的查询条件：

pages/[...slug].vue
<script setup lang="ts">
const { data } = await useAsyncData('surround', () => {
  return queryCollectionItemSurroundings('docs', '/foo')
    .where('published', '=', true)
    .order('date', 'DESC')
})
</script>
queryCollectionItemSurroundings 实用工具在 Vue 和 Nitro 中都可用。查看 服务器端用法 以获取有关如何在服务器端使用它的更多详细信息。

API

queryCollectionItemSurroundings(collection: CollectionName, path: string, opts?: SurroundOptions)

查找集合中特定内容项的周围项（前一项和后一项）。

  • Parameters:
    • collection: 在 content.config.ts 中定义的集合的键。
    • path: 当前内容项的路径。
    • opts: (可选) 包含以下属性的对象：
      • before: (可选) 要获取的当前项之前的项数。默认为 1。
      • after: (可选) 要获取的当前项之后的项数。默认为 1。
      • fields: (可选) 要包含在周围项中的附加字段的数组。
  • Returns: 一个可链式调用的 Promise，它解析为包含周围项的数组。该 Promise 包含用于添加查询条件的方法：
    • where(field, operator, value): 添加 WHERE 条件
    • andWhere(groupFactory): 添加分组的 AND 条件
    • orWhere(groupFactory): 添加分组的 OR 条件
    • order(field, direction): 添加 ORDER BY 子句

最终结果将是一个具有以下结构的数组：

  • [previousItem, nextItem] 如果使用默认选项
  • [...previousItems, ...nextItems] 如果使用自定义 before 和 after 值

数组中的每个项都是 ContentNavigationItem 类型，如果该位置没有项，则为 null。

示例

不带附加查询条件的基本用法：

pages/[...slug].vue
<script setup lang="ts">
const { data } = await useAsyncData('surround', () => {
  return queryCollectionItemSurroundings('docs', '/foo')
})
</script>

<template>
  <div class="flex justify-between">
    <NuxtLink v-if="data?.[0]" :to="data[0].path">
      ← {{ data[0].title }}
    </NuxtLink>
    <NuxtLink v-if="data?.[1]" :to="data[1].path">
      {{ data[1].title }} →
    </NuxtLink>
  </div>
</template>

带有附加查询条件的示例：

pages/[...slug].vue
<script setup lang="ts">
const { data } = await useAsyncData('surround', () => {
  return queryCollectionItemSurroundings('docs', '/foo', {
    before: 1,
    after: 1,
    fields: ['badge', 'description']
  })
    .where('_draft', '=', false)
    .where('_partial', '=', false)
    .order('date', 'DESC')
})
</script>

服务器端用法

Nuxt Content 提供了一个类似的实用程序，用于在服务器端查询集合。唯一的区别是你需要将 event 作为第一个参数传递给 queryCollectionItemSurroundings 函数。

server/api/surroundings.ts
export default eventHandler(async (event) => {
  const surroundings = await queryCollectionItemSurroundings(event, 'docs', '/foo')
  return surroundings
})
请确保创建包含以下内容的 server/tsconfig.json 文件以避免类型错误。
{
  "extends": "../.nuxt/tsconfig.server.json"
}