Question

我有一个功能完善的网站，但头部未检索到特定于页面的<title>和<meta description>。

例如，如果我在“关于”页面上，标题标签为“关于我”，我想在<title>标签中显示“关于我”。我基本上需要在我的Head组件中加载props，vars或类似的东西，包括实际的标题和描述。我已经在官方文档中阅读了一些示例，但是还没有使用动态数据更新磁头的示例。

这是我组件的当前代码：

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        <title>My Website{title}</title>
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

我为帖子和页面创建了一个Layout.js组件。我之前介绍的<Head>已导入布局组件中。

import React from 'react';
import Head from '../components/Head';


export default ({ children, as, settings = {}, title="default text" }) => (
    <main>
        <Head>
            <title>{title}</title>
        </Head>
        <div className="app__container">
            <div className="row">{children}</div>
        </div>
    </main>
);

我希望当我进入 / work / great-client 时，我会看到带有 great-client 的更新的<title>标签>

Answer 1

应该是：

import React from 'react';
import Head from '../components/Head';

export default ({ children, as, settings = {}, title="default text" }) => (
    <main>
        <Head title={title}>
        <div className="app__container">
            <div className="row">{children}</div>
        </div>
    </main>
);

如果要将其用作Head的子代，则必须修改Head组件：

import React from 'react';
import NextHead from 'next/head';

const Head = ({ title, description, children }) => (
    <NextHead>
        <meta charSet="UTF-8" />
        {children}
        <meta name="description" content={description || ''} />
        <meta name="viewport" content="width=device-width, initial-scale=1" key="viewport" />
    </NextHead>
);

Answer 2

在第二个示例中进行了更多尝试之后，我开始工作了。

下面的代码中有更多的解释。

下面的示例代码显示了Post.js，其中包含共享组件<Layout>。在布局中，我添加并添加了{props.meta.title}。现在可以检索特定于页面/帖子的动态标题标签。

const Post = props => {
    const {
        content,
        meta: { title },
    } = props;


    return (
        <Layout>
            <Head>
                <title>{props.meta.title}</title>
            </Head>
            <div className="post">
                <div className="content-inner">
                        <h1>{title}</h1>
                    <article dangerouslySetInnerHTML={{ __html: content }} />
                </div>
            </div>
        </Layout>
    );
};

Post.getInitialProps = function(reqOrContext) {
    const { slug } = reqOrContext.query;
    let content = require(`../work/${slug}.md`);
    const converter = new Converter({ metadata: true });
    content = converter.makeHtml(content);
    const meta = converter.getMetadata();
    return { content, meta };
};

export default withRouter(Post);

如何在next.js <head>部分中创建动态标题？

2 个答案: