Gatsby.js 未来的网页09:Index页面

栏目: 前端 · 发布时间: 6年前

内容简介:上一篇中,我们用GraphiQL测试了GraphQL的查询。今天,我们就要用这些查询来打造一个Index页面。打开/pages/index.js,之前我们加入了Link,现在要使用GraphQL来取得资料,你可以参考/templates/post.js,两者很类似,差别在于,post是取得单篇文章资料,而index是取得多篇文章资料:

Gatsby.js 未来的网页09:Index页面

上一篇中,我们用GraphiQL测试了GraphQL的查询。今天,我们就要用这些查询来打造一个Index页面。

视频教学连结

加入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邦帮忙铁人赛繁体


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Node.js实战

Node.js实战

[美] Mike Cantelon、[美] TJ Holowaychuk、[美] Nathan Rajlich / 吴海星 / 人民邮电出版社 / 2014-5 / 69.00元

服务器端JavaScript?没错。Node.js是一个JavaScript服务器,支持可伸缩的高性能Web应用。借助异步I/O,这个服务器可以同时做很多事情,能满足聊天、游戏和实时统计等应用的需求。并且既然是JavaScript,那你就可以全栈使用一种语言。 本书向读者展示了如何构建产品级应用,对关键概念的介绍清晰明了,贴近实际的例子,涵盖从安装到部署的各个环节,是一部讲解与实践并重的优秀......一起来看看 《Node.js实战》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具