這份是我在使用Lovable做網站時，邊做邊紀錄的完整攻略，分享給需要的人。
給開發者/接案者的前言： Lovable 是一個強大的 AI 全端開發工具，要用它來賺錢，您必須清楚它的邊界在哪裡。這份指南將協助您完全掌控這個工具，從而自信地向客戶報價。
第一章：深度認識 Lovable
1.1 它是什麼？
Lovable (lovable.dev) 被稱為「GPT-4 時代的全端工程師」。 它與 v0.dev 或一般 AI 程式碼生成器最大的不同在於：它產出的不是片段的程式碼，而是一個「完整、可執行、已部署」的 Web App。- 核心技術堆疊 (Tech Stack)：它生成的預設架構是 React + Vite + Tailwind CSS + Shadcn UI（前端）以及 Supabase 或 Lovable Cloud（後端資料庫與認證）。這是目前現代化網頁開發的黃金標準。
- 主要功能：
- Text-to-App：用自然語言描述需求，生成完整網頁。
- Visual Editing：可以直接點擊畫面上的元素進行修改（例如：「把這個按鈕改成紅色」）。
- Backend Integration：一鍵整合後端 (Lovable Cloud/Supabase)，自動建立資料表 (Tables) 和 API。
- GitHub Sync：雙向同步。您可以把程式碼拉下來自己改，改完推上去，Lovable 也讀得懂（有限制）。
1.2 為什麼適合接案？
- 速度：傳統需要 3 天切版的 Landing Page，Lovable 只要 30 分鐘。
- 成本：大幅降低了初期的開發人力成本。
- 交付標準：它產出的程式碼相對乾淨（Clean Code），符合現代標準，客戶若要找人接手維護，不會太困難。
1.3 架構解密：為什麼需要兩個平台 (Zeabur & Supabase)？
很多初學者會困惑：「我都已經用 Zeabur 部署網站了，為什麼還要註冊 Supabase？」這是因為現代網站架構將「前端」與「資料」分開了。
- Zeabur (店面/外場)：
- 角色：網頁託管 (Web Hosting)。
- 功能：負責顯示畫面、處理動畫、讓使用者點擊。
- 限制：它不負責儲存永久資料。如果沒有資料庫，使用者重新整理頁面，剛剛輸入的資料就不見了。
- Supabase (倉庫/內場)：
- 角色：後端即服務 (BaaS - Database & Auth)。
- 功能：負責儲存會員帳號、商品資訊、訂單紀錄、圖片檔案。
- 必要性：它是網站的「大腦與記憶」。
- 它們如何串連？：
- 透過 API Key (鑰匙)。您必須把 Supabase 的鑰匙交給 Zeabur (透過環境變數設定)，這樣 Zeabur 上的網站才有權限去 Supabase 存取資料。
【小知識： Lovable Cloud vs. 自備 Supabase】
在接案實務中，選擇資料庫方案直接影響毛利與客戶滿意度。Lovable Cloud 的優勢在於開發零摩擦，AI 能直接操作表結構，適合極速交付的 MVP 專案；然而，若專案預期有高頻 API 調用或需長期託管，協助客戶註冊獨立的 Supabase 帳號則是更專業的做法。這不僅能利用 Supabase 較寬裕的免費層級（Free Tier）降低運作成本，更能實現「資料所有權轉移」，當專案交付後，客戶擁有完整的資料控制權，這對於建立長期信任與收取後續維護費至關重要。
第二章：接案生存法則（能做 vs. 不能做）
這是本指南最重要的一章。請背下來，這決定了您的案子會賺錢還是賠錢。
以下將常見需求按「推薦承接度」分級，供您快速判斷：
1. MVP / 原型開發 (極推薦 ★★★★★)
- 核心評估： 速度勝過細節。
- 執行策略： 客戶有創業點子想在一週內驗證市場，建議使用 Shadcn UI 標準組件快速交付。
2. 內部管理系統 (高推薦 ★★★★☆)
- 核心評估： 功能邏輯為主，視覺美感為輔。
- 執行策略： 庫存管理、簡易 CRM 等，強調資料連動與資料庫表格管理。
3. 動態資料網站 / 行銷頁 (推薦 ★★★★☆)
- 核心評估： 標準排版，內容為王。
- 執行策略： 房地產列表、職缺看板或需要串接 Email 收集的頁面。
4. 高度客製化設計 (慎接 ★★☆☆☆)
- 核心評估： CSS 調校耗時，AI 容易鬼打牆。
- 執行策略： 若客戶要求「像素級」對齊非標準網格系統的 Figma 稿，建議溝通引導客戶接受現代化標準 UI，否則修改成本將吞噬利潤。
5. 複雜整合與高資安應用 (不推薦 ★☆☆☆☆)
- 核心評估： 後端除錯成本極高，資安風險大。
- 執行策略： 如串接舊型 ERP 系統或銀行級資料。AI 產出的 RLS (資料列層級安全政策) 設定可能不夠嚴謹，需具備專業資安審核能力。
✅ 可以承諾客戶的項目 (Sweet Spot)
- MVP (最小可行性產品)：客戶有一個創業點子，想在 1 週內做出東西來驗證市場。
- 內部管理工具 (Internal Tools)：庫存管理、員工打卡、簡易 CRM。這類應用重視功能大於設計細節。
- 動態資料網站：房地產列表、職缺看板、簡單的電商（不含複雜金流邏輯）。
- 行銷 Landing Page：需要串接表單、Email 收集的頁面。
- 個人/作品集網站：標準排版，內容為王。
❌ 絕對不要輕易承諾的項目 (The Danger Zone)
- 高度客製化的「像素級」設計：如果客戶由設計師出了非常獨特、非標準 Grid 系統的 Figma 稿，Lovable 會讓您調 CSS 調到崩潰。建議：說服客戶使用「現代化標準 UI 組件 (Shadcn UI)」。
- 複雜的 WebGL/3D 動畫互動：例如像 Apple 官網那種捲動視差特效，Lovable 做不來，AI 也寫不好。
- 與舊系統的深度整合：客戶說：「我要串接我們公司 10 年前的 ERP 系統」。這需要大量後端除錯，AI 幫不上忙。
- 高併發/高安全性要求的應用：雖然 Supabase 很強，但 Lovable 生成的邏輯可能會有資安漏洞（如 RLS 設定不嚴謹），不適合處理銀行級資料。
第三章：實戰操作手冊
請依照此流程操作，以確保產出品質穩定。
階段一：專案啟動與 Prompt 工程
不要一開始就說「做一個像是 Airbnb 的網站」。AI 會迷失。請使用 「角色 + 目的 + 功能列表 + 設計風格」的公式。
黃金 Prompt 範例： 「你是一位專業的全端工程師。請幫我建立一個『線上家教預約平台』。 核心功能：
- 首頁：顯示英雄區塊 (Hero section)、特點介紹、熱門教師列表。
- 教師列表頁：可以透過『科目』和『價格』進行篩選。
- 預約功能：點擊教師可查看詳情並預約時間（先用 UI 模擬，不需真實金流）。 設計風格：使用簡約風格，主色調為深藍色 (#1e3a8a)，字體清晰，使用圓角卡片設計。請使用 Lucide React Icons。」
階段二：迭代與修正 (The Iteration Loop)
Lovable 是一個「對話式」開發工具。
- 由大到小：先生成整體版面，再針對單一區塊（Component）進行修改。
- 選取修改：不要只用文字描述。點擊預覽畫面中的元件，然後在對話框說：「把這個區塊的背景改成淺灰色」，這樣 AI 才知道你在指哪裡。
- 遇到 Bug 時：
- 不要只說「壞了」。
- 要說：「點擊按鈕後，右下角出現了紅色錯誤訊息，內容是 404 Not Found，請修復它。」
- 技巧：如果 AI 修不好，請它「加入 console.log 來除錯」，然後把 Console 的訊息貼給它看。
階段三：後端整合 (Supabase / Lovable Cloud)
這是 Lovable 最強大的地方，讓你的網站擁有記憶。
- 開啟整合：
- 在側邊欄尋找資料庫圖示。
- 狀況 A (傳統方式)： 如果您看到 "Connect Supabase"，請登入您的 Supabase 帳號進行連結。
- 狀況 B (新版方式)： 如果您看到 "Enable Lovable Cloud"，請直接點擊 "Enable Cloud"。
- 啟用成功後： 您會看到 "Explore Cloud" 按鈕。點擊它可以查看目前資料庫的內容（類似 Excel 的檢視介面）。注意：您其實不需要一直盯著後台。在 Lovable 的開發模式中，您只要在對話框下指令，AI 就會自動在 Cloud 裡建立所需的表格。
- 自然語言建庫 (最關鍵的一步)：
- 指令範例： 「我需要儲存使用者的預約資料。請幫我建立一個 bookings 資料表，欄位要有：使用者ID、教師ID、預約時間、狀態。」
- 發生了什麼事？： Lovable 會自動將這段話轉成 SQL 指令，在您的 Lovable Cloud 中建立真正的資料表，並幫您寫好前端連接的程式碼。
- 認證系統：
- 指令： 「請幫我製作登入和註冊頁面，使用 Authentication。」
- 它會自動生成包含 Email/密碼登入的完整流程。
3.5 Lovable Cloud 後台功能詳解 (The Dashboard)
當您點擊 "Explore Cloud" 進入後台時，您會看到以下選項，請務必了解它們的用途：
- Overview (總覽)
- 儀表板，顯示您的資料庫健康狀況和使用量。
- Database (資料庫)
- 這是網站的「大腦」。所有的表格（Table）和資料都在這裡。適合手動修正資料（如 Excel）。
- Users (使用者)
- 會員名冊。可在此查看註冊名單、刪除帳號或重設密碼。
- Storage (儲存空間)
- 雲端硬碟。存放圖片（大頭貼、產品照）或文件。
- Edge Functions (邊緣函數)
- 在伺服器端執行的程式碼。處理付款通知、寄信等後端邏輯。
- Secrets (金鑰/秘密)
- 保險箱。存放第三方 API Key（如 Stripe, Google Maps）。
- Logs (日誌)
- 除錯神器。查看網站錯誤訊息。
階段四：部署與交付 (Handoff) - Zeabur 實戰
Zeabur 是一個由台灣團隊開發的雲端部署平台 (PaaS)。簡單來說，它就像是「程式碼的自動管家」，你不需要懂複雜的伺服器設定（如 Linux 指令、Docker、Nginx），只要把你的程式碼交給它，它就會自動幫你把網站架設好，讓全世界都能看到。
所以對於中文開發者來說，Zeabur 是最直覺的選擇，支援度高且介面友善。部署步驟如下 :
Step 1: 同步到 GitHub (必要) 在 Lovable 右上角點擊 GitHub 圖示，選擇 "Create Repository" 並推送程式碼。 觀念釐清：GitHub 只是用來存程式碼，不需要在 GitHub 設定環境變數 (Secrets)，因為 GitHub 不會執行您的網站。
Step 2: 在 Zeabur 建立服務
- 登入 Zeabur Dashboard。
- 點擊 "Create Project" (建立專案)。
- 點擊 "Deploy New Service" (部署新服務) -> 選擇 "Git"。
- 搜尋並選擇您剛剛從 Lovable 建立的 GitHub Repository。
- Zeabur 會自動偵測這是 React/Vite 專案，通常不需修改 Build Command。
Step 3: 設定環境變數 (最關鍵的一步) 注意：此步驟是在 Zeabur 進行，不是 GitHub。這是為了告訴 Zeabur 你的資料庫在哪裡。
- 如何取得 Key？ (⚠️ 注意別跑錯)：
- ❌ 錯誤位置：不要點擊專案名稱旁邊的齒輪（那是一般專案設定）。
- ✅ 正確位置：請在 Lovable 編輯畫面的 側邊欄 (Sidebar) 尋找 資料庫圖示 (圓柱體或綠色水滴)。點擊後，在展開的面板中點選 Settings 或 Configuration 標籤。在這裡才會看到 Project URL 和 Anon Key。
- 在 Zeabur 設定：
- 點擊剛剛建立的服務卡片，切換到 "Variables" (變數) 頁籤。
- 新增變數：
- VITE_SUPABASE_URL: 填入剛剛複製的 Project URL。
- VITE_SUPABASE_ANON_KEY: 填入剛剛複製的 Anon Key。
- 重要： 變數名稱必須包含
VITE_開頭，Vite 打包時才會把這些變數寫入前端程式碼。
Step 4: 重新部署 設定完變數後，Zeabur 通常會自動觸發重新部署。如果沒有，請手動點擊 "Redeploy"。等待部署完成，點擊 Zeabur 提供的網址（例如 xxx.zeabur.app），您的網站就正式上線了！
Step 5: 綁定網域 (Domain) 在 Zeabur 的服務頁面，選擇 "Networking" 或 "Domain"。點擊 "Generate Domain" 獲得一個免費子網域，或者 "Bind Custom Domain" 綁定客戶買好的網址 (www.yourclient.com)。
第四章：常見問題與故障排除
Q1: AI 生成的畫面跑版了，怎麼修都修不好？
- 解法：不要試圖用文字微調 CSS。直接叫 AI：「將這個 Component 重寫，使用標準的 Flexbox 版面配置，簡化設計。」有時候「重寫」比「修改」更快。
Q2: 加上後端功能後，頁面變得很慢或報錯？
- 原因：通常是資料庫權限 (RLS - Row Level Security) 沒設好。
- 解法：去 Supabase/Lovable Cloud 後台檢查 Policies。或者對 Lovable 說：「請檢查資料庫的 RLS 設定，確保登入的使用者有權限讀取自己的資料。」
第五章：給客戶的報價策略與成本分析
在使用 Lovable 接案時，您的成本結構會改變：
- 開發時間：減少 70%。
- 溝通與除錯時間：增加 20%（AI 有時會鬼打牆，需要耐性測試）。
- 平台成本 (Hosting & Database)：
- Lovable 訂閱費：約 $20-$50 USD/月（接案者必備，為了移除浮水印和增加 AI 修改額度）。
- Lovable Cloud / Supabase 費用：
- 起步免費：適合開發期或小型 Demo。
- 用量計費 (Pay-as-you-go)：當專案上線、流量增加或資料庫變大時開始計費。
- 策略建議：若想幫客戶省錢，可協助客戶註冊他們自己的 Supabase 免費方案 (Connect Supabase)。Supabase 是一個獨立的資料庫服務商，它的免費層級通常比 Lovable 內建的更寬裕，且即使 Zeabur 換了，資料庫依然獨立存在，這對客戶來說是較好的保障。
報價建議： 不要因為開發快就大幅降價。您賣的是「解決方案」與「速度」。
- 策略 A (快速原型)：主打「3天交付」，收取快速加急費。
- 策略 B (功能導向)：依照功能點報價（登入系統 $X、購物車 $Y），不強調是用 AI 做的，強調的是源碼交付與可維護性。
第六章：熱門功能實作範例
這裡提供幾個常見的接案需求 Prompt，您可以直接修改使用。
6.1 線上訂位系統 (Reservation System)
這是餐廳或服務業最愛的功能。
Step 1: 建立資料表 「請在 Database 建立一個 bookings 資料表。欄位包含：id (主鍵)、customer_name (文字)、phone (文字)、booking_date (日期)、booking_time (時間)、pax (人數，數字)、status (狀態，預設為 'pending')」
Step 2: 建立前端界面 「請建立一個訂位頁面。使用 shadcn/ui 的 Calendar 元件讓使用者選擇日期。下方顯示一個時段選擇器（例如 18:00, 19:00, 20:00）。當使用者選擇時段後，顯示一個簡單的表單填寫姓名和電話。」
Step 3: 加上防呆邏輯 (最重要) 「請撰寫邏輯：當使用者點選覺得某個日期時，自動去 bookings 資料表查詢該日期已被預約的時段，並將那些時段的按鈕設為 disabled (不可點選)，避免重複訂位。」
6.2 簡易電商購物車 (Simple E-commerce)
Step 1: 商品與購物車 「建立 products 資料表（名稱、價格、圖片）。使用 React Context API 實作購物車功能，讓使用者點擊『加入購物車』後，右上角的購物車圖示會更新數量。」
Step 2: 結帳流程 (不串金流版) 「實作結帳頁面，列出購物車內容與總金額。使用者填寫收件資訊後，將訂單存入 orders 資料表，並清空購物車，最後顯示『訂購成功』畫面。」
6.3 輪播圖 (Hero Carousel)
這是首頁視覺的關鍵。Lovable 預設支援 shadcn/ui 的 Carousel 元件。
操作指令 Prompt： 「請在首頁上方建立一個全寬 (Full-width) 的輪播圖。 功能：使用 shadcn/ui 的 Carousel 元件。 自動播放：請務必安裝並設定 Autoplay plugin，每 5 秒自動切換，並在滑鼠 hover 時暫停。 內容：放置 3 張高品質的餐點圖片（使用 Unsplash）。 樣式：圖片高度設為 h-[500px] (手機版 h-[300px])，使用 object-cover 保持比例。每張圖上方要加一層黑色半透明遮罩 (overlay)，讓白色的標題文字能清楚閱讀。」
6.4 處理大量產品資料 (Pagination)
當客戶問：「我可以放 500 個產品嗎？」請用此方法處理。
- 錯誤做法： 叫 AI 把 500 個產品寫死在程式碼裡 (Hardcode)。這會導致網頁崩潰。
- 正確做法： 使用資料庫 + 分頁。
操作指令 Prompt： 「我要顯示產品列表，預計會有超過 100 筆資料。 請從 Supabase 的 products 資料表抓取資料。 重要：請實作分頁功能 (Pagination)，每次只抓取 12 筆資料 (.range(0, 11))。 在列表下方顯示『上一頁』與『下一頁』按鈕，點擊後再透過 API 抓取下一批 12 筆資料。 請顯示載入中的 Loading Skeleton 動畫，優化使用者體驗。」
6.5 首頁視覺升級：動態影音背景 (Video Background)
將靜態首圖換成影片能瞬間提升質感。 ✅ 前置作業 (關鍵)
- 格式： MP4 或 WebM。
- 大小： 務必壓縮在 5MB 以內 (最高 10MB)。行銷不需要 4K 畫質，720p 即可。
- 重要鐵律： 影片必須設定為靜音 (Muted)，否則瀏覽器會禁止自動播放。
方法 A：使用 Lovable (簡單版)
- 步驟： 上傳影片到對話框。
- 指令： 「請把首頁 Hero 區塊的背景圖片，換成我剛剛上傳的這個影片。影片設定為：自動播放 (autoplay)、靜音 (muted)、循環播放 (loop)，並且要填滿整個區塊 (cover)。」
方法 B：使用 Cursor 修改 (推薦，最穩定)
- 放入影片： 將
video.mp4放入專案的 public 資料夾。 - 呼叫 AI： 在
src/pages/Index.tsx選取原本的 Hero Section 程式碼，按 Cmd+K。 - 輸入指令： 「請把這個 section 的背景圖片移除，改用背景影片
/video.mp4取代。設定：autoPlay, loop, muted, playsInline。樣式：絕對定位 (absolute)，填滿區塊 (w-full h-full object-cover)，並設為 z-0 (底層)。文字內容要設為 relative z-10 (上層)。」
6.6 多頁面網站架構 (Multi-page Routing)
Lovable 不只能做單頁 (Single Page)，也能做多頁面網站。
操作指令 Prompt： 「請幫我建立一個全新的頁面，名稱為『關於我們』(About Us)。 路由設定：將此頁面的網址路徑設為 /about。 導覽列：請在網站上方的 Navbar 增加一個『關於我們』的連結，點擊後跳轉到此頁面。 內容：此頁面要包含公司介紹、團隊成員照片、以及一個聯絡表單。」
6.7 部落格與文章系統 (Blog System)
如果您需要放「多篇文章」，不需要手動做 100 個頁面。請使用 「動態路由 (Dynamic Routing)」。
Step 1: 建立文章資料表 「請在 Database 建立一個 posts 資料表。欄位包含：id, title, content, image_url, published_at, slug (網址代稱)。」
Step 2: 建立「文章列表」頁面 「請建立一個 /blog 頁面，顯示所有 posts 資料表中的文章。以卡片 (Card) 形式呈現。」
Step 3: 建立「單篇文章」頁面 (動態模板) 「請建立一個動態路由頁面 /blog/:slug。邏輯：當使用者進入此頁面時，根據網址上的 slug 去資料庫抓取對應的那一篇文章內容。」
Step 4: 寫文章的地方 (簡易後台) 「請在剛剛建立的 /admin 後台，加入管理 posts 的功能。讓我可以用一個簡單的 Textarea 輸入文章內容並上傳圖片。」
第七章：維護策略與交付模式
這部分決定了您能否透過這些網站建立「長期被動收入」。
由於 Lovable 產出的是 React 程式碼（不像 WordPress 有通用後台），客戶無法自己隨意修改頁面結構。這對您來說是一個商業優勢。
7.1 必殺技：自製「客戶專用後台」
不要讓客戶碰程式碼，也不要讓他們進 Supabase 資料庫（太危險）。 請直接用 Lovable 做一個簡單的後台給他們。
- 操作指令 Prompt：
「請幫我建立一個
/admin路由頁面。- 只有 users 表中 role 為 'admin' 的使用者登入後才能看到此頁面（請幫我設定 RLS）。
- 在頁面上，列出所有 products 表格的資料。
- 提供『新增商品』、『編輯』、『刪除』的按鈕。
- 新增商品時，要包含上傳圖片的功能（上傳到 Storage）。」
- 結果：客戶得到一個即使不懂程式也能上架商品、發布新聞的介面。這就是您的CMS (內容管理系統)。
7.2 兩種維護模式比較
模式 A：全託管訂閱制 (推薦)
- 所有權：GitHub Repo、Vercel 帳號、Supabase 專案都在您的名下。
- 客戶權限：只有網站前台和您做的
/admin後台權限。 - 收費：建置費 + 每月維護費 (Hosting + Support)。
- 優點：
- 長期收入：只要網站活著，您每個月都有收入。
- 安全性：客戶不會把網站改壞。
- 依賴性：客戶如果要改版面（例如聖誕節換主題），必須找您報價。
模式 B：原始碼買斷制
- 所有權：您協助客戶註冊他們的 GitHub 和 Vercel，並將程式碼移交給他們。
- 客戶權限：擁有最高權限，可以找其他工程師接手。
- 收費：一次性較高額的專案費用。之後不負責維護。
- 優點：結案快，無售後壓力。
- 缺點：沒有持續收入，且如果客戶自己改壞了程式碼，通常會回來怪您（建議合約要註明移交後不負責除錯）。
第八章：圖片與檔案運作原理
當您建立包含圖片的網站時，必須理解背後的「三段式運作」。
- Storage (倉庫)： 圖片的實際存放地。您會在 Supabase/Cloud 的 Storage 區塊建立一個 Bucket（通常命名為 products 或 images），並設定為 Public (公開)。
- Database (名冊)： 資料庫的 products 表格中，會有一個
image_url欄位。重點： 這個欄位存的是「字串（網址）」，而不是圖片檔案本身。 - Code (網頁)： 前端程式碼讀取資料庫，拿到網址，並填入 src 屬性。
接案實戰技巧： 當您用 Lovable 做「上傳圖片」功能時，AI 會自動幫您處理這三件事：(1) 把圖上傳到 Storage -> (2) 拿到網址 -> (3) 把網址存進 Database。
第九章：進階開發流程 (GitHub & Cursor Workflow)
如果您想從 Lovable 畢業，轉為更專業的工程師模式，請遵循此流程：
9.1 同步到 GitHub
- 在 Lovable 右上角點擊 GitHub 圖示。
- 授權並建立 Repository。
- 之後每次在 Lovable 改完，記得點 "Push to GitHub"。
9.2 下載到 Cursor 進行開發
- 打開 Cursor (或 VS Code)，選擇
Clone Repository，貼上您的 GitHub 網址。 - 在終端機 (Terminal) 輸入
npm install安裝套件。
9.3 關鍵一步：設定環境變數 (.env)
您的電腦 (Cursor) 預設不知道後端資料庫在哪裡。
- 在專案根目錄建立一個檔案，檔名叫做
.env。 - 回到 Lovable 的 "Project Settings" 或 Supabase 的 "API Settings"，複製兩個東西：
VITE_SUPABASE_URL(網址)VITE_SUPABASE_ANON_KEY(公鑰)
- 將它們貼入
.env檔案中。 - 輸入
npm run dev啟動專案，您就可以在本地端開發，並連線到雲端的資料庫了！
注意： 千萬不要把 .env 檔案上傳到 GitHub（這很危險）。標準的 .gitignore 檔案通常已經預設排除了它。
第十章：深度客製化與品牌形象
想要把網站賣出高價，必須把「玩具感」去除，讓它看起來像專業開發的產品。
路徑 A：GitHub 線上修改版 (適合還沒安裝 Cursor 的您)
如果您還不想下載程式碼到電腦，GitHub 的網頁版介面其實就可以完成所有修改。請進入您的 GitHub Repository 頁面操作。
Q1：如何移除 Lovable 的浮水印 (編輯按鈕)？
- 進入檔案：在 GitHub 檔案列表中找到
vite.config.ts檔案。 - 開啟編輯：點擊右上角的「鉛筆圖示 (Edit this file)」。
- 刪除程式碼：找到包含
componentTagger()的那一行（通常在 plugins 陣列裡），將其整行刪除。 - 儲存：點擊右上角的綠色按鈕 "Commit changes..."，輸入說明（如
Remove lovable badge），然後確認 Commit。Zeabur 會自動偵測到變更並重新部署。
Q2：如何修改分享到 FB/LINE 的縮圖 (Social Preview)？
- 準備圖片：在電腦上準備好一張
preview.jpg(1200x630px)。 - 上傳圖片：
- 進入 GitHub 的
public資料夾。 - 點擊右上角的 "Add file" -> "Upload files"。
- 把圖片拖進去，點擊 "Commit changes"。
- 修改程式碼：
- 回到最外層，進入
index.html。 - 點擊鉛筆圖示編輯。
- 找到
<meta property="og:image" ...>，將content改為https://您的正式網址/preview.jpg。 - 點擊 "Commit changes"。
Q3：如何修改網頁分頁的小圖示 (Favicon)？
- 刪除舊檔：進入
public資料夾，點擊placeholder.svg或lovable-icon.png，點擊垃圾桶圖示刪除並 Commit。 - 上傳新檔：點擊 "Add file" -> "Upload files"，上傳您的
favicon.ico並 Commit。 - 修改引用：回到
index.html，編輯確保<head>裡有<link rel="icon" href="/favicon.ico?v=2" />(加 v=2 是為了強制瀏覽器更新)。
Q4：如何修正 SEO 標準網址 (Canonical URL)？
您的模板可能殘留著別人的網址，這對 SEO 很傷。
- 檢查：在
index.html中尋找<link rel="canonical" ... />。 - 修改：將
href的內容改為您目前的部署網址（例如：https://nail-salon-demo.zeabur.app/）或客戶購買的正式網域。 - 目的：這告訴 Google 您的網站才是「本尊」，避免被當作複製內容。
路徑 B：Cursor 本地開發版 (適合進階使用者)
如果您已經按照第九章設定好 Cursor 環境，這樣操作會更快速。
Q1：如何移除 Lovable 的浮水印？
- 操作：在 Cursor 搜尋檔案
vite.config.ts(Ctrl+P)，直接刪除componentTagger()。
Q2：修改圖片資源
- 操作：直接把圖片拖曳進 Cursor 左側檔案總管的
public資料夾，覆蓋舊檔案即可。 - 上傳：修改完後，在 Cursor 的 Source Control 面板輸入 Commit 訊息並 Push，Zeabur 就會自動更新。
第十一章：商業變現、數據追蹤與資安防護
這部分關乎您的「網站營收」、「行銷數據」與「資料安全」，是專業站長必修課。
11.1 如何在網站串接廣告 (Google AdSense)？
想要靠網站流量賺錢，最常見的就是串接 Google AdSense。 最簡單的做法：直接在 GitHub 上修改 index.html。
- Step 1: 取得廣告代碼
- 在 Google AdSense 後台申請網站通過後，它會給您一段 JavaScript 程式碼（通常包含
<script async src="...">）。
- 在 Google AdSense 後台申請網站通過後，它會給您一段 JavaScript 程式碼（通常包含
- Step 2: 編輯 index.html (GitHub 網頁版操作)
- 登入 GitHub，進入您的 Repository。
- 找到
index.html檔案，點擊鉛筆圖示 (Edit)。 - 找到
<head>標籤的結尾（在</head>之前）。 - 將 AdSense 的程式碼整段貼上。
- 點擊 "Commit changes" 儲存。
- Step 3: 上傳 ads.txt (必要)
- Google 會要求您在網站根目錄放一個
ads.txt檔案以驗證所有權。 - 在 GitHub Repository 頁面，點擊 "Add file" -> "Create new file"。
- 檔名輸入
public/ads.txt(注意：要放在 public 資料夾內，Zeabur 部署後才會出現在根目錄)。 - 內容貼上 Google 給您的驗證碼。
- Commit 儲存。Zeabur 會自動重新部署，您的廣告功能就生效了！
- Google 會要求您在網站根目錄放一個
11.2 數據追蹤：GA4 與 Facebook Pixel (Analytics)
沒有數據就無法優化廣告。這一步是行銷客戶最看重的。
Google Analytics 4 (GA4)
- 取得代碼：
- 進入 GA4 管理介面 -> 「資料串流 (Data Streams)」 -> 選擇網站。
- 複製 「全域網站代碼 (gtag.js)」 (通常是一段開頭為
<!-- Global site tag (gtag.js) -->的程式碼)。
- GitHub 貼上：
- 打開 GitHub 上的
index.html。 - 貼在
<head>的最上方（建議放在所有其他 script 之前，確保數據不漏失）。 - Commit 儲存。
- 打開 GitHub 上的
Facebook Pixel (Meta Pixel)
- 取得代碼：
- 進入 Facebook 事件管理工具 (Events Manager) -> 「資料來源」。
- 找到 "Base Code"，這是一段較長的 JavaScript。
- GitHub 貼上：
- 同樣打開 GitHub 上的
index.html。 - 貼在
<head>裡面（可以放在 GA4 代碼的下面）。 - Commit 儲存。
- 同樣打開 GitHub 上的
注意： 當您在 GitHub 按下 Commit 後，Zeabur 會自動偵測並重新部署。大約 1-2 分鐘後，您就可以使用 Chrome 的外掛 (Tag Assistant 或 Pixel Helper) 來驗證代碼是否安裝成功。
11.3 API 金鑰安全 (API Key Safety)
您提到的「API 不能外洩」是最高指導原則。如果您的 OpenAI Key 或 Google Maps API Key 被駭客拿到，他們會盜用您的額度，讓您收到天價帳單。
- 原則 1：絕對不要寫在程式碼裡
- ❌ 錯誤做法：直接在 GitHub 的
index.html或.tsx檔案裡寫const API_KEY = "sk-proj-12345...";。這等於把信用卡號碼貼在公佈欄。 - ✅ 正確做法：在程式碼裡只寫「變數名稱」，例如
import.meta.env.VITE_GOOGLE_MAPS_KEY。
- ❌ 錯誤做法：直接在 GitHub 的
- 原則 2：善用 Zeabur 變數設定
- 真正的密碼（Key），請去 Zeabur Dashboard -> Variables 裡面新增。
- Key:
VITE_GOOGLE_MAPS_KEY - Value:
您的真實 API 金鑰 - Zeabur 會在部署時，才把這個密碼「注入」到網站裡。GitHub 上永遠只看得到變數名稱，看不到密碼。
- 原則 3：如果不小心上傳了怎麼辦？
- 立刻去該服務的後台（如 Google Cloud Console 或 OpenAI）撤銷 (Revoke) 舊的 Key，並產生一把新的。不要心存僥倖，駭客有自動機器人 24 小時在掃描 GitHub 上的外洩金鑰。
- 原則 4：關於 F12 看得到 Key 的釋疑
- 問題：「按 F12 看到
VITE_SUPABASE_ANON_KEY有關係嗎？」 - 答案：沒關係，那是正常的。
- ANON_KEY (匿名鑰匙) 本來就是設計給前端瀏覽器用的，權限很低 (只能讀公開資料)。
- 真正危險的是 SERVICE_ROLE_KEY (上帝權限鑰匙)，這把絕對不能出現在前端或 GitHub。
- 保護機制：雖然 Key 是公開的，但 Supabase 透過 RLS (Row Level Security) 來保護資料，確保每個人只能改自己的資料，不能刪別人的庫。
- 問題：「按 F12 看到
第十二章：SEO 優化實戰
Lovable 產出的是 React 單頁應用 (SPA)，預設的 SEO 只能算「及格」。要讓 Google 真正愛上您的網站，以下幾點是必須做的。
12.1 基本款：全域 SEO 設定 (Global)
- 操作位置：GitHub 的
index.html。 - 修改內容：
<title>：網站的主要標題（例如：19 號美甲沙龍 - 台北最推薦）。<meta name="description" ...>：網站的簡短介紹（這會出現在 Google 搜尋結果的下方）。<link rel="canonical" ...>：確保網址是您的正式網域（如 Q6 所述）。
12.2 進階款：動態頁面 SEO (Dynamic)
對於部落格或產品頁，每一頁的標題都應該不一樣。
- 工具：使用
react-helmet-async套件（Lovable 預設通常有裝）。 - 指令：
「請確保每一頁 (Page) 都有獨立的 Title 和 Description。請使用
Helmet元件，在『關於我們』頁面將標題設為『關於我們 | 19 號美甲』，在『文章內頁』則動態帶入文章標題。」
12.3 必殺技：網站地圖 (Sitemap.xml)
SPA 網站的結構對爬蟲來說比較複雜，主動遞交地圖很重要。
- 生成方式：可以使用線上的 Sitemap Generator 工具（輸入您的網址，它會跑一次並產生檔案）。
- 上傳：將產生好的
sitemap.xml檔案上傳到 GitHub 的public資料夾。 - 提交：去 Google Search Console 提交您的 Sitemap 網址（例如
https://您的網址.com/sitemap.xml）。
總結：做到這三點，您的 React 網站 SEO 分數至少有 80 分以上，這對於一般商業形象網站來說已經非常足夠。
