上一篇中，我們完成了一個簡單的Index頁面。今天，我們再加一些功能：1）在文章中設定是否為草稿，若是，則index不顯示，這可以透過GraphQL的filter實現；2）為文章加入日期，讓index可以按日期以倒序排列文章，這可以透過GraphQL的sort實現。

Index列表

將連結列表改為ul顯示

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

增加frontmatter

為兩篇blog文章加入新frontmatter：

---
path: '/blog-post-1'
title: 'My post'
draft: false
date: "2018-10-22"
---

GraphQL的filter和sort

修改首頁的index.js當中的GraphQL查詢，先加入前面新增的frontmatter（draft和date）。再在limit後之後加入filter和sort：

export const pageQuery = graphql`
  query IndexQuery {  
    allMarkdownRemark(
      limit: 10 
      filter: { frontmatter: { draft: { eq: false } } }
      sort: {fields: frontmatter___date order: DESC}
    ) {
      edges {
        node {
          id
          frontmatter {
            title
            path
            draft
            date
          }
        }
      }
    }
  }
`

filter可以用條件限制查詢內容。

sort可以根據fields加order進行順序或倒序。

同步發表於： NodeJust.com