Last Updated on 2021-10-23 by Clay
在 GitHub 中,若要要讓個人頁面有些變化,是可以建立一個與帳號同名的倉庫,並在倉庫中新增 README.md。這個新增的 README.md 的內容,會反映在個人頁面的最上方。
透過這個辦法,我們可以製作一些有趣的小功能,甚至美化我們的 Overview 頁面。
今天我要介紹的,就是這樣一個有趣的開源專案:GitHub Readme Stats。
這個專案可以讓我們在個人 Overview 頁面中展示『動態 GitHub 統計資料』、以及『專案使用的語言比例』。
除此之外還有許多比較細緻的設定,比方說統計資訊是否記入私人倉庫 ...... 等等,這方面請參考上方連結的原始專案 README 說明。
以下,我簡單紀錄如何做到展示自己的統計資訊於個人 Overview 頁面。
步驟說明
Step 1 建立與使用者同名倉庫(如果你尚未建立)
新增倉庫(repository)。
只要你輸入自己的使用者名稱作為倉庫名,便會跳出提示:You found a secret!
而我們對於這個倉庫內編輯的 README.md 內容,會反映在我們 Overview 頁面中最上方。
Step 2 Fork 原始 GitHub Readme Stats 專案
fork GitHub Readme Stats 專案,並嘗試更新 fork 來的專案的 README.md。將下面的語法貼在 README.md 中,其中 USERNAME
需要改成你自己的帳戶名稱。
[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=USERNAME&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=USERNAME&layout=compact&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)
並查看是否確實有資訊卡出現在 README 當中。(如下方圖示)
這一步應該是即時地顯示出來。若沒有成功顯示,可以確認一下上方的語法是否有錯誤之處。
Step 3 在個人同名倉庫中的 README.md 中新增資訊卡
當然,光是上面的步驟還沒辦法美化我們 GitHub 個人 Overview 頁面。我們需要再次來到同名倉庫中修改 README.md。
貼上同樣的語法並儲存:
[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=USERNAME&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=USERNAME&layout=compact&theme=gruvbox)](https://github.com/USERNAME/github-readme-stats)
這裡分享個經驗:我個人在同名倉庫 README.md 中貼上這段語法,短時間還沒出現資訊卡。我也很懷疑到底發生了什麼事情,最後調整了好幾次都沒有成功,乾脆出去吃了個飯。
吃完飯後回來,重新整理頁面,正打算繼續研究;沒想到,一重新整理好頁面,我的資訊卡就出現了。
References
- https://github.com/anuraghazra/github-readme-stats
- https://stackoverflow.com/questions/11850527/use-javascript-to-get-the-list-of-a-users-github-repositories
我也發現資訊卡會過陣子才變化,但如果有 edit 就會強制立刻更新 ~
(我是某次改樣式 preview 時意外發現的 XD )
哈哈,原來還可以這樣馬上看到結果。
學了一招 XD