首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何与盖茨比一起使用直接语

如何与盖茨比一起使用直接语
EN

Stack Overflow用户
提问于 2018-05-07 16:34:29
回答 1查看 1.3K关注 0票数 2

如何在getsby.js中使用直接数据

我已经安装了一个Directus应用程序,并添加了表和数据/列,但是我不知道如何在gatsby.js中使用它,我已经在jsx中构建了这样一个模板:

代码语言:javascript
运行
复制
const path = require('path')

exports.createPages = ({ boundActionCreators, graphql }, { urlPrefix }) => {
 const { createPage } = boundActionCreators

return new Promise((resolve, reject) => {
resolve(
  graphql(
    `
      {
        allDirectusPost {
          edges {
            node {
              id
              title
              author
              content
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      console.error('GraphQL query returned errors')
      reject(result.errors)
    }

    result.data.allDirectusPost.edges.forEach(edge => {
      try {
        let node = edge.node
        let path = `posts/${node.id}`
        createPage({
          path,
          layout: 'index',
          component: path.resolve('src/templates/post.jsx'),
          context: {
            post: node,
          },
        })
        console.log(`Generated page '${path}'`)
      }
      catch (error) {
        console.error(`Failed to generate page posts/'${path}': ${error}`)
      }
    })
  })
)
})
}

我在gatsby.js中有一个主页静态站点,如下所示

代码语言:javascript
运行
复制
import React from 'react'
import Link from 'gatsby-link'
// import postsTemplate from '../templates/post.jsx'

const IndexPage = () => (
  <div>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.000</p>
    <p>Now go build something great.</p>
    <post />
    <Link to="/page-2/">Go to page 2</Link>
  </div>
)

export default IndexPage

如何调用gatsby文件中的直接数据?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-10 18:49:04

对于Directus表中的每个项,将根据src/templates/post.jsx组件创建一个新页面。这将是IndexPage的一组完全独立的页面。

从Directus获取页面的步骤非常类似于从Markdown获取源页面的步骤。我建议您再读一次https://www.gatsbyjs.org/docs/adding-markdown-pages/ (虽然它看起来像您读过它,因为您的gatsby-node.js代码看起来是从那里借来的)。在posts.jsx中,您不需要查询markdownRemark(frontmatter: { path: { eq: $path } }),而是要查询allDirectusPost(edges: { node: {id: {eq: $path } } })

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50218760

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档