天天看點
傳回

Github首頁美化-基礎建構Github首頁美化

Github首頁美化

​ 預設github首頁為清一色的标簽頁和圖表展示，偶然間逛github首頁的時候總會發現一些驚喜的頁面，于是就搜尋并參考相關内容自己調整一下（不定時完善，看到好玩的内容就會嘗試），在這個過程中不僅可以根據自身需要定制化首頁以滿足強迫症調調，還可在這個過程中探索到許多好玩的擴充和應用，例如常見的github基本操作、Github Actions、Python爬取并處理資料、個人部落格資訊嵌入、社交資訊引用等等，但不管基于何種目的都是希望學有所得、學有所獲并學以緻用~

DIY Github首頁

個人首頁初始化

​ 建立一個public倉庫：與自身github使用者名同名并添加README.md檔案。倉庫建立完成則可在首頁通路相應内容

Github首頁美化-基礎建構Github首頁美化

​ 可通過編輯README.md檔案diy首頁内容，此處可參考 Awesome-Profile-README-templates，裡面收錄了各式各樣的github首頁可供參考。此外github上一些開源的公共倉庫也收錄了不同的首頁作者資訊例如awesome-github-profile-readme，awesome-github-profiles。在awesome-github-profile-readme倉庫還可檢視相關Tools，根據自身需求引用相關工具個性化定制Github倉庫

Github首頁美化-基礎建構Github首頁美化
美化參考内容
  • 動态GitHub Readme Stats：支援展示Github基本資訊、編碼語言分布、倉庫資訊，中文文檔參考
  • GitHub Readme Activity Graph （GitHub 活動統計圖）
  • GitHub Profile Trophy（GitHub資料獎杯）
  • BADGE-圖徽（shields.io）
  • Metrics資訊統計（GitHub 資訊統計）：資訊統計一般借助第三方服務提供計數，也可自行搭建
  • 社交統計：一些流行社交平台的資料統計（知乎、B站、LeetCode、掘金、牛客、CSDN、Github等）
  • GitHub Readme streak Stats（GitHub 連續打卡）
  • GraphQL API：GitHub官方提供的API調用文檔說明
  • 個人部落格資訊、社交平台資訊爬取：可使用RSS進行跟蹤，解析xml檔案随後自定義格式處理
  • 程式設計&遊戲時長統計：涉及Github Action、Wakatime平台機制（待完善）

參考配置

​ 此處大部分以markdown格式進行說明，針對html格式轉化無非就是通過html引用img标簽顯示圖檔資訊，簡單說明兩種方式參考

參考配置說明

  • html文法
  • markdown文法 
# html文法
<div align="center">
    <img height="137px" src="url連結"/>
</div>

複制

# markdown文法
![圖檔說明](圖檔連結URL)

# 或者在圖檔基礎上嵌套URL連結跳轉
[![圖檔說明](圖檔連結URL)](跳轉URL)

複制

GitHub Readme Stats

​ 通路GitHub Readme Stats，檢視官方引用說明進行指定，參考中文文檔。

GitHub Readme Stats統計

  • 統計卡片
  • Repo卡片
  • 熱門語言卡片
  • 卡片自定義 
