<Head> Component
配置网站的 <head> 标签、主题色、背景色和网站图标。
| Option | Type | Default Value | Description |
|---|---|---|---|
children | ReactNode | Content of <head>. | |
color.hue | number | { dark: number; light: number } | { dark: 204, light: 212 } | The hue of the primary theme color. (0 - 360) |
color.saturation | number | { dark: number; light: number } | 100 | The saturation of the primary theme color. (0 - 100) |
color.lightness | number | { dark: number; light: number } | { dark: 55, light: 45 } | The lightness of the primary theme color. (0 - 100) |
backgroundColor.dark | "rgb(RRR,GGG,BBB)" | "#RRGGBB" | 'rgb(17,17,17)' | Background color for light theme. |
backgroundColor.light | "rgb(RRR,GGG,BBB)" | "#RRGGBB" | 'rgb(250,250,250)' | Background color for dark theme. |
faviconGlyph | string | The glyph to use as the favicon. |
静态 Head 标签
如果你有静态的 head 标签，它们应该作为 children 放在 Head 中。例如：
app/layout.jsx
import { Layout } from 'my-nextra-theme'
import { Head } from 'nextra/components'
export default function MyLayout({ children, ...props }) {
return (
<html lang="en">
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</Head>
<body>
<Layout>{children}</Layout>
</body>
</html>
)
}基于页面的动态标签
你可以根据当前页面的前置数据动态生成 head 标签。例如：
via Markdown front matter
my-page/page.mdx
---
title: My title
description: My description
---via exporting metadata object
my-page/page.mdx
export const metadata = {
title: 'My title',
description: 'My description'
}in dynamic routes with Catch-all segment
app/[[...mdxPath]]/page.jsx
import { importPage } from 'nextra/pages'
export async function generateMetadata(props) {
const { mdxPath } = await props.params
const { metadata } = await importPage(mdxPath)
return {
title: metadata.title || 'Nextra',
description: metadata.description || 'The next site builder'
}
}You can refer to the useConfig API section for more
information about the useConfig hook and the frontMatter object.
主题色
你可以通过设置亮色和暗色主题的色相(H)、饱和度(S)和亮度(L)值来调整网站的主题色。在此网站上试试看：
| 色相 (H) | 饱和度 (S) | 亮度 (L) | 背景色 |
|---|---|---|---|
💡
Tip
You can adjust the lightness independently for dark or light mode to increase
legibility. E.g. to have a neutral primary color you can set the primary color
to be white HSL(0, 0%, 100%) on dark theme and gray HSL(0, 0%, 50%) for
light theme.
app/layout.jsx
<Head
color={{
hue: 0,
saturation: 0,
lightness: {
light: 50,
dark: 100
}
}}
/>网站图标字形
并非所有浏览器都支持这个功能，但这是一种通过使用表情符号或字符来自定义网站图标的简单方法。
app/layout.jsx
<Head faviconGlyph="✦" />Last updated on