Lzh on GitHub

Transformers

在 Nuxt Content 中，转换器允许您在内容文件处理过程中以编程方式解析、修改或分析它们。

在 Nuxt Content 中，转换器允许您在内容文件处理过程中以编程方式解析、修改或分析它们。它们特别适用于：

  • 添加或修改字段（例如：附加到标题、生成 slugs）
  • 提取元数据（例如：列出使用的组件）
  • 通过计算数据丰富内容
  • 支持新的内容类型

定义转换器

您可以使用来自 @nuxt/content 的 defineTransformer 辅助函数定义转换器：

~~/transformers/title-suffix.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'title-suffix',
  extensions: ['.md'], // 应用此转换器的文件扩展名
  transform(file) {
    // 根据需要修改文件对象
    return {
      ...file,
      title: file.title + ' (suffix)',
    }
  },
})

转换器选项

  • name (字符串): 转换器的唯一名称
  • extensions (字符串): 此转换器应应用的文件扩展名（例如 ['.md'])
  • transform (函数): 接收文件对象并返回修改后文件的函数

注册转换器

转换器在您的 nuxt.config.ts 中注册：

nuxt.config.ts
export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~~/transformers/title-suffix',
        '~~/transformers/my-custom-transformer',
      ],
    },
  },
})

示例：添加元数据

转换器可以向文件添加 __metadata 字段。该字段不存储在数据库中，但可用于运行时逻辑。

~~/transformers/component-metadata.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'component-metadata',
  extensions: ['.md'],
  transform(file) {
    // 示例：检测是否使用了自定义组件
    const usesMyComponent = file.body?.includes('<MyCustomComponent>')
    return {
      ...file,
      __metadata: {
        components: usesMyComponent ? ['MyCustomComponent'] : [],
      },
    }
  },
})

注意：__metadata 字段仅在运行时可用，不会持久化到内容数据库中。

API 参考

interface Transformer {
  name: string
  extensions: string[]
  transform: (file: ContentFile) => ContentFile
}
  • ContentFile 是表示解析后内容文件的对象，包含 frontmatter、body 和其他字段。

使用转换器支持新文件格式

转换器不仅限于修改现有内容——它们还可用于在 Nuxt Content 中添加对新文件格式的支持。通过定义一个带自定义 parse 方法的转换器，您可以指示 Nuxt Content 如何读取和处理具有新扩展名（例如 YAML）的文件。

示例：YAML 文件支持

假设您想在内容目录中支持 .yml 和 .yaml 文件。您可以创建一个转换器来解析 YAML frontmatter 和正文，并为这些扩展名注册它：

~~/transformers/yaml.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'Yaml',
  extensions: ['.yml', '.yaml'],
  parse: (file) => {
    const { id, body } = file
    
    // 使用您喜欢的 yaml 解析器解析正文
    const parsed = parseYaml(body)

    return {
      ...parsed,
      id,
    }
  },
})

在 Nuxt 配置中注册 YAML 转换器：

export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~~/transformers/yaml',
        // ...其他转换器
      ],
    },
  },
})

这种方法允许您扩展 Nuxt Content 以处理所需的任何自定义文件格式。