如何在Gatsby中从单个json文件创建多个页面

前端之家收集整理的这篇文章主要介绍了如何在Gatsby中从单个json文件创建多个页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是node.js的新手并做出反应,但我喜欢gatsby.js.我已经按照我能找到的所有教程进行了操作,这是一个非常棒的工具.

但是我想要使用它的一个主要原因是我有一个包含1000个不同记录的文件json,我想为每个记录生成一个新页面.

我相信我已经得出结论,我需要了解更多有关gatsby-node.js文件的信息,并且我知道以下资源,但是有关于此主题的任何教程或其他示例可能更容易理解:

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-pages-in-gatsby-nodejs

解决方法

你所指的例子应该已经给你一个好主意.基本概念是导入JSON文件,在其上循环并为JSON源中的每个项运行createPage.所以给出一个示例源文件,如:

pages.json

[{
  "page": "name-1"
},{
  "page": "name-2"
}]

然后,您可以使用Node API为每个页面创建页面

盖茨比-的node.js

const path = require('path');
const data = require('./pages.json');

exports.createPages = ({ boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  // Your component that should be rendered for every item in JSON.
  const template = path.resolve(`src/template.js`);

  // Create pages for each JSON entry.
  data.forEach(({ page }) => {
    const path = page;

    createPage({
      path,component: template,// Send additional data to page from JSON (or query inside template)
      context: {
        path
      }
    });
  });
};

猜你在找的JavaScript相关文章