使用vite安裝環境 在terminal終端機輸入npm create vite@latest安裝後依照指令自行取名(這裡取名sample)後選擇react j...
JS縮寫 //函式縮寫 const obj = { myName: "obj", fn: function () { //可縮寫...
以下為個人學習筆記 如有錯誤 還請不吝指教 感謝您的閱讀 為什麼要學習React?讓JS管理資料，畫面由Jsx處理 資料跟畫面分開管理有重複的地方可以做成元件...
各位大神們好! 第一次發文，如有冒犯的地方請見諒 小弟目前在 react 環境下使用 npm react-modal 套件然後想要在使用者點擊電影圖時以 mod...
安裝 VS code 開始前，不例外的就是設定環境，這邊先安裝 VS Code (Visual Studio Code)，因為藉由工具可以快速的安裝與檢測 Re...
What is World Smile Day? The name itself may give some clues as to what this spe...
呼，想當初在鐵人賽開賽前還在猶豫到底要不要開賽呢？參賽後是要寫什麼主題呢？ 一探 React Native 、React 百寶箱 blablabla 太多想寫的...
終於來到尾聲了，今天我們將對 Next.js 來做一番介紹，介紹完後，我們會跟這二十九天來的戰友 Gatsby 來做一次簡單的比較，最後會告訴大家，什麼時候該選...
昨天我們完成了一個基本的購物流程，但程式碼內有著不安全的問題，今天我們要用 .env 的形式來規避這個風險，至於怎麼做呢？就讓我們看下去吧！ 補充說明一下 Sk...
這邊的 EC 指的是 Electronic Commerce，也就是所謂的電子商務，我們將用一到兩章節的篇幅來介紹如何用 Gatsby 來建立一個基礎的電子商務...
今天我們要與鼎鼎大名的 WordPress 進行串接，將 WordPress 站內的資料藉由 GraphQL 來撈取，並在 Gatsby 專案中，將這些資料做一...
有時候，我們在做專案時，總會有會員的需求，大概上就是指有些內容只有登入過的使用者能夠瀏覽，今天我們就要來實作這樣的流程。 在 Gatsby 中，我們透過 API...
身為一個專業的網站，怎麼可以讓使用者在我們的網站中迷路了呢？所以今天我們要來做導覽列 ( Nav Bar )，我們會用 Gatsby 中的資料來動態的產生，而資...
不知道有沒有細心的讀者發現，我們在做部落格或一些簡單的入門專案時，都沒有圖片的存在？人都是視覺的動物，對於一個熱門的部落格來說，怎麼可以缺少了圖片呢？ 今天我們...
今天，我們要把樣式套用上去，並且幫做好的主題發佈到 NPM 上去供使用者使用，也會是建立屬於自己的主題的最後一章，就讓我們開始吧！ 安裝相關套件並設定 首先我們...
上一個章節，我們完成了將資料轉變為列表頁、內頁，今天我們要來把昨天做的內頁再做一些微調，新增一個時間顯示的邏輯，並且將 Gatsby-theme-events...
昨天我們完成了 Slug 的添加跟靜態資料的讀取，今天我們要建立一個頁面模板來動態的創建頁面，話不多說，就直接來進入主題吧！ 使用 createPages 來動...
前一篇文章，我們成功的建立了環境，今天我們要來添加一些靜態資料到專案中，並用這些資料來創建一些頁面。 將資料添加到主題中 首先，我們在 Gatsby-theme...
在前一章節中，我們使用了官方提供的主題去快速建立了一個部落格，後續幾個章節中，我們要建立一個主題，並將它放到 NPM 上供人下載使用。 設置工作區 首先，我們要...
今天我們要來學習如何使用主題，先前我們辛辛苦苦安裝了很多套件、調整了很多設定、寫了不少組件，才做出一個較為基礎的部落格版型，而如果我們套用主題，可能在短短一小時...
經由前面幾個章節，我們學會了 創建一個 Gatsby 的專案 建立頁面與元件 為元件增加樣式 為專案增加套件 使用 GraphQL 來查詢資料 如何動態的建立...
在前一章節的尾聲，我們成功地在文章節點中加入 Slug ，今天我們要來用這些資訊建立一個共用的頁面，根據點擊的文章 Slug 來帶入對應的內容，那就讓我們開始吧...
[Day 14] - 建置第一個 Blog - 文章內頁 在前一篇文章中，我們建立了一個還不錯的列表頁，但我們絕對不滿足於此，今天，我們要用更聰明的方式來建立頁...
昨天藉由 gatsby-source-filesystem 這套外掛，我們能看到在 Folder底下諸多 File 的詳細資料，也藉這些資料製作了簡單的畫面，今...
前兩天我們都在提如何撈取資料到站點內，就有細心的讀者會問，但我不太會寫 GraphQL 啊，有沒有相關的輔助工具能幫忙我開發呢？ 嘿，沒錯，那就是今天的主題 G...
[Day 11] - 靜態查詢 ( Static Query ) 今天我們要來談談有別於頁面查詢的另一種方法，叫做靜態查詢 ( Static Query )，至...
昨天我們介紹了如何在 Gatsby 使用 GraphQL 來進行撈取資料，但在 Gatsby 中其實對於撈資料的方式是有區分的唷，我們昨天使用的叫做 頁面查詢...
昨天我們完成了第一個簡易版網站，但是，沒有資料的網站，就沒有靈魂！！！ 所以我們要來介紹 Gatsby 關於資料的部分啦，就如第一天所言， Gatsby 有一個...
昨天我們套用 typography 這個 Plugin 來為我們的網站做全局的基礎樣式處理，並創建了 contact & about 兩個頁面，但樣式上...
今天我們將融會貫通，利用前兩章所學，建立一個擁有三個頁面的簡易網站，並導入一個外掛作為這樣網站的基礎樣式，話不多說，就讓我們開始吧 ！ 建立環境並導入外掛 根據...
eyelash*睫毛
chasel1020
iThome鐵人賽
看影片追技術