配置 - Nuxt 内容 - Nuxt 框架

您可以在 nuxt.config 文件中使用 content 属性来配置 Nuxt 内容。

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    // My custom configuration
  }
})

`api`

类型： Record<string, any>
默认： { baseURL: '/api/_content' }

更改内容 API 的默认行为。

baseURL: 更改内容 API 的基本 URL。默认值为 /api/_content。

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    api: {
      baseURL: '/api/_my_content'
    }
  }
})

`contentHead`

类型： boolean
默认： true

启用内容头部功能。如果启用，模块将自动使用 useContentHead 可组合函数将内容头部数据注入到您的页面。

`defaultLocale`

类型： string
默认： undefined

顶级内容的默认语言环境。如果未定义此选项，模块将使用 locales 数组中的第一个语言环境代码。

请注意，在定义多个语言环境的情况下，模块将使用 defaultLocale 过滤内容。如果要获取其他语言环境的内容，则需要使用 where 选项。

`documentDriven`

类型： boolean | object
默认： false

切换文档驱动模式.

false 将完全禁用此功能。

true 将使用以下默认值启用此功能

文档驱动默认值

{
  // Will fetch navigation, page and surround.
  navigation: true,
  page: true,
  surround: true,
  // Will fetch `content/_theme.yml` and put it in `globals.theme` if present.
  globals: {
    theme: {
      where: {
        _id: 'content:_theme.yml'
      },
      without: ['_']
    }
  },
  // Will use `theme` global to search for a fallback `layout` key.
  layoutFallbacks: ['theme'],
  // Will inject `[...slug].vue` as the root page.
  injectPage: true
}

选项	类型	描述
`page`	`boolean`	启用页面绑定，使其全局可用。
`navigation`	`boolean`	启用导航绑定，使其全局可用。
`surround`	`boolean`	启用包围绑定，使其全局可用。
`globals`	`object \| boolean`	要全局提供的全局变量列表。
`layoutFallbacks`	`string[]`	用于查找布局回退的 `globals` 键列表。
`injectPage`	`boolean`	注入预先配置的页面 `[...slug].vue`
`trailingSlash`	`boolean`	在 `canonical` 和 `og:url` 的末尾添加斜杠

`markdown`

anchorLinks: 控制锚点链接的生成，默认情况下，它会为 h2、h3 和 h4 标题生成锚点链接
- 类型： boolean | object
- 默认： { depth: 4, exclude: [1] }
- 值
  - false 将禁用链接生成。
  - true 将为所有标题启用链接生成。
  - object 将自定义链接生成。
  选项类型描述
  depth number 设置锚点链接生成的最大深度。
  exclude number[] 要从链接生成中排除的标题列表。
mdc: 是否应该支持 MDC 语法。
- 类型： boolean
- 默认： true

选项	类型	描述
depth	`number`	设置锚点链接生成的最大深度。
exclude	`number[]`	要从链接生成中排除的标题列表。

remarkPlugins: 要使用的 remark 插件列表。

类型： object
默认： {}
示例

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    markdown: {
      // Object syntax can be used to override default options
      remarkPlugins: {
        // Override remark-emoji options
        'remark-emoji': {
          emoticon: true
        },
        // Disable remark-gfm
        'remark-gfm': false,
        // Add remark-oembed
        'remark-oembed': {
          // Options
        }
      },
    }
  }
})

rehypePlugins: 要使用的 rehype 插件列表。

类型： string[]
默认： []
示例

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    markdown: {
      rehypePlugins: [
        'rehype-figure'
      ]
    }
  }
})

toc: 控制目录生成的行为。
- 类型： object
- 默认： { depth: 2, searchDepth: 2 }
  - depth: 要包含在目录中的最大标题深度。
  - searchDepth: 用于搜索标题的嵌套标签的最大深度。

tags: 标签将用于替换 markdown 组件，并渲染自定义组件而不是默认组件。

类型： object

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    markdown: {
      tags: {
        p: 'MyCustomParagraph'
      }
    }
  }
})

`highlight`

类型： false | object

Nuxt 内容使用 Shiki 为 ProsePre 和 ProseCodeInline 提供语法高亮。

选项	类型	描述
`theme`	`ShikiTheme` 或 `Record<string, ShikiTheme>`	要使用的颜色主题。
`langs`	`ShikiLang[]`	要用于高亮的已加载的语言。

highlight.theme

主题可以使用单个字符串指定，也可以使用包含多个主题的对象指定。

此选项与颜色模式模块兼容。

如果您使用多个主题，建议始终指定一个 default 主题。

export default defineNuxtConfig({
  content: {
    highlight: {
      // Theme used in all color schemes.
      theme: 'github-light',
      // OR
      theme: {
        // Default theme (same as single string)
        default: 'github-light',
        // Theme used if `html.dark`
        dark: 'github-dark',
        // Theme used if `html.sepia`
        sepia: 'monokai'
      }
    }
  }
})

highlight.langs

默认情况下，模块将加载一些用于语法高亮的语言： ['json', 'js', 'ts', 'html', 'css', 'vue', 'shell', 'mdc', 'md', 'yaml']

如果您计划使用其他语言的代码示例，则需要在这些选项中定义该语言。

