有時候，我們在做專案時，總會有會員的需求，大概上就是指有些內容只有登入過的使用者能夠瀏覽，今天我們就要來實作這樣的流程。 在 Gatsby 中，我們透過 API...
安裝 VS code 開始前，不例外的就是設定環境，這邊先安裝 VS Code (Visual Studio Code)，因為藉由工具可以快速的安裝與檢測 Re...
終於來到尾聲了，今天我們將對 Next.js 來做一番介紹，介紹完後，我們會跟這二十九天來的戰友 Gatsby 來做一次簡單的比較，最後會告訴大家，什麼時候該選...
什麼是 Gatsby ? Gatsby 是一個 日本男性化妝品牌 現代化開發網站的網站產生系統，它擁有著完整、豐富且開源的生態系，且基於 React + Gra...
今天我們終於要來點實作啦，前兩天介紹的心癢癢，今天終於能初窺 Gatsby 的風采 ！ 開發環境建置與說明 在進行實作之前，我建議大家對以下幾點有個基本的認識...
為什麼要寫這系列的文章？ 稍有經驗的開發者，可能都對 SPA ( Single Page Application ) 不會太陌生，其原理都是藉由廣為人知的 J...
今天我們會在 React 方面多著墨，會講解如何在 React 專案中調整樣式，還有有哪些方式能去調整，同時也會講解如果在 Gatsby 專案中，該怎麼使用這些...
前兩天我們都在提如何撈取資料到站點內，就有細心的讀者會問，但我不太會寫 GraphQL 啊，有沒有相關的輔助工具能幫忙我開發呢？ 嘿，沒錯，那就是今天的主題 G...
今天我們將融會貫通，利用前兩章所學，建立一個擁有三個頁面的簡易網站，並導入一個外掛作為這樣網站的基礎樣式，話不多說，就讓我們開始吧 ！ 建立環境並導入外掛 根據...
今天我們要針對專案架構做一個基本的認識，而下篇會講一些 React 的基礎觀念，例如如何建立一個元件、如何在 React 專案裡添加樣式、如何由父元件傳值給子組...
不知道有沒有細心的讀者發現，我們在做部落格或一些簡單的入門專案時，都沒有圖片的存在？人都是視覺的動物，對於一個熱門的部落格來說，怎麼可以缺少了圖片呢？ 今天我們...
經由前面幾個章節，我們學會了 創建一個 Gatsby 的專案 建立頁面與元件 為元件增加樣式 為專案增加套件 使用 GraphQL 來查詢資料 如何動態的建立...
在前一章節中，我們使用了官方提供的主題去快速建立了一個部落格，後續幾個章節中，我們要建立一個主題，並將它放到 NPM 上供人下載使用。 設置工作區 首先，我們要...
身為一個專業的網站，怎麼可以讓使用者在我們的網站中迷路了呢？所以今天我們要來做導覽列 ( Nav Bar )，我們會用 Gatsby 中的資料來動態的產生，而資...
今天我們要與鼎鼎大名的 WordPress 進行串接，將 WordPress 站內的資料藉由 GraphQL 來撈取，並在 Gatsby 專案中，將這些資料做一...
今天，我們要把樣式套用上去，並且幫做好的主題發佈到 NPM 上去供使用者使用，也會是建立屬於自己的主題的最後一章，就讓我們開始吧！ 安裝相關套件並設定 首先我們...
今天我們要來學習如何使用主題，先前我們辛辛苦苦安裝了很多套件、調整了很多設定、寫了不少組件，才做出一個較為基礎的部落格版型，而如果我們套用主題，可能在短短一小時...
這邊的 EC 指的是 Electronic Commerce，也就是所謂的電子商務，我們將用一到兩章節的篇幅來介紹如何用 Gatsby 來建立一個基礎的電子商務...
[Day 11] - 靜態查詢 ( Static Query ) 今天我們要來談談有別於頁面查詢的另一種方法，叫做靜態查詢 ( Static Query )，至...
昨天我們完成了一個基本的購物流程，但程式碼內有著不安全的問題，今天我們要用 .env 的形式來規避這個風險，至於怎麼做呢？就讓我們看下去吧！ 補充說明一下 Sk...
昨天介紹了如何在 React 中設定樣式，今天我們就來講講 Component 吧 ！ 對於這部分較為陌生的讀者可能會有這樣一個疑問，為什麼要建構元件？ 建構元...
昨天我們完成了第一個簡易版網站，但是，沒有資料的網站，就沒有靈魂！！！ 所以我們要來介紹 Gatsby 關於資料的部分啦，就如第一天所言， Gatsby 有一個...
昨天我們套用 typography 這個 Plugin 來為我們的網站做全局的基礎樣式處理，並創建了 contact & about 兩個頁面，但樣式上...
昨天我們介紹了如何在 Gatsby 使用 GraphQL 來進行撈取資料，但在 Gatsby 中其實對於撈資料的方式是有區分的唷，我們昨天使用的叫做 頁面查詢...
昨天藉由 gatsby-source-filesystem 這套外掛，我們能看到在 Folder底下諸多 File 的詳細資料，也藉這些資料製作了簡單的畫面，今...
[Day 14] - 建置第一個 Blog - 文章內頁 在前一篇文章中，我們建立了一個還不錯的列表頁，但我們絕對不滿足於此，今天，我們要用更聰明的方式來建立頁...
在前一章節的尾聲，我們成功地在文章節點中加入 Slug ，今天我們要來用這些資訊建立一個共用的頁面，根據點擊的文章 Slug 來帶入對應的內容，那就讓我們開始吧...
呼，想當初在鐵人賽開賽前還在猶豫到底要不要開賽呢？參賽後是要寫什麼主題呢？ 一探 React Native 、React 百寶箱 blablabla 太多想寫的...
前一篇文章，我們成功的建立了環境，今天我們要來添加一些靜態資料到專案中，並用這些資料來創建一些頁面。 將資料添加到主題中 首先，我們在 Gatsby-theme...
What is World Smile Day? The name itself may give some clues as to what this spe...
chasel1020
eyelash*睫毛
iThome鐵人賽
看影片追技術