javascript 如何设置文档的每页标题？

s4chpxco 于 2023-05-16 发布在 Java

关注(0)|答案(2)|浏览(128)

我实际上是使用pages/_document.js钩子将Bootstrap和jQuery添加到我的页面中，顺便设置<Head>

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <title>Default title</title>
          <link rel="stylesheet" href="/static/lib/bootstrap3/css/bootstrap.min.css" />
        </Head>

        <body>
          <Main/>
          <NextScript/>
          <script src="/static/lib/jquery3/jquery-3.3.1.min.js" />
          <script src="/static/lib/bootstrap3/js/bootstrap.min.js" />
        </body>
      </html>
    )
  }
}

现在我想为我的页面设置一个不同的标题。是否可以在Document之外使用<Head>？在<div>中是这样的：

const ContactPage = () => {
  return (
    <div>
      <Head>
        <title>You better contact us!</title>
      </Head>

      <div className="page-body">...</div>
    </div>
  )
}

如果可能的话，它会覆盖或合并pages/_document.js中已经设置的内容吗？

JavaScript

来源：https://stackoverflow.com/questions/52170634/how-to-set-documents-title-per-page

2条答案

按热度按时间

k97glaaz1#

您希望使用next/head组件：

import Head from 'next/head'

export default () =>
  <div>
    <Head>
      <title>My page title</title>
      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    </Head>

    <p>Hello world!</p>
  </div>

参见文档：https://nextjs.org/docs/api-reference/next/head

赞(0）回复(0）举报 2023-05-16

mrwjdhj32#

***在NextJs 13中使用app目录***你不再需要使用'next/head'组件，你需要做的是，只需要定义一个导出的对象，无论是在layout.js还是page.js中，保持标题*静态，如下面的示例

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

或者如果你需要一个动态标题，你可以使用generateMetadata函数来获取你需要的东西，就像下面的例子。

//in this example I use the generateMetadata function to generate a multi languages title.

export async function generateMetadata({ params: { lng } }) {

  const myTitle = lng === "en" ? "Hi" : "مرحبا";

  return {
    title: myTitle,
  };
}

参考Config-based Metadata

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 如何设置文档的每页标题？

2条答案

相关问题

热门标签

最新问答