Gatsby.js 未來的網頁09：Index頁面

摘要： 上一篇中，我們用GraphiQL測試了GraphQL的查詢。今天，我們就要用這些查詢來打造一個Index頁面。 視訊教學連結 YouTube 微博 騰訊 B站 加入GraphQL 開啟/pages/index.js，之前...

上一篇中，我們用GraphiQL測試了GraphQL的查詢。今天，我們就要用這些查詢來打造一個Index頁面。

視訊教學連結

• ofollow,noindex" target="_blank">YouTube
• 微博
• 騰訊
• B站

加入GraphQL

開啟/pages/index.js，之前我們加入了Link，現在要使用GraphQL來取得資料，你可以參考/templates/post.js，兩者很類似，差別在於，post是取得單篇文章資料，而index是取得多篇文章資料：

export const pageQuery = graphql`
query IndexQuery {
allMarkdownRemark(limit: 10) {
edges {
node {
id
frontmatter {
title
path
}
}
}
}
}
`

其中id是自動產生的，用於Link連結，因為每個component都需要一個唯一的Key。

接著就可以將GraphQL取得的資料交給IndexPage使用，完全的index.js程式如下：

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'

const IndexPage = ({data}) => (
<Layout>
<h1>Hi guys</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<Link to="/page-2/">Go to page 2</Link>
<Link to="/page-3/">Go to page NEW</Link>

<h2>Index</h2>
{data.allMarkdownRemark.edges.map(post => (
<Link
key={post.node.id} 
to={post.node.frontmatter.path}>
{post.node.frontmatter.title}
</Link>
))}
</Layout>
)

export const pageQuery = graphql`
query IndexQuery {
allMarkdownRemark(limit: 10) {
edges {
node {
id
frontmatter {
title
path
}
}
}
}
}
`

export default IndexPage

執行 gatsby develop 之後，便能在index頁面看到那兩篇文章的連結。

本文參與 iT邦幫忙鐵人賽 。 繁體