queryContent() - Nuxt 内容

重要 ⚠️

在您的页面和组件中，将您的查询包装在 useAsyncData 可组合函数中，以防止在首次加载时重复获取。

app.vue

<script setup>
const { data } = await useAsyncData('home', () => queryContent('/').findOne())
</script>

<template>
  <pre>
    {{ data }}
  </pre>
</template>

查询构建器

The queryContent() composable provides methods for querying and fetching your contents.

创建一个查询构建器来搜索内容。

// Create a query looking for anything in content/ directory
const contentQuery = queryContent()

// Create a query looking into content/articles directory
const contentQuery = queryContent('articles')

// Create a query looking into content/articles/nuxt3 directory
const contentQuery = queryContent('articles', 'nuxt3')

`where(query)`

query:
- 类型: Partial<QueryBuilderParams>
- 必需

按查询过滤结果。

Where 查询基于 Mongo 查询语法的子集，它处理

运算符	描述
`$match`	–
`$eq`	如果项目等于条件则匹配
`$ne`	如果项目不等于条件则匹配
`$not`	如果条件为假则匹配
`$and`	仅当所有嵌套条件都为真时才匹配
`$or`	如果任何嵌套条件为真则匹配
`$in`	如果项目在条件数组中则匹配
`$contains`	如果项目包含每个条件或匹配条件数组中的每个规则则匹配
`$icontains`	忽略大小写包含
`$containsAny`	如果项目包含来自条件数组的至少一条规则则匹配
`$exists`	检查键是否存在
`$type`	如果项目类型等于条件则匹配
`$regex`	为字符串模式匹配提供正则表达式功能
`$lt`	检查项目是否小于条件
`$lte`	检查项目是否小于或等于条件
`$gt`	检查项目是否大于条件
`$gte`	检查项目是否大于或等于条件

// Implicit (assumes $eq operator)
const articles = await queryContent('articles').where({ title: 'Home' }).findOne()

// Explicit $eq
const articles = await queryContent('articles').where({ title: { $eq: 'Home' } }).findOne()

// $gt
const articles = await queryContent('articles').where({ age: { $gt: 18 } }).find()

// $in
const articles = await queryContent('articles').where({ name: { $in: ['odin', 'thor'] } }).find()

为了在对象和数组或数组中过滤，您可以使用嵌套属性样式

const products = await queryContent('products').where({ 'categories': { $contains: 'top' } }).find()

const products = await queryContent('products').where({ 'categories': { $contains: ['top', 'woman'] } }).find()

`sort(options)`

options
- 类型: object
- 必需

按一个或多个字段对结果进行排序。

// Sort by title ascending
const articles = await queryContent('articles')
  .sort({ title: 1 })
  .find()

// Sort by title ascending first then sort by category descending
const articles = await queryContent('articles')
  .sort({ title: 1, category: -1 })
  .find()
// OR
const articles = await queryContent('articles')
  .sort({ title: 1 })
  .sort({ category: -1 })
  .find()

// Sort by nested field
const articles = await queryContent('articles')
  .sort({ 'category.title': 1 })
  .find()

sort() 方法默认情况下按区分大小写，字母顺序排序。您可以传递一些神奇的选项到排序选项，以改变排序行为，例如按不区分大小写排序或按数字而非字母顺序排序。
$sensitivity: 更改区分大小写。例如，对不区分大小写的排序使用 $sensitivity: 'base'
$numeric: 布尔值，指示是否应使用数字排序规则，使得 "1" < "2" < "10"。
$caseFirst: 大写或小写是否应该排在最前面。

例如，要按年龄从最小到最大对人员列表进行排序

const people = await queryContent('people')
  .sort({ age: 1, $numeric: true })
  .find()

这些选项被传递给 Intl.Collator().

`limit(count)`

count
- 类型: number
- 必需

限制结果数量。

// fetch only 5 articles
const articles = await queryContent('articles').limit(5).find()

`skip(count)`

count
- 类型: number
- 必需

跳过结果。

// fetch the next 5 articles
const articles = await queryContent('articles')
    .skip(5)
    .limit(5)
    .find()

`without(keys)`

keys
- 类型: string[] 或 string
- 必需

删除字段子集。

const articles = await queryContent('articles').without('unused-key').find()

const articles = await queryContent('articles').without(['unused-key', 'another-unused-key']).find()

`only(keys)`

keys
- 类型: string[] 或 string
- 必需

选择字段子集。

const articles = await queryContent('articles').only('id').find()

const articles = await queryContent('articles').only(['id', 'title']).find()

`find()`

获取并返回基于查询的匹配内容列表。

// List of articles
const articles = await queryContent('articles').find()

`findOne()`

获取第一个匹配的内容。

const firstArticle = await queryContent('articles').findOne()

`findSurround(path, options)`

path
- 类型: string
- 必需
options
- 类型: { before: number, after: number }
- 默认值: { before: 1, after: 1 }

获取路径周围的上一条和下一条结果。路径应该是目标内容的完整路径。

您将始终获得一个长度固定的数组，其中填充了匹配的文档或 null。

const [prev, next] = await queryContent()
  .only(['_path', 'title'])
  .sort({ date: 1})
  .where({ isArchived: false })
  .findSurround('/articles/article-2')

// Returns
[
  {
    title: 'Article 1',
    _path: '/articles/article-1'
    //...
  },
  null // no article-3 here
]

`count()`

基于查询计算匹配内容的数量。

// Count of articles
const count = await queryContent('articles').count()

// Returns
5 // number of articles

您还可以将 count() 与 where() 方法一起使用。

// Count of articles
const count = await queryContent('articles')
  .where({ isArchived: false })
  .count()

// Returns
5 // number of articles

TypeScript 支持

Nuxt Content v2 是专为 TypeScript 而构建的。

fetchContentNavigation()

fetchContentNavigation 实用程序根据 content/ 目录结构和文件返回一个项目树。