个人中心
gpt4 book ai didi

javascript - 用于开放图谱标记的几个 _document.js

转载 作者：行者123 更新时间：2023-11-28 04:38:03 24 4
gpt4 key购买 nike

我正在尝试在我的网站 (next.js) 中实现 og 标记。

主页包括business.business类型和前缀

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#"> ,

但是博客中的文章页面具有文章类型和前缀

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> .

帮我处理 head 前缀，或者有没有可能使用多个 _document.js？

最佳答案

而不是多个_document.js文件，您可以拥有一个具有动态输出的文件。

具体来说，您可以检查 pathname传递给getInitialProps()的对象的属性自定义方法_document.js ，然后从那里确定该页面是主页还是文章。

更新:这在 Next.js v2.4.5(当前稳定版本)中不起作用，但它在 v3.0.1-beta.1 中起作用。

因此，就您而言，它可能看起来像这样:

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'
import flush from 'styled-jsx/server'

const businessPrefix = 'og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#';
const articlePrefix = 'og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#';

export default class MyDocument extends Document {
  static getInitialProps ({ pathname, renderPage }) {
    const {html, head, errorHtml, chunks} = renderPage()
    const styles = flush()
    return { pathname, html, head, errorHtml, chunks, styles }
  }

  render () {
    return (
     <html>
       <Head prefix={this.props.pathname === '/' ? businessPrefix : articlePrefix}/>
       <body>
         <Main />
         <NextScript />
       </body>
     </html>
    )
  }
}

查看工作示例 https://next-test-peusycafcq.now.sh/和 https://next-test-peusycafcq.now.sh/article 。 (在每个页面上右键单击并查看源代码可查看<head>标签中的正确前缀，请参阅https://zeit.co/KYilgchYUEorC1g8s2HO4ALi/next-test/peusycafcq/source查看完整的源代码。)

另请参阅https://github.com/zeit/next.js/blob/3a9c419160c33613cadf3e44b0aba82767c44d3a/readme.md#custom-document和 https://github.com/zeit/next.js/blob/3a9c419160c33613cadf3e44b0aba82767c44d3a/readme.md#fetching-data-and-component-lifecycle

关于javascript - 用于开放图谱标记的几个 _document.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44017120/

24 4 0
文章推荐： c++ - 如何使用作为参数传递的信息来构建在其他 CPP 文件中定义的字符串
文章推荐： html - css 在正方形图像下创建圆形阴影
文章推荐： CSS 背景放置
文章推荐： c++ - VS 2017错误C2664 map 插入尝试
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com