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