本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...
成品參考: https://linsheng24.github.io/gatsby-blog/ 今天實作留言版的部分,因為react不同於文章,畫面的改變必須馬...
今天實作首頁的顯示舊文章的按鈕功能。 在實作前想先介紹react的hook這個東西:在去年以前,react的組件實作都是使用Class component,也就...
延續上一篇,今天來完成index頁面。 首先,到http://localhost:8000/___graphql先做好查詢語法 query indexQue...
今天開始把網頁跟Contentful做連結。 首先,到Contentful創造一個新的space(或是把舊的清空)。到Content Model做以下配置...
今天的動作比較瑣碎,但還是簡單說一下實作的過程,如果內容不夠清楚,也可以再本文的結尾直接把我推上去的git給抓下來繼續Day24以後的內容。 首先,我的部落格...
在之前,我們透過了Contentful提供的starter,快速的幫我們完成了"架好部落格"這件事。然而卻讓我們有點知其然而不知其所以然。...
今天我們停下腳步,來思考一下我們要從無到有實作出哪些功能。 首頁最基本的文章列表功能,然後作個簡單的分頁。 作者介紹欄: 圖片、姓名、社群url 文章...
在Day19,我們見識了Gatsby強大的功能,使用官方提供的starter,快速的做出了一個部落格。而這個部落格本身,會包含我們所需要的資料,是一個靜態的網頁...
今天,我們要用很快速的流程,來體驗一下Gatsby強大的地方,從頭快速的做出一個懶人的blog,並且不用打上一行程式碼 首先,在command linend...
首先,在Day.17中,我們已經有辦法藉由graphQL來抓取文章資料了,接續上次的內容。 今天我們來提到一個gatsby一個十分重要的功能,就是利用資料去創建...
今天試著從我們的gatsby專案來串接我們的graphQL graphQL的API來獲得文章資料 首先,創建我們的gatsby專案 gatsby new my-...
mutation的部分,除了需要修改原先的CreatePost,還相新增一個RemovePost來刪除文章 修改完的程式碼如下: app/graphql/typ...
根據Day14的新的架構,我修改我的/app/graphql/query/query_type.rb這支檔案 app/graphql/type/query_ty...
今天要修改一下我們的資料架構,新增一張types的表,紀錄文章的類別,然後在原先的posts表,新增一個type欄位,來紀錄文章類別的關聯。 原先,我們在con...
首先先調整 gatsby-node.js在 gatsby-source-wordpress plugin 有建議寫法 以下是調整過的gatsby-node.js...
取得 wordpress 的 pages 資訊訪問 {{wordpress 網域}}/wp-json/wp/v2/pages即可看到所有頁面的資訊 圖中標示這...
由於昨天阿姊仔,已開始問起部落格欸,於是先把樣板發步上去,讓他看到外表好了,所以今天是利用 Netlify 去部屬網站。 首先到 官網註冊帳號 登入後在 da...
一個GraphQL的query語法可能會長得像這樣: { me { name appearsIn } } 和他的回傳結果可能會是長這樣...
GraphQL是facebook在2015年推出的一種新型態的API,那為甚麼要使用這種api呢? RESTful API不好嗎? RESTful的確有一...
今天新增了deleteItem的方法,並在JSX中加入我們的刪除按鈕,並綁到deleteItem上。這邊用到官方文檔給出的一個方法,可以同時間事件跟參數綁到監聽...
這兩天會開始做一點小東西,做個react的總結,為了實作上的方便性,可能會用上前幾個文章沒講到的語法但不會都詳細說明,我會簡單的說一下功能,有興趣的再麻煩去看看...
今天要講到的是react中的事件監聽,在react中,只要在JSX的元素標籤內,根據特定方法給出的屬性名,給予其所需執行的方法,就會在事件觸發時做執行了,舉個例...
props 當父元件想要傳參數給子元件,子元件想要從父元件那邊得到資料時,我們就會用到props這個東西了~用法十分簡單,首先,我們新增一個檔案src/...
因為gatsby是基於React,所以在使用上需要會一些React語法,而且了解React也可以讓自己開發起來更有彈性一點(畢竟它都提供了!不用就浪費了,蠻合理...
Gatsby.js是一個靜態網站的生成工具,整合了React框架、webpack 以及GraphQL 這種比較新型態的 API 介面。因為其生成的是純靜態的頁面...
上一篇中,我們用GraphiQL測試了GraphQL的查詢。今天,我們就要用這些查詢來打造一個Index頁面。 YouTube 影片 加入GraphQL 打開...
Gatsby提供了一個叫做 GraphiQL 的工具,幫助我們測試網站上的GraphQL查詢。GraphiQL提供一個可視化界面,讓我們可以直觀地看到查詢的結果...
上一篇中我們準備好了Markdown、post template,以及相應的一些GraphQL query,今天就要使用Gatsby提供的createPages...
Gatsby可以以Markdown作為資料來源自動產生頁面,這讓我們可以輕易的建立Blog之類的網站:寫blog只需寫markdown。 YouTube Vid...