logo cmdragon's Blog

Nuxt.js头部魔法：轻松自定义页面元信息，提升用户体验

avatar
cmdragon 渡劫
  2024-07-16 00:00:00   2024-07-16 00:00:00   1.6k 字  6 分钟
image image

扫描二维码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

useHead 函数概述

useHead是一个用于在 Nuxt 应用中自定义页面头部属性的函数。它由Unhead库提供支持，允许开发者以编程和响应式的方式设置每个页面的头部信息。

useHead 函数类型

1
2
useHead(meta: MaybeComputedRef<MetaObject>): void

MetaObject 接口

MetaObject接口定义了可以传递给useHead的属性类型，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
interface MetaObject {
  title?: string;
  titleTemplate?: string | ((title?: string) => string);
  base?: Base;
  link?: Link[];
  meta?: Meta[];
  style?: Style[];
  script?: Script[];
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

参数

meta

类型：MetaObject

MetaObject是Unhead库中的一个对象类型，用于封装和管理页面头部的元数据。Unhead是一个用于构建动态、可配置的 HTML
头部的库，它允许开发者在 Nuxt.js 应用中灵活地控制页面的元信息。

接受以下头部元数据的对象：

title

title属性用于设置页面的静态标题。当用户在浏览器中打开页面时，显示在浏览器标签或书签中的标题就是由这个属性决定的。例如，如果你想为你的页面设置标题为“我的页面”，可以这样设置：

1
2
3
4
useHead({
  title: '我的页面'
});

titleTemplate

titleTemplate属性允许你使用动态模板来生成标题。这可以是一个字符串模板或者一个函数，该函数接收一个参数（通常是当前的标题）并返回一个新的标题字符串。

字符串模板：

1
2
3
4
useHead({
  titleTemplate: '这是我的页面 - {{title}}'
});

函数模板：

1
2
3
4
5
const getTitle = (title) => `这是我的页面 - ${title}`;
useHead({
  titleTemplate: getTitle
});

base

base属性用于设置<base>标签的属性，通常用于指定页面中相对链接的基础 URL。例如，如果你的页面是https://example.com
，并且你有一个链接指向/blog，那么使用<base href="/blog">可以确保所有相对链接都从/blog开始。

1
2
3
4
useHead({
  base: { href: '/blog' }
});

link属性是一个数组，每个元素都是一个<link>标签的配置对象。这些对象通常包含rel、href、type
等属性，用于定义外部样式表、脚本文件或其他资源的链接。

1
2
3
4
5
6
7
useHead({
  link: [
    { rel: 'stylesheet', href: '/styles.css' },
    { rel: 'preload', href: '/fonts/roboto.woff2', as: 'font' }
  ]
});

meta

meta属性也是一个数组，每个元素都是一个<meta>标签的配置对象。这些对象通常包含name、content、http-equiv
等属性，用于定义元信息，如描述、关键词、字符集等。

1
2
3
4
5
6
7
useHead({
  meta: [
    { name: 'description', content: '这是一个关于我的页面的描述' },
    { property: 'og:title', content: '我的页面' }
  ]
});

style

style属性用于直接在页面上插入 CSS 样式。数组中的每个元素都是一个<style>标签的配置对象。

1
2
3
4
5
6
7
useHead({
  style: [
    '<style>body { background-color: #f0f0f0; }</style>',
    '<style id="custom-style">h1 { color: #ff0000; }</style>'
  ]
});

script

script属性用于插入外部脚本文件或直接插入 JavaScript 代码。数组中的每个元素都是一个<script>标签的配置对象。

1
2
3
4
5
6
7
useHead({
  script: [
    '<script src="/js/main.js"></script>',
    '<script id="custom-script">console.log("这是自定义脚本");</script>'
  ]
});

noscript

noscript属性用于在浏览器不支持脚本时显示的内容。数组中的每个元素都是一个<noscript>标签的配置对象。

1
2
3
4
5
6
useHead({
  noscript: [
    '<p>您的浏览器不支持脚本，请启用脚本以获取最佳体验。</p>'
  ]
});

htmlAttrs 和 bodyAttrs

htmlAttrs和bodyAttrs属性分别用于设置<html>和<body>标签的属性。例如，你可以设置页面的语言属性：

1
2
3
4
5
useHead({
  htmlAttrs: { lang: 'zh-CN' },
  bodyAttrs: { class: 'body-class' }
});

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
  <div>
    <h1>我的页面</h1>
  </div>
</template>

<script>
export default {
  setup() {
    // 使用 useHead 函数来设置 MetaObject
    useHead({
      // 设置静态页面标题
      title: '我的页面',
      // 配置动态模板以自定义每个页面的标题
      titleTemplate: 'My Website - %s',
      // 设置 <base> 标签的属性
      base: { href: '/app' },
      // 数组中的每个元素都映射到一个新的 <link> 标签
      link: [
        { rel: 'stylesheet', href: '/styles.css' },
        { rel: 'icon', href: '/favicon.ico' }
      ],
      // 数组中的每个元素都映射到一个新的 <meta> 标签
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '这是我的页面描述' }
      ],
      // 数组中的每个元素都映射到一个新的 <style> 标签
      style: [
        { cssText: 'body { background-color: #f0f0f0; }' }
      ],
      // 数组中的每个元素都映射到一个新的 <script> 标签
      script: [
        { src: '/js/app.js', type: 'text/javascript' }
      ],
      // 设置 <noscript> 标签的内容
      noscript: [
        '本页面需要 JavaScript 来正确显示。请启用 JavaScript 后再试。'
      ],
      // 设置 <html> 标签的属性
      htmlAttrs: {
        lang: 'zh-CN'
      },
      // 设置 <body> 标签的属性
      bodyAttrs: {
        class: 'my-body-class'
      }
    });
  }
};
</script>

往期文章归档：

Nuxt.js头部魔法：轻松自定义页面元信息，提升用户体验
posts/28859392f373/
作者
cmdragon
发布于
2024-07-16 00:00
许可
  1. 1. useHead 函数概述
  2. 2. useHead 函数类型
  3. 3. MetaObject 接口
  4. 4. 参数
    1. 4.1. meta
    2. 4.2. title
    3. 4.3. titleTemplate
    4. 4.4. base
    5. 4.5. link
    6. 4.6. meta
    7. 4.7. style
    8. 4.8. script
    9. 4.9. noscript
    10. 4.10. htmlAttrs 和 bodyAttrs
  5. 5. 示例：
  6. 6. 往期文章归档：
  1. 1. useHead 函数概述
  2. 2. useHead 函数类型
  3. 3. MetaObject 接口
  4. 4. 参数
    1. 4.1. meta
    2. 4.2. title
    3. 4.3. titleTemplate
    4. 4.4. base
    5. 4.5. link
    6. 4.6. meta
    7. 4.7. style
    8. 4.8. script
    9. 4.9. noscript
    10. 4.10. htmlAttrs 和 bodyAttrs
  5. 5. 示例：
  6. 6. 往期文章归档：