---
title: "头部"
description: "Nuxt Kit 提供了一些工具，帮助你在模块中管理 head 配置。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/kit/head"
---
# 头部

> Nuxt Kit 提供了一些工具，帮助你在模块中管理 head 配置。

## `setGlobalHead`

为你的 Nuxt 应用设置全局的 head 配置。该工具允许模块以编程方式配置 meta 标签、链接、脚本和其他 head 元素，这些配置会应用到所有页面。

提供的 head 配置会与现有的 head 配置进行深度合并，且你的配置项优先级更高。

<tip>

这对于需要将全局 meta 标签、样式表或脚本注入应用 head 的模块尤其有用。

</tip>

### 类型

```tstwoslash
// @errors: 2391
// ---cut---
import type { SerializableHead } from '@unhead/vue/types'

interface AppHeadMetaObject extends SerializableHead {
  charset?: string
  viewport?: string
}

function setGlobalHead (head: AppHeadMetaObject): void
```

### 参数

#### `head`

**类型**: `AppHeadMetaObject`

一个包含 head 配置的对象。所有属性均为可选，并会与已有配置合并：

- `charset`：文档的字符编码
- `viewport`：视口 meta 标签配置
- `meta`：meta 标签对象数组
- `link`：link 标签对象数组（样式表、图标等）
- `style`：内联 style 标签对象数组
- `script`：script 标签对象数组
- `noscript`：noscript 标签对象数组
- `title`：默认页面标题
- `titleTemplate`：页面标题格式模板
- `bodyAttrs`：添加到 `<body>` 标签的属性
- `htmlAttrs`：添加到 `<html>` 标签的属性

### 示例

#### 添加全局 Meta 标签

```ts
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      meta: [
        { name: 'theme-color', content: '#ffffff' },
        { name: 'author', content: '你的名字' },
      ],
    })
  },
})
```

#### 注入全局样式表

```ts
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
        },
      ],
    })
  },
})
```

#### 添加全局脚本

```ts
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      script: [
        {
          src: 'https://cdn.example.com/analytics.js',
          async: true,
          defer: true,
        },
      ],
    })
  },
})
```

#### 设置 HTML 属性

```ts
import { defineNuxtModule, setGlobalHead } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    setGlobalHead({
      htmlAttrs: {
        lang: 'en',
        dir: 'ltr',
      },
      bodyAttrs: {
        class: 'custom-body-class',
      },
    })
  },
})
```

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/head.ts)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.