選擇你喜歡的高畫質婚紗照片
這篇指引專為想打造「高質感、自動化回函」網站的新人設計。
利用 Gemini (AI) 的邏輯力，結合 GitHub 的免費空間，幫你的婚禮打造完美的門面。
🌟 先看看我們最後要完成的成品： 點此查看質感示範網頁
第一階段：建立「雲端大腦」(Google 表單串接)
- 前往 Google Forms 建立題目：
- 建議題目：姓名 NAME、信箱 EMAIL、與新人關係 RELATIONSHIP（選項建議：男方家人親戚、男方好友、男方同事、女方家人親戚、女方好友、女方同事）、參加人數 GUESTS、飲食需求 DIETARY、兒童椅 BABY CHAIR、給新人的祝福 BLESSINGS。
- 🚨 權限檢查 (沒做會失敗！)：
- 點擊「設定」分頁 > 「回覆」。
- 務必關閉「限制 [組織名稱] 的使用者」。若未關閉，賓客打開網址會看到「需要權限」而無法填寫。(也請點選「不收集」電子信箱喔！）
2. 獲取「地圖網址」(AAAA 預填法)
點擊右上角「三個點」圖示 > 「取得預先填好的連結」。
在開啟的新頁面中，每一格都要填入唯一的辨識碼：
- 姓名填
AAAA - 信箱填
[email protected] - 關係選
男方好友 - 儀式人數填
11 - 午宴人數填
22 - 飲食選
素食 - 兒童椅選
需要 - 祝福語填
BBBB
3.按下最底下的「取得連結」，點擊 「複製連結」。
- 🚨 串接成功關鍵（給 AI 指令前的最後檢查）：
- 請將剛才複製的長網址貼到記事本，查看網址結尾：
- ❌ 結尾若是：
.../viewform - ✅ 請手動改為：
.../formResponse - 為什麼要改？
viewform只是用來看的網頁，改為formResponse才是真正能「寫入資料」的通道。改好後的這串網址，就是我們等一下要給 AI 的「地圖」。
- ❌ 結尾若是：
預先填寫完後，複製的連結會是這樣
一定要記得改成「formResponse」
第二階段：註冊 GitHub 帳號（你的網頁新家）
- 進入官網：前往 GitHub.com 點擊右上角 Sign up。
- 註冊流程：輸入常用的 Email、設定登入密碼、設定 Username (建議用英文)。
- 驗證與方案：去信箱收驗證碼，在問卷頁面直接滑到最下面選 Continue for free 即可。
Github是全英文，但別怕！
第三階段：素材準備（照片變網址）
- 前往 Postimg.cc 上傳你的婚紗照。
- 關鍵動作：上傳後在連結列表中，複製 「直接連結 (Direct Link)」（網址結尾必須是
.jpg或.png）。
為了讓Ai可以存取照片用（不需要註冊）
第四階段：複製貼上！給 AI 的魔法指令 (虛擬示範版)
請將以下這段指令填好後丟給 Gemini。
⚠️ 實作重點：在輸入指令給 Gemini 後，請記得確認下方「對話輸入框」工具列中，已勾選「Canvas」功能（右側會出現白色編輯視窗），這樣 AI 寫的代碼才會被整齊地收納。
「請幫我寫一個高質感的婚禮邀請函網頁代碼，要求如下：
1. 導覽與美學：頂端需有固定的毛玻璃質感導航列（含關於我們、婚禮詳情、出席回函）。使用 Morandi 暖陽色系（#d4a373, #8da399），字體指定 Cormorant Garamond 與 Noto Serif TC。 2. 計時器視覺 (極重要)：倒數計時器需具備藝術感。每個數字需承載於獨立的「白色微光卡片」上，卡片需有柔和陰影 (Soft Shadow) 與圓角設計，數字與單位間以優雅的垂直細線分隔。 3. 質感配置：首頁全螢幕封面背景。資訊請用垂直 V-Card 設計，交通指引為隱藏摺疊面板。 4. 中英雙語標籤：網頁表單的『欄位標籤』必須是中英雙語（如：姓名 NAME），但下拉選單內容保持純中文。 5. 技術指令：使用『隱藏式 Iframe 提交技術』。我的預填網址是：【在此貼上第一階段複製的連結】。嚴格要求：請只提取 ID，網頁輸入框必須是空的，絕對不准出現 AAAA 或預填文字。6. 手機版視覺優化 (極重要)：為了確保在智慧型手機上完美顯示，所有的捷運站名、地址、關鍵地點名稱，必須使用
no-wrap類別或 CSS 處理，絕對不可以自動斷行跑版。7. 互動細節 (極重要)：交通指引必須使用『摺疊式面板 (Accordion)』。 8. 智能表單邏輯：回函區塊的『飲食需求』與『是否需要兒童椅』，只有在賓客於『參加午宴人數』填寫大於 0 的數字時才顯示。請套入你的資訊：
- 新郎新娘名字：（個人推薦英文較佳，但底下仍可以放中文姓名）
- 靈魂標語：
- 婚禮日期：年月日（倒數至婚禮幾點開始）
- 封面圖網址：（步驟三所生成的網址）
- 【儀式/午宴/Dress Code資訊】：(記得指定你想要的顏色～）
第五階段：一鍵架站
- 建立專案：GitHub 點右上角「+」 > New repository > Name 輸入
wedding> 點 Create。 - 上傳檔案：點 creating a new file > 檔名填
index.html(必須全小寫) > 貼上 AI 代碼 > 點 Commit changes。 - 發布網址：點 Settings > 左側 Pages > Branch 選
main> 點 Save。
💡 備婚小叮嚀
- 網址生成需要時間：按下 Save 之後，GitHub 需要約 1-3 分鐘處理。
- 打開網址全是程式碼？：那是瀏覽器暫存，等大概5分鐘左右請按下「重新整理 (F5)」即可。若等了大約十分鐘都沒有改變，那就：
- 回到 GitHub 專案首頁：點擊專案名稱（如
wedding）。 - 進入編輯模式：點擊列表中的
index.html檔案，點擊右上角的 「鉛筆圖示 (Edit this file)」。 - 重新覆蓋代碼：
- 將裡面的內容全部刪除 (Ctrl+A -> Backspace)。
- 回到 AI 對話視窗，重新複製一次整段程式碼。
- 貼上 到 GitHub 的編輯框中。
- 再次儲存：點擊右上角綠色的 「Commit changes」。
最後貼心提醒：一定要有手機看過滿意唷～Ai有時候會跳針，你也別放棄：）
