Blitz 尚在 beat 阶段! 🎉 预计会在今年的 Q3 季度发布 1.0
Back to Documentation Menu

<Head> 组件

我们提供了一个可以将元素追加到页面 head 中的内置组件。

import { Head } from "blitz"

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta
          name="viewport"
          content="initial-scale=1.0, width=device-width"
        />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

为了避免在 head 中出现重复的标签,可以使用 key 属性,该属性将确保标签 仅呈现一次,如下所示:

import { Head } from "blitz"

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

在这种情况下,仅渲染第二个 <meta property="og:title" />。具有重复 name 属性的 meta 标签会被自动处理。

在卸载该组件时会清除 head 里的内容,所以请确保完整定义每个页面所需要的 head 内容,而无需对添加的其他页面做出任何假设。

titlemeta 或其他元素(例如 script)必须包含在 Head 元素的直 接子代中,或包装为 <React.Fragment> 的最顶级或数组中——否则不会在客户端 导航上正确加载标签。


Idea for improving this page? Edit it on GitHub.