以前,自訂 Github 個人資料的唯一方法是更新圖片或更改名稱。這意味著每個 Github 設定檔看起來都一樣,自訂它或脫穎而出的選項很少。
從那時起,您可以選擇使用 Markdown 建立自訂部分。您可以包括您的履歷、您的興趣和嗜好,讓您的個人資料反映您的身分。這是任何人在訪問您的個人資料時看到的主要部分之一。
在這篇文章中,我將向您展示我如何建立我的 Github 自述文件。我將使用 Markdown 並解決它的主要問題。問題是它可能受到高度限制,因為您無法更改顏色,調整位置和間距可能很困難。要解決這個問題,有一種方法可以將 CSS 添加到 Github 自述文件中,甚至添加過渡以呈現更好的 UX。
但讓我們先從創建自述文件開始。為此,您需要建立一個新的公共儲存庫,該儲存庫正是您的 Github 使用者名稱。您將看到一個小文本,表明這將是一個獨特的存儲庫。
現在,無論您在 [README.md](
在 README.md 檔案中,您可以包含映像。其中包括 SVG 檔。使我們能夠新增 CSS 的漏洞是使用 SVG 檔案中的foreignObject 元素嵌入自訂 HTML 和 CSS。 foreignObject 元素可讓您在 SVG 圖形中包含其他標記語言的元素。
讓我們在儲存庫中建立一個新文件,名稱為 header.svg。就我而言,我希望在我的個人資料上顯示一條文本,內容為 CodeFlow.,具有漂亮的漸變和打字機效果。為了實現這一點,我在 SVG 檔案中的foreignObject 中編寫了一些 CSS 和一些 HTML :
現在讓我們更新 README.md 檔案以使用此 SVG 作為映像並將其顯示在我們的個人資料中:
就是這樣。它實際上只是封裝在 SVG 中的一些 CSS 和 HTML。查看下面的最終結果,或者如果您想查看實際效果,我的 Github 個人資料在這裡。
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3