」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 使用 CSS 讓您的 Github 個人資料脫穎而出

使用 CSS 讓您的 Github 個人資料脫穎而出

發佈於2024-11-02
瀏覽:131

以前,自訂 Github 個人資料的唯一方法是更新圖片或更改名稱。這意味著每個 Github 設定檔看起來都一樣,自訂它或脫穎而出的選項很少。

從那時起,您可以選擇使用 Markdown 建立自訂部分。您可以包括您的履歷、您的興趣和嗜好,讓您的個人資料反映您的身分。這是任何人在訪問您的個人資料時看到的主要部分之一。

在這篇文章中,我將向您展示我如何建立我的 Github 自述文件。我將使用 Markdown 並解決它的主要問題。問題是它可能受到高度限制,因為您無法更改顏色,調整位置和間距可能很困難。要解決這個問題,有一種方法可以將 CSS 添加到 Github 自述文件中,甚至添加過渡以呈現更好的 UX。

但讓我們先從創建自述文件開始。為此,您需要建立一個新的公共儲存庫,該儲存庫正是您的 Github 使用者名稱。您將看到一個小文本,表明這將是一個獨特的存儲庫。

Make Your Github Profile Stand Out With CSS

現在,無論您在 [README.md]() 檔案中更新什麼,它都會顯示在您的個人資料中。您可以使用 Markdown 語法或 HTML 來顯示您的內容。如果您新增任何內聯樣式、CSS 檔案或 JavaScript,它將被 Github 刪除,因此該解決方案是行不通的。

解決方案

在 README.md 檔案中,您可以包含映像。其中包括 SVG 檔。使我們能夠新增 CSS 的漏洞是使用 SVG 檔案中的foreignObject 元素嵌入自訂 HTML 和 CSS。 foreignObject 元素可讓您在 SVG 圖形中包含其他標記語言的元素。

讓我們在儲存庫中建立一個新文件,名稱為 header.svg。就我而言,我希望在我的個人資料上顯示一條文本,內容為 CodeFlow.,具有漂亮的漸變和打字機效果。為了實現這一點,我在 SVG 檔案中的foreignObject 中編寫了一些 CSS 和一些 HTML :

CodeFlow.

現在讓我們更新 README.md 檔案以使用此 SVG 作為映像並將其顯示在我們的個人資料中:


Make Your Github Profile Stand Out With CSS

就是這樣。它實際上只是封裝在 SVG 中的一些 CSS 和 HTML。查看下面的最終結果,或者如果您想查看實際效果,我的 Github 個人資料在這裡

