Skip to content

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

在 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


Read More

Tags:

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

  1. 我也發現資訊卡會過陣子才變化,但如果有 edit 就會強制立刻更新 ~
    (我是某次改樣式 preview 時意外發現的 XD )

Leave a Reply