除了使用 Supabase 官方雲端平台,你也可以選擇在自己的伺服器上部署 Supabase!這就像是把整個 Supabase 搬到你自己家裡,完全由你掌控。...
在前面的文章中,我們已經學會了 Supabase CLI 的基本安裝和使用。今天要為大家整理一份完整的常用指令清單,讓你在開發過程中能夠快速查找和使用這些實用...
在前面的文章中,我們已經學會了 Supabase CLI 的基本安裝和使用。今天要為大家整理一份完整的常用指令清單,讓你在開發過程中能夠快速查找和使用這些實用...
在上集中,我們學會了如何安裝、設定 Supabase CLI 以及基本指令的使用。這一集將用最簡單的方式示範如何本地建立資料表、同步到雲端,以及進行資料填充。...
Supabase CLI 是開發者在本地環境中管理 Supabase 專案的強大工具。透過 CLI,你可以在本地建立完整的 Supabase 開發環境,包括資...
前言 今天繼續開發,重點著重在:初步探索Tailwind與理解App.vue。 工作重點 Tailwind 之前的專案架構下是使用了boostap切版,這次先諮...
今天已經是第 15 天了,轉眼間鐵人賽也達成了二分之一的進度。 今天開始要來實作第二個專案,我們要來做的是一個即時天氣 App。這次除了一樣使用 React N...
在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時,有UI design跟design吵,自己開發跟自己吵的狀況。 因為我們在開發時常常面對到css的...
本系列文章將會把怎麼建構巴哈瀑布流、所有遇到的問題毫不保留全部紀錄 之前非本科菜雞如我,用 React 做了個失智列車網站,就去投了兩個前端實習(講白了整個...
這是「Modern Blog 30 天」系列第 26 篇文章。 上一篇加完了留言系統,這篇我們繼續加入另一個酷炫功能:「Command Palette 指令面板...
更改網頁的 title,建立 Meta 元件:(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...
繼續加其他文字資料到圖卡上,增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...
將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後,要秀出這些資料在螢幕上,需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...
讀取 Supabase 資料首先安裝 supabase-js: npm i @supabase/supabase-js 接著,在根目錄,建立 client.j...
TL;DR 這是「Modern Blog 30 天」系列第 13 篇文章,上一篇我們使用 Tailwind CSS 美化了首頁樣式,這篇我們會繼續美化文章內頁樣...
在先前 Day07 - Display 的大小事 有針對 Display 屬性做說明,Flex 也是 Display 屬性之一,那麼開始今天的 Flex 章節...
新增 Navbar 至每個網頁頂端:利用 Next 的 Layout 元件,來建立每個網頁都可以看到的 Navbar。新增 components/Layout....
TL;DR 這是「Modern Blog 30 天」系列第 12 篇文章,上一篇我們使用 Tailwind CSS 美化了 navbar, footer 等全站...
TL;DR 這是「Modern Blog 30 天」系列第 11 篇文章,上一篇我們在 Next.js blog 搭配 Tailwind CSS 加入了「暗黑模...
寬度/高度單位 昨日 Day12 - 掌握空間與距離,版面不再跑版 有提到 Tailwind CSS 中,間距的數字會以 4 的倍數為單位,舉例來說:1.25...
這篇我們來讓上一篇安裝完的 Tailwind CSS 支援暗黑模式(深色模式、Dark mode)。 並搭配 next-themes 管理主題切換以及偏好主題的...
這個 app 將從 supabase 讀取資料,在透過自製 Tailwind CSS 元件,呈現類似 netflix,hulu 的影像畫廊(image gall...
TL;DR 這是「Modern Blog 30 天」系列第 9 篇文章,上一篇我們讓 Contentlayer 也支援了 MDX 格式。這篇讓我們來安裝 Tai...
邊框 善用邊框對於元素有很好的輔助效果,像是方形的方塊加上圓角可以使元素看起來更圓滑,input 標籤加上 :foucs改變邊框顏色讓使用者清楚目前點擊的元素...
背景 Background 語法相信大家都不陌生,最常使用在調整背景顏色及背景圖片的設定。Tailwind CSS 預設許多顏色,詳細可查閱 Tailwind...
位置 什麼是 Position ?用於控制元素在 DOM 中的位置。 Position 特性 static fixed absolute relative...
什麼是 Display? 每一種 HTML 標籤都有預設的 Display 屬性,這些 Display 會影響網頁上的排版,要學會網頁排版我們得先了解基本的...
配置 先前有提到 Tailwind CSS 是一套以 utility-first 為基礎的 CSS 框架,它的設計從一開始就考慮到定制。 如何設定參數 透過終...
什麼是 JIT? JIT 為 Just In Time 的縮寫,開發的專有名詞可以比喻成即時編譯,即時生成樣式的 class。這個即時引擎是 Tailwind...
使用方式 CDN npm 指令 什麼是 CDN?內容傳遞網路(CDN)是指一組分佈在不同地理位置的伺服器,協同工作以提供網際網路內容的快速交付,直接引用...