GraphQL Filter & Sort

Gatsby.js 未來的網頁10:GraphQL Filter & Sort

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

Gatsby.js 未來的網頁10:GraphQL Filter & Sort

Index列表

將連結列表改為ul顯示

增加frontmatter

為兩篇blog文章加入新frontmatter:

GraphQL的filter和sort

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

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

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

No comment yet, add your voice below!


Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Comment *
Name *
Email *
Website

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料