2021-11-22|閱讀時間 ‧ 約 4 分鐘

個人網站1.3.0逐行解說

此版本的目標畫面成果是：

先打開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，按鈕圖示也和文字一樣是金色。

然後就可以放進去要加的按鈕了。

完整的程式碼在這裡：

下一階段的目標是加上頭像和活動表。

分享至

成為作者繼續創作的動力吧！

從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

成為會員後即可發表留言