Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
316 views
in Technique[技术] by (71.8m points)

json - 如何在Gatsby中使用JSON文件创建动态内容/页面?(How to create dynamic content/Pages using JSON files in Gatsby?)

I wish to create a complex routing in Gatsby using multiple JSON files:

(我希望使用多个JSON文件在Gatsby中创建一个复杂的路由:)

First JSON file is based on routing:

(第一个JSON文件基于路由:)
File Location: /src/data/route.json

(文件位置: /src/data/route.json)

[
  {
    type: "Article",
    title: "Post One",
    slug: "/post-one",
    data: "post-one.json"
  },
  {
    type: "Course",
    title: "Course One",
    slug: "/course-one",
    data: "course-one.json"
  },
  ...
]

It is the Json file which contains route data.

(这是包含路径数据的Json文件。)

Now in post-one.json file contains all the required data about the post that is required to render the post.

(现在,在post-one.json文件中包含呈现该帖子所需的有关该帖子的所有必需数据。)

File Location: /src/data/articles/post-one.json

(文件位置: /src/data/articles/post-one.json)
Routes: /post-one

(路线: / post-one)

{
  title: "Post One",
  head: {
    title: "Some title here",
    image: "/path/to/image.jpg",
    description: "Some description here..."
  },
  body: {
    // Body data here
    ...
  }
}

But the main problem arises now as the courses is the collection of the different chapters.

(但是现在主要的问题出现了,因为课程是不同章节的集合。)

Now for the main course page:

(现在进入主课程页面:)
File location : /src/data/courses/course-name.json

(文件位置: /src/data/courses/course-name.json)
Route is like: /course-name

(路线类似于: / course-name)

{
  title: "Course One",
  head: {
    title: "Some title here",
    image: "/path/to/image.jpg",
    description: "Some description here..."
  },
  info: {
    // Some info about the course...
  },
  chapter: [
    {
      title: "chapter one",
      slug: "/:courseId/chapter-one",
      description: "Something about the chapter"
    },
    {
      title: "chapter two",
      slug: "/:courseId/chapter-two",
      description: "Something about the chapter"
    },
    ...
    //Multiple chapters in the same course
  ]
}

Now the chapters will have the data like

(现在,这些章节将具有如下数据)
File location : /src/data/chapters/chapter-name.json

(文件位置: /src/data/chapters/chapter-name.json)
Route: /courseId/chapter-name

(路线: / courseId /章名)

{
  title: "Chapter one",
  description: "Some description here",
  body: {
    ...
    //Content for the body that can be rendered easily
  }
}
  ask by Prashant Singh translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神答复

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...