[GitHub] 使用 GitHub Readme Stats 在你的 README 中獲取動態 GitHub 統計資料

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 中貼上這段語法，短時間還沒出現資訊卡。我也很懷疑到底發生了什麼事情，最後調整了好幾次都沒有成功，乾脆出去吃了個飯。

吃完飯後回來，重新整理頁面，正打算繼續研究；沒想到，一重新整理好頁面，我的資訊卡就出現了。

[GitHub] 使用 GitHub Readme Stats 在你的 README 中獲取動態 GitHub 統計資料