個人網站1.3.0逐行解說
此版本的目標畫面成果是：
- 金色名字。
- 金色社交按鈕圖示，點擊按鈕另開對應的網頁或著顯示comming soon。
- 名字和按鈕在網頁中央，如果網頁寬度不夠會換行，夠就不換行。
先打開index.html來研究一下。
看起來，index.html裡面只會放基本的html內容，主要的元件還是另外用Kotlin寫，Kotlin的部分會轉換成script標籤裡嵌入的js檔案。
現在在body標籤加上背景色屬性bgcolor，常見的顏色都可以直接打英文字彙，特殊顏色才需要使用色碼#000000。網路上可以查到很多對照的色碼表，就不多介紹了。
link標籤裡則放上引用的css路徑，這個css有很多支援的網站圖示，非常方便。我是從w3schools網站找到的，他們也提供直接在他們網站測試css的功能。
接下來打開main.kt檔案，目標是讓名字和社交按鈕會隨著視窗大小維持水平和垂直置中。
先把名字和按鈕放在同個div區塊，然後在外層的div元件裡加上width和height是100%視窗大小的設定。vw：view width，vh：view height。
再加上display, alignItems, justifyContent, flexWrap等屬性使其置中。
這些設計Html網頁風格的CSS（Cascading Style Sheets）都是加在attrs的style裡，如果要重複使用就和程式碼函式一樣可以獨立放在class裡。
為了可讀性和好維護性，我把名字元件和社交按鈕各自拉出來。對了，元件方法都要註明Composable的annotations。
名字的部分加上顏色屬性color金色，因為社交按鈕的寬度和名字寬度不會相同，所以文字這邊還要額外設定textAlign。因為希望不要和按鈕貼太近，所以加上padding，px是像素單位。
再來是社交按鈕區域，把功能拉出來單獨寫成functions，方便重複利用。
fontSize平常是用在設定字型大小，而在這裡則是用來設定社交按鈕的圖示大小。
設定padding讓按鈕圖示增加元件反應面積。
SocialIconLink方法則是傳入class相關的name和點擊的連結href，想要新開網頁所以target是blank，按鈕圖示也和文字一樣是金色。
然後就可以放進去要加的按鈕了。
完整的程式碼在這裡：
下一階段的目標是加上頭像和活動表。
GitHub
留言0
查看全部