您可以为 NextJS 中的组件设置一个默认值，Head以便其他页面从中扩展吗？
就我而言，我需要在每个页面上加载字体：
<Head>
<link
href="path-to-font"
rel="stylesheet"
/>
</Head>
我可以使用自定义文档文件来完成此操作，但默认值Head似乎更简单。
如果Head不需要经常更改，您可以采用自定义文档方法。但是，如果您希望事物是动态的，例如不同页面的不同标题，我建议将静态布局保留在客户文档中，并将动态布局单独保留在另一个组件中，例如
在 _document.js 中
// this will define the default layout for the page
render() {
return (
<Html lang="en">
<Head>
<meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
// links for static assets
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
如果您希望内容像标题一样是动态的，请创建一个新的布局组件，将所有组件包装在特定页面上。
const Layout = ({children, title="default title", description="default-description"}) => {
return (
<>
<Head>
<meta name="description" content={description} />
<title>{title}</title>
</Head>
// you can header component here
<main>
{children}
</main>
// you can add your footer component here
</>
);
}
现在，您只需使用布局包裹页面即可使内容变得动态。
const MyPage = (props) => {
return (
<Layout title="the-dynamic-title" description="the-dynamic-description">
// all other components for your page goes here
</Layout>
)
}
| 归档时间： |
|
| 查看次数： |
5851 次 |
| 最近记录： |