export default defineNuxtConfig({
  content: {
    highlight: {
      langs: [
        'c',
        'cpp',
        'java'
      ]
    }
  }
})

如果您希望为不支持的语言添加高亮显示，可以通过加载该语言的语法文件来实现。

import { readFileSync } from 'node:fs'

export default defineNuxtConfig({
  content: {
    highlight: {
      langs: [
        // Read more about Shiki languages: https://shiki.style/guide/load-lang
        JSON.parse(
          readFileSync('./shiki/languages/gdscript.tmLanguage.json', 'utf-8'),
        ),
      ],
    },
  },
})

有关在 Shiki 文档中添加语言的更多信息，请参阅。

`ignores`

类型： string[]
默认： ['\\.', '-']

要从解析、渲染和监视中排除内容的忽略模式列表。

请注意

模式将转换为正则表达式
. 和 - 前缀的文件默认情况下会被忽略

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    ignores: [
      'hidden',        // any file or folder that contains the word "hidden"
      '/hidden/',      // any folder that exactly matches the word "hidden"
      '/path/to/file', // any file path matching "/path/to/file"
      '\\.bak$',       // any file with the extension ".bak"
    ]
  }
})

`locales`

类型： string[]
默认： []

语言环境代码列表。这些代码将用于检测内容的语言环境。

`navigation`

类型： false | object
默认： true

配置导航功能.

可以设置为 false 以完全禁用此功能。

选项	类型	描述
`fields`	`string[]`	要从前部物质继承到导航节点的字段列表。

defineNuxtConfig({
  content: {
    navigation: {
      fields: ['author', 'publishedAt']
    }
  }
})

`respectPathCase`

类型： boolean
默认： false

是否在生成路由时保留文件路径的大小写。默认值为 false，这意味着路由将以小写形式生成。例如，content/en-US/foo.md 将解析为 en-us/foo 路径。这可能不是您期望的结果。如果设置为 true，路由将使用与文件路径相同的大小写生成。 content/en-US/foo.md 将解析为 en-US/foo 路径。

`sources`

类型： Record<string, object>
默认： {}

定义内容的不同来源。

由于 unstorage，内容可以位于多个位置、多个目录或远程 git 存储库中。

nuxt.config.ts

import { resolve } from "node:path";

export default defineNuxtConfig({
  content: {
    sources: {
      // overwrite default source AKA `content` directory
      content: {
        driver: 'fs',
        prefix: '/docs', // All contents inside this source will be prefixed with `/docs`
        base: resolve(__dirname, 'content')
      },
      // Additional sources
      fa: {
        prefix: '/fa', // All contents inside this source will be prefixed with `/fa`
        driver: 'fs',
        // ...driverOptions
        base: resolve(__dirname, 'content-fa') // Path for source directory
      },
      github: {
        prefix: '/blog', // Prefix for routes used to query contents
        driver: 'github', // Driver used to fetch contents (view unstorage documentation)
        repo: "<owner>/<repo>",
        branch: "main",
        dir: "content", // Directory where contents are located. It could be a subdirectory of the repository.
        // Imagine you have a blog inside your content folder. You can set this option to `content/blog` with the prefix option to `/blog` to avoid conflicts with local files.
      },
    }
  }
})

强烈建议不要修改默认来源。如果您想从其他位置加载内容，请考虑添加其他来源。

`watch`

类型： object | false
默认： { ws: { port: 4000, showURL: false } }

选项	默认	描述
`port`	`4000`	选择用于 WebSocket 服务器的端口。
`showURL`	`false`	切换开发服务器启动消息中的 URL 显示。

禁用内容监视器和热内容重载。

监视器是开发功能，不会包含在生产环境中。

export default defineNuxtConfig({
  content: {
    watch: {
      ws: {
        port: 4000,
        showURL: true
      }
    }
  }
})

`yaml`

类型： false | object
默认： {}

yaml 解析器的选项。

`experimental`

`search`

类型： boolean | undefined
默认： undefined

启用搜索功能。

`indexed`

类型： boolean
默认： true

启用索引搜索。这将生成一个搜索索引文件，该文件允许更快速、更高效的搜索。

`ignoredTags`

类型： string[]
默认： ['style', 'code']

解析内容以获取搜索 API 响应时要忽略的标签列表。这有助于避免在搜索结果中包含代码片段或不提供任何有用信息的样式。

`filterQuery`

类型: QueryBuilderWhere
默认值: {}

解析内容以获取搜索 API 响应时要忽略的查询。这有助于避免包含不适合搜索的内容，例如草稿或私有内容。

`options`

类型: object
默认

{
  fields: ['title', 'content', 'titles'],
  storeFields: ['title', 'content', 'titles'],
  searchOptions: {
    prefix: true,
    fuzzy: 0.2,
    boost: {
      title: 4,
      content: 2,
      titles: 1
    }
  }
}

启用索引搜索后，此选项将自动配置 API 端点和 searchContent 可组合项。对于简单搜索，您需要将选项传递给 searchContent 可组合项。

安装

通过创建一个新项目或将 Nuxt Content 添加到现有 Nuxt 应用程序中，开始使用 Nuxt Content。

边缘通道

Nuxt Content 每天都在进行提交、改进和错误修复。您可以在下一个版本发布之前选择加入测试它们。