![username's GitHub stats](https://github-readme-stats.vercel.app/api?username=xxx)

複制

文法規則
  • 隐藏指定統計：可自定義選擇拼接參數

    &hide=stars,commits,prs,issues,contribs
  • 将私人項目貢獻添加到總送出計數中：拼接參數

    ?count_private=true

     （自己部署項目的話私人貢獻預設會被計數）
  • 圖示顯示：拼接參數

    &show_icons=true
  • 主題：可依賴現有主題進行卡片個性化，現有主題參考：dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula。或者可以通過設定參數配置手動自定義

​ GitHub 更多置頂允許在使用 GitHub readme profile 時，在個人資料中置頂多于 6 個 repo 。可限定show_owner變量指定使用者名字

  • 參數：

    username=xxx&repo=xxx

     
![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=xxx&repo=xxx)

複制

  • 參數：

    api/top-langs?username=xxx

     
![Top Langs](https://github-readme-stats.vercel.app/api/top-langs?username=xxx)

複制

文法規則
  • 隐藏指定語言：

    ?hide=language1,language2
  • 緊湊的語言卡片布局：

    &layout=compact

​ 可通過自定義URL參數配置為Stats Card或者Repo Card自定義樣式

常用選項：

  • title_color

     - 卡片标題顔色 （十六進制色碼）

  • text_color

     - 内容文本顔色 （十六進制色碼）

  • icon_color

     - 圖示顔色（如果可用）（十六進制色碼）

  • bg_color

     - 卡片背景顔色 （十六進制色碼） 或者 以 angle,start,end 的形式漸變（&bg_color=DEG,COLOR1,COLOR2,COLOR3…COLOR10）

  • hide_border

     - 隐藏卡的邊框 (布爾值)

  • theme

     - 主題名稱，從所有可用主題中選擇

  • cache_seconds

     - 手動設定緩存頭 （最小值: 1800，最大值: 86400）

  • locale

     - 在卡片中設定語言 (例如 cn, de, es, 等等)
統計卡片專屬選項：

  • hide

     - 隐藏特定統計資訊 (以逗号分隔)

  • hide_title

     - (boolean)

  • hide_rank

     - (boolean)

  • show_icons

     - (boolean)

  • include_all_commits

     - 統計總送出次數而不是僅統計今年的送出次數 (boolean)

  • count_private

     - 統計私人送出 (boolean)

  • line_height

     - 設定文本之間的行高 (number)
Repo卡片專屬選項：

  • show_owner

     - 顯示 Repo 的所有者名字 (boolean)
語言卡片專屬選項：

  • hide

     - 從卡片中隐藏指定語言 (Comma seperated values)

  • hide_title

     - (boolean)

  • layout

     - 在兩個可用布局

    default

     &

    compact

     間切換

  • card_width

     - 手動設定卡片的寬度 (number)

​ 正如作者所述，github API每小時隻允許5k次請求，是以使用其提供的API可能有通路限制，是以可以自行部署在自己的Vercel伺服器上，參考部署

GitHub Readme Activity Graph

[GitHub Readme Activity Graph]

​ GitHub Readme Activity Graph （GitHub 活動統計圖）

  • markdown文法
  • 參數配置說明

​ 顯示過去31天的Github活動情況

![username's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710&theme=dracula)

複制

Github首頁美化-基礎建構Github首頁美化
Arguments Description Type of Value
bg_color card’s background color hex code (without #)
color graph card’s text color hex code (without #)
line graph’s line color hex code (without #)
point color of points on line graph hex code (without #)
area_color color of the area under the graph hex code (without #)
area shows area under the graph boolean (default: false)
hide_border makes the border of the graph transparent boolean (default: false)
hide_title sets the title to an empty string boolean (default: false)
custom_title set the title to any string string
theme name of available themesDefault (cotton candy)、react-dark、github、xcode、rogue string

GitHub Profile Trophy

[GitHub Profile Trophy（GitHub資料獎杯）]

​ GitHub Profile Trophy（GitHub資料獎杯）

  • markdown文法
  • 其他配置 
![trophy](https://github-profile-trophy.vercel.app/?username=xxx)

複制

Github首頁美化-基礎建構Github首頁美化
  • 通過

    title

     指定顯示的内容：

    &title=Stars,Followers
  • 通過

    rank

     過濾指定内容：

    &rank=S,AAA
  • 設定行和列的大小：

    &row=2&column=3
  • 主題設定：

    &theme=flat

     （可用主題參考官方提供）
  • 邊緣間隔：

    margin-w=15

     （寬度間隔）、

    margin-h=15

     （高度間隔）
  • 透明背景：Transparent background：

    &no-bg=true

shields.io

[BADGE-圖徽（shields.io）]

​ BADGE-圖徽（shields.io）

  • 靜态徽章圖示生成
  • 動态統計徽章圖示生成 
# 參考URL（logo可指定圖示内容）
![](https://img.shields.io/badge/-Java-yellow?style=flat-square&logo=java)

複制

Metrics資訊統計

Github首頁美化-基礎建構Github首頁美化

[metrics]

  • 資料生成

​ 通路metrics網站，輸入github使用者名，生成統計資料，并通過指定文法進行引用

Github首頁美化-基礎建構Github首頁美化

社交統計

[社交統計]

  • markdown文法 
![](https://stats.justsong.cn/api/github?username=xxx&theme=dark)

複制

文法規則
  • 不同網站支援（api/網站代碼）：github、zhihu、B站、LeetCode英文站、LeetCode中文站、掘金、CSDN、牛客
Github首頁美化-基礎建構Github首頁美化

GitHub Readme streak Stats

[GitHub Readme streak Stats（GitHub 連續打卡）]

​ GitHub Readme streak Stats（GitHub 連續打卡）

  • markdown文法
  • 自助配置 
![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=username)

複制

  • 主題可選：default、dark、highcontrast等參考官方文檔說明
Github首頁美化-基礎建構Github首頁美化

​ 可通路 GitHub Readme Streak Stats 配置網頁，自由配置樣式

Github首頁美化-基礎建構Github首頁美化

GraphQL API

[GraphQL API]

​ GraphQL API為開發者提供了一個Explorer工具，可以授予Github賬号相關權限便于請求API，通過側邊欄搜尋API文檔内容

Github首頁美化-基礎建構Github首頁美化

​ 此處通過graphqlclient結合工作流進行操作，參考文章内容

上一篇: POJ - 4047 Garden 線段樹 區間更新
下一篇: 【區塊鍊擴容】-Layer 2