我们提供了一个可以将元素追加到页面 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
内容,而无需对添加的其他页面做出任何假设。
title
、meta
或其他元素(例如 script
)必须包含在 Head
元素的直
接子代中,或包装为 <React.Fragment>
的最顶级或数组中——否则不会在客户端
导航上正确加载标签。