0

我在这里和那里找到了一些关于从 Contentful 采购到 NextJS 的指南，您可以在其中为静态博客提供内容。这是一个起点。

但对于单页内容，我无法使用 API 获得任何结果。不知道为什么。

这是我正在处理的代码的一些摘录，其中包含用于解释结构的注释。

// components/layout.js
(...)

import client from '../utils/contentful/client' // <-- This imports the call for contentful [const contentful = require('contentful')]

// The function bellow is supposed to reach the content and export it as a props, right?
export async function getStaticProps({entryId}) {
  const paginas = await client
  .getEntries({ content_type: "paginas" })
  .getEntry({ entry_id: entryId })
  .then((response) => response.items)
  return {
    props: {
      paginas
    },
  }
}

// This function bellow is called within the <Footer /> where I pass the entry_id as a props
export function ContatoPage({ pagina }) {
  getStaticProps(pagina) 
    // Is this how it works? Can I call this function getStaticProps() here so the 
    //props will be reached in the constant bellow?
  
const { titulo, content } = paginas.fields
  return (
    <Box>
      <Heading>{titulo}</Heading>
      <p>{content}</p>
    </Box>
  )
}


// There's a static contact info page hanging on every footer and I'm trying to fetch it's values from Contentful.

function Layout( ... ) {
return (
(...)
<Footer>
  <ContatoPage pagina="<entry_id>" /> // this is where I pass the string value for the page I'm trying to reach.
</Footer>
} 

export default Layout

任何想法或评论将不胜感激。

4

1 回答 1

1

我在解决这个问题时遇到了很多麻烦，感谢@stefan-judis，他指出了 getEntries 和 getEntry 的误用，我在方法上取得了领先地位，可以更好地解决这个问题。

事实上，它是有文档的，但对于像我这样的初学者用户来说，有时获取内容的文档可能有点奇怪，因为获取内容的 API 和方法数量众多。

我所做的对我有用的是设置一个异步函数，我在其中使用查询调用条目。我习惯于使用 graphQL 通过 Gatsby 查询内容，所以我误解了逻辑——就像我说的那样，没有足够的经验。

// client-contentful.js <-- This is a simple caller for the client
const { createClient } = require('contentful')

const client = createClient({
  space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE,
  accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN
})

module.exports = client

// ***.js
import client from 'client-contentful.js'

// Set content for the page 
export async function getStaticProps() {
  let data = await client.getEntries({
    content_type: 'paginas', // <-- set content_type
    'fields.slug': 'inicio'  // <-- filter the page with the slug (you can pass it as a props too)
  })
  return {
    props: {
      pagina: data.items[0] // <-- this will set the query as a prop
    }
  }
}

export function Page({ pagina }) {
  const { titulo, slug, section } = pagina.fields

      return (
        <main id={slug}>
            <h1>{titulo}</h1>
            <RenderSection section={section} />

        </main>
    )
}

您可以通过多种方式使用它，因为它记录在其他地方。这是我经过一番努力后找到的解决方案。

现在，我仍然对部分部分有问题，我的页面中有我想在映射中呈现的条目。现在正在处理它。

于 2020-12-10T22:43:45.817 回答