可组合函数
useContentHead()
useContentHead() 可组合函数在你的内容数据和 useHead() 可组合函数之间提供绑定。
使用
useContentHead() 在你的应用中任何可以使用 useHead 的地方都可用。
它接受两个参数
document: 一个文档数据（任何类型）to: 一个路由路径- 默认值:
useRoute()
- 默认值:
<script setup lang="ts">
const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)
useContentHead(page)
</script>
自动化
当使用 <ContentDoc /> 组件或默认的 document-driven 页面时，该可组合函数将被自动使用。
要禁用自动化，可以在你的 nuxt.config 中将 contentHead 选项设置为 false。
nuxt.config.ts
export default defineNuxtConfig({
content: {
contentHead: false
}
})
参数
这些参数可以从页面 前端内容 部分使用。
| 键 | 类型 | 默认值 | 描述 |
|---|---|---|---|
head | 对象 | 一个与 useHead 兼容的对象 | |
title | 字符串 | 将用作 head.title 的默认值 | |
head.title | 字符串 | 解析后的 title | 设置 <title> 标签 |
description | 字符串 | 将用作 head.description 的默认值 | |
head.description | 字符串 | 解析后的 description | 设置 <meta name="description"> 标签 |
image | 字符串 | 对象 | 将用作 head.image 的默认值 | |
image.src | 字符串 | 图片的来源 | |
image.alt | 字符串 | 图片的替代描述 | |
image.xxx | 字符串 | 任何 og:image:xxx 兼容 属性 | |
head.image | 字符串 | 对象 | 覆盖 <meta property="og:image"> |
除了 title、description 和 image 之外，head 对象在 前端内容 中的行为与在 useHead({ ... }) 可组合函数中的行为完全相同。
你可以指定任何可以用 yaml 格式写入的值。
example-usage.md
---
title: 'My Page Title'
description: 'What a lovely page.'
image:
src: '/assets/image.jpg'
alt: 'An image showcasing My Page.'
width: 400
height: 300
head:
meta:
- name: 'keywords'
content: 'nuxt, vue, content'
- name: 'robots'
content: 'index, follow'
- name: 'author'
content: 'NuxtLabs'
- name: 'copyright'
content: '© 2022 NuxtLabs'
---