今天是鐵人賽第28天。
一開始先調整Profile頁面的布局,選項樣式讓他美觀。
我的想法是,先做好一個頁面,再請AI同事參考頁面的設定去產生其他頁面,避免每個頁面我都要去大調整。
這樣只要簡單調整布局就好。
不過一開始就有點卡關,我現在頁面有左側導航欄跟右側內容區塊,我想把兩個區塊比例調整適當大小並且置中,但這對AI同事看來有點困難,有時候是沒有置中。
有時候置中了,但內容區塊或者導航欄被擠壓變小。
AI同事一直在同一個頁面檔案修修改改,但一直但沒有嘗試成功,我請AI同事跨大檢查其他原因。
他首先找了tailwind.config.js
,確定無全局佈局。又去找了index.css
,發現我沒有這個檔案。
我想他可能是想找style.css
,我就將這個檔案告訴AI同事請他檢查。
檢查沒有全局佈局影響,AI同事後來透過增加參數去調整寬度,讓他有空間可以縮放。
但現在變成導航欄與內容欄位間距太大,請AI同事調整間距,他添增space-x-2
,結果反而更大了。
後來實在受不了AI同事的來回修改,我直接參照AI同事給的參數名稱下去調整。
我問了一下小幫手min-w-[1392px]的意思:
min-w-[1392px] 是 Tailwind CSS 的 Arbitrary Value(任意值語法),意思是:
這個元素的 最小寬度 (min-width) 被設為 1392px。
我調整了一下1392px數字大小,發現我不管怎麼調整內容區塊都在相同位置,而導覽區塊會因為變大而往左跑。
我推測導覽區塊因為被設定靠左對齊,所以外框越大他越靠左。
因此我調整外框大小到 min-w-[1100px]
,佈局終於調整到我想要的位置。
調整到我想要的位置後,避免AI同事偷改,我先做git commit去紀錄。
接下來我想說目前使用的是http傳輸不安全,我請AI同事建構https環境。
AI同事教我如何產生憑證,我依照他的方法順利產生憑證。
不過在啟用功能發生了一些設定上的問題,我一樣請AI同事去處理。
之後請AI同事調整之後,前端可以啟動,但是網站出現ERR_SSL_VERSION_OR_CIPHER_MISMATCH
。
AI同事分析是握手失敗,我請他分析失敗原因去修正。
AI同事讓我嘗試去安裝mkcert去模擬 CA 簽發憑證,讓我可以用使用本地端簽發的憑證繞過可能因為不信任而拒絕的連線。
雖然感覺有點繞路,但畢竟是鐵人賽,去嘗試一些沒接觸的功能建置也能學到東西。
因此,我開始依照AI同事教的步驟去安裝mkcert,安裝過程蠻順利的,也成功發行了CA簽證。
之後,就會開始建置其他頁面。