元标签

您可以通过几种不同的方式为您的网站自定义元标签：

组合式api useMeta

在您的setup函数中，您可以useMeta使用元属性的对象调用与元标记对应的键：title, base, script, style, metaand link, 以及htmlAttrs和 bodyAttrs。或者，您可以传递一个返回响应式元数据对象的函数。

例如：

export default {
  setup () {
    useMeta({
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
      ],
      bodyAttrs: {
        class: 'test'
      }
    })
  }
}
复制代码

元组件

Nuxt提供<Title>，<Base>，<Script>，<Style>，<Meta>，<Link>，<Body>，<Html>和<Head>组件，以便您可以直接与您的组件的模板中的元数据进行交互。

由于这些组件名称与原生 HTML 元素匹配，因此在 模板中将它们大写非常重要。

<Head>和<Body>可以接受嵌套元标记（出于审美原因），但这对嵌套元标记在最终 HTML 中的呈现位置没有影响。

例如：

<template>
  <div>
    Hello World
    <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
      <Head>
        <Title>{{ dynamic }} title</Title>
        <Meta name="description" :content="`My page's ${dynamic} description`" />
        <Link rel="preload" href="/test.txt" as="script" />
      </Head>
    </Html>

    <button class="blue" @click="dynamic = Math.random() * 100">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data: () => ({ dynamic: 49 })
}
</script>
复制代码

水文，请轻喷。

Nuxt3 文档中文翻译（meta）

元标签

组合式api useMeta

元组件

猜你喜欢