Nuxt3 文档中文翻译：全新自定义元标签指南

2023-10-10 00:25:48

元标签是放置在部分的HTML元素，用于提供关于网页的元数据。元标签主要用于搜索引擎优化(SEO)，搜索引擎会读取元标签的内容以了解网页的内容和结构。

在Nuxt3中，您有几种方法可以自定义元标签。

使用组合式api useMeta

在您的setup函数中，您可以useMeta使用元属性的对象调用与元标记对应的键：title, base, sc

useMeta({
  title: '我的网站标题',
  base: {
    href: 'https://example.com'
  },
  script: [
    {
      src: 'https://example.com/script.js',
      body: true
    }
  ]
})

通过传入对象到head()

head()函数接收一个对象作为参数，对象中可以包含title、base、meta和link属性。

head({
  title: '我的网站标题',
  base: {
    href: 'https://example.com'
  },
  meta: [
    {
      name: 'description',
      content: '我的网站'
    },
    {
      name: 'keywords',
      content: '我的网站'
    }
  ],
  link: [
    {
      rel: 'stylesheet',
      href: 'https://example.com/style.css'
    }
  ]
})

使用Head组件

Head组件是一个全局组件，它会自动将元标签添加到部分。

<template>
  <div>
    <Head>
      
      <meta name="description" content="我的网站" />
      <meta name="keywords" content="我的网站关键字" />
    </Head>
    <main>
      <h1>我的网站标题</h1>
      <p>我的网站描述</p>
    </main>
  </div>
</template>

使用Nuxt提供的API

Nuxt还提供了一些API，您可以使用这些API来自定义元标签。

$nuxt.head：这个API可以获取当前页面部分的所有元标签。
$nuxt.setPageTitle：这个API可以设置当前页面的标题。
$nuxt.addMeta：这个API可以向当前页面的部分添加元标签。
$nuxt.removeMeta：这个API可以从当前页面的部分移除元标签。

在Nuxt.config.js中设置元标签

您还可以在Nuxt.config.js文件中设置元标签。

export default {
  head: {
    title: '我的网站标题',
    base: {
      href: 'https://example.com'
    },
    meta: [
      {
        name: 'description',
        content: '我的网站描述'
      },
      {
        name: 'keywords',
        content: '我的网站关键字'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://example.com/style.css'
      }
    ]
  }
}

使用Nuxt扩展来设置元标签

您还可以使用Nuxt扩展来设置元标签。有许多Nuxt扩展可以帮助您设置元标签，例如：