版本聲明 本文轉載於:https://dev.to/theopinionateddev/make-your-github-profile-stand-out-with-css-191m?1如有侵犯,請洽[email protected]刪除
最新教學 更多>
  • Leetcode:交替合併字串
    Leetcode:交替合併字串
    問題陳述 1768.交替合併字串 給定兩個字串,word1 和 word2,任務是透過交替字元將它們合併。這個過程從 word1 開始,一直持續到一個字串用完為止。較長字串中的任何剩餘字元都將附加到合併字串的末尾。 我的思考過程 考慮到問題的簡單性,我立即認識到兩...
    程式設計 發佈於2024-11-02
  • 適合初學者開發人員的最佳網站
    適合初學者開發人員的最佳網站
    您是希望在科技業(尤其是開發領域)開始職業生涯的初學者嗎?我可能有資源可以幫助你! 儘管是 alx_africa 的一員,但我不斷地透過沉浸於開發和為個人專案做出貢獻來推動自己在技術領域學習和成長。 幾個月前,在接受非洲領導體驗專業化培訓時,我偶然發現了 roadmap.sh。這份綜合指南是為渴...
    程式設計 發佈於2024-11-02
  • FCS API 與 Insight Ease:比特幣 API 服務的簡單比較
    FCS API 與 Insight Ease:比特幣 API 服務的簡單比較
    如果您熱衷於比特幣 API,那麼選擇正確的 API 非常重要。特別是如果您是開發人員、金融分析師或經營金融科技公司。您會聽到的兩個流行名稱是 FCS API 和 Insight Ease。但哪一個比較好呢?讓我們仔細觀察它們的比較,特別是當涉及加密貨幣即時匯率 API、加密貨幣 API 交易,甚至...
    程式設計 發佈於2024-11-02
  • 如何在不修改HTML的情況下用JavaScript監聽表單提交事件?
    如何在不修改HTML的情況下用JavaScript監聽表單提交事件?
    在JavaScript 中監聽表單提交事件而不修改HTML在本文中,我們解決了在不修改HTML 的情況下監聽表單提交事件的常見挑戰必須修改HTML 程式碼。我們不依賴 HTML 中的 onClick 或 onSubmit 屬性,而是提供純 JavaScript 解決方案。 為了實現這一點,我們利用 ...
    程式設計 發佈於2024-11-02
  • Document.getElementById 與 jQuery $():主要差異是什麼?
    Document.getElementById 與 jQuery $():主要差異是什麼?
    Document.getElementById vs jQuery $():比較分析深入研究Web 開發領域時,了解一般版本之間的細微差別JavaScript 和jQuery 可能至關重要。本文研究了兩個看似相同的程式碼片段之間的細微差別:var contents = document.getEle...
    程式設計 發佈於2024-11-02
  • 在 Java 中使用方法和變數句柄進行運行時物件存取和操作
    在 Java 中使用方法和變數句柄進行運行時物件存取和操作
    反射和方法/var 句柄是 Java 中的兩個強大功能,允許開發人員在運行時存取和操作物件。然而,它們在存取和處理物件的方式上有所不同。 讓我們來看一個如何使用反射來存取類別中方法的範例。我們將從一個名為「MyClass」的簡單類別開始,它有一個私有字串變數和該變數的 getter 方法。為了創建...
    程式設計 發佈於2024-11-02
  • 如何在 Python 中使用內建函數驗證 IP 位址?
    如何在 Python 中使用內建函數驗證 IP 位址?
    Python 中的 IP 位址驗證驗證 IP 位址的有效性是程式設計中的常見任務。從使用者接收字串形式的 IP 位址時,必須對其進行驗證,以確保它們符合正確的格式和結構。 要在 Python 中有效驗證 IP 位址,請考慮以下方法:無需手動解析 IP 位址,而是利用套接字模組中的內建 inet_at...
    程式設計 發佈於2024-11-02
  • 我需要學習程式設計的幫助
    我需要學習程式設計的幫助
    您好,我是系統工程專業的學生,我覺得我在課程中學到的程式設計知識不多。我想自學,因為我對這個主題非常感興趣。這就是我在這個網站上向了解程式設計的人尋求幫助的原因。如果有人知道學習程式設計的最佳課程,從基礎開始並進步到更專業的水平,那將會有很大的幫助。 我感興趣的語言: Java JavaScrip...
    程式設計 發佈於2024-11-02
  • 如何將 gorm.Model 整合到具有日期時間支援的 Protocol Buffer 定義中?
    如何將 gorm.Model 整合到具有日期時間支援的 Protocol Buffer 定義中?
    將gorm.Model 整合到Protocol Buffer 定義中將gorm.Model 整合到Protocol Buffer 定義中將gorm 的gorm.Model 欄位整合到protobuf 定義時,由於proto3 中缺乏日期時間支持,出現了挑戰。本文探討了此問題的解決方案。 ProtoB...
    程式設計 發佈於2024-11-02
  • 修補您的 Discord 活動的網路請求,以實現順利的 CSP 合規性
    修補您的 Discord 活動的網路請求,以實現順利的 CSP 合規性
    透過Discord運行Discord活動時,您可能會遇到內容安全策略(CSP)問題。您可以透過確保網路請求遵循 Discord 代理 規則來修復這些問題。 這可以手動完成...或者你可以讓@robojs/patch處理它。 什麼是CSP? 內容安全策略 (CSP) 是一種安全標準...
    程式設計 發佈於2024-11-02
  • 推薦項目:刪除課程表查看數據
    推薦項目:刪除課程表查看數據
    LabEx 的這個專案釋放了資料庫管理的力量,提供了在資料庫中建立和操作視圖的全面學習體驗。無論您是嶄露頭角的資料庫管理員還是經驗豐富的開發人員,該專案都提供了寶貴的機會來增強您的技能並獲得對資料管理世界的實際見解。 深入了解基礎知識 在這個專案中,您將踏上了解資料庫中視圖的核心概...
    程式設計 發佈於2024-11-02
  • 模擬網路請求變得容易:整合 Jest 和 MSW
    模擬網路請求變得容易:整合 Jest 和 MSW
    Writing unit tests that involve mocking or stubbing API calls can feel overwhelming—I’ve been there myself. In this article, I’ll guide you through a ...
    程式設計 發佈於2024-11-02
  • 使用 Javascript 的哈希映射
    使用 Javascript 的哈希映射
    介紹 哈希映射(Hash Map),也稱為哈希表(Hash Table),是實現關聯數組抽象資料類型的資料結構,是可以將鍵映射到值的結構。 它使用雜湊函數來計算儲存桶或槽數組的索引,從中可以找到所需的值。 哈希映射的主要優點是它的效率。插入新的鍵值對、刪除鍵值對以及查找給定鍵...
    程式設計 發佈於2024-11-02
  • HTPX 簡介:適用於 JavaScript 和 Node.js 的輕量級多功能 HTTP 用戶端
    HTPX 簡介:適用於 JavaScript 和 Node.js 的輕量級多功能 HTTP 用戶端
    作為開發人員,我們的Web 應用程式通常需要一個可靠且高效的HTTP 用戶端,無論我們是在瀏覽器中使用JavaScript 還是在伺服器端使用Node.js 進行構建。這就是我創建 HTPX 的原因——一個強大的、輕量級的解決方案,旨在簡化 HTTP 請求,同時為現代開發提供一系列功能。 在本文中...
    程式設計 發佈於2024-11-02
  • 使用自然語言透過法學碩士產生簡單的 Python GUI .... 在不到幾分鐘的時間內
    使用自然語言透過法學碩士產生簡單的 Python GUI .... 在不到幾分鐘的時間內
    Thought that building Python GUIs took hours of tedious coding? Welcome to an exciting new era! Not only can tools like Github Copilot help with code ...
    程式設計 發佈於2024-11-02

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3