今天分享的內容我想每一位對開源感興趣的朋友都或多或少的知道, 也是我在做開源專案中用到的一些強大的工具, 可以讓我們的開源專案和 github 主頁更加富有展現力, 最後會分享一個我自己的 github 主頁的 readme.md, 大家可以參考學習一下.
在讀完本文之後大家可以收穫:
- 使用 readme-md-generator 快速美化你的 README.md
- 使用 gitHub-readme-stats 自動生成個人統計分析報表
- 使用 git-emoji 讓你的程式碼提交記錄視覺化
一. 如何讓你的開源專案有個漂亮的README.md ?
逛了一圈社群之後小夕發現了 readme-md-generator.
readme-md-generator 通過掃描我們的
package.json和git配置來幫助我們生成對應的 readme 結構。
產生的 README.md 類似如下展現：
另外, 一個優秀的 package.json 應該包含如下幾個後設資料:
{
"name": "H5-Dooring",
"version": "1.1.3",
"description": "H5-Dooring是一款功能強大，開源免費的H5視覺化頁面配置解決方案，致力於提供一套簡單方便、專業可靠、無限可能的H5落地頁最佳實踐。技術棧以react為主， 後臺採用nodejs開發。",
"author": "作者資訊",
"license": "開源協議",
"homepage": "主頁地址",
"repository": {
"type": "git",
"url": "git倉庫地址"
},
"bugs": {
"url": "供他人提issue的地址"
},
"engines": {
"npm": ">=5.5.0",
"node": ">=9.3.0"
}
}
複製程式碼大家在做開源專案的時候也可以參考如上規範, 讓自己的開源專案更健壯美觀, 接下來分享一個我用這個工具生成的 readme.md 效果:
二. 使用 github-readme-stats 自動生成個人統計分析報表
我們都知道 github 的個人主頁預設的配置很單調, 但是我們看很多大佬的 github 主頁, 展現非常漂亮, 比如這位大大:
這是為什麼呢? 實不相瞞, 上圖大佬就是發明美化 github個人主頁 工具的作者, 我們可以看到他的個人主頁有非常漂亮的統計圖, 而生成這種動態統計圖的工具就是 github-readme-stats. 它可以在我們的 README 中獲取動態生成的 GitHub 統計資訊, 而我們的使用方法也很簡單, 只需要在自己 github 主頁的 README 中加入如下程式碼:
[](https://github.com/anuraghazra/github-readme-stats)
複製程式碼我們只需要更改 ?username= 的值為我們自己的 GitHub 使用者名稱即可.
定製自己的統計資料主題
同時, 我們還可以輕鬆定製統計卡片的主題, 該工具預設提供的主題如下:
同樣, 我們只需要在 README 中加入如下程式碼:
複製程式碼這樣就能輕鬆選擇自己喜歡的主題, 更強大的是我們還可以自定義主題顏色, 大家可以在 github 上親自體驗一下.
新增自己專案的熱門語言卡片
熱門語言卡片顯示了我們在 GitHub 上的開源專案常用的程式語言, 展示如下:
當然也可以設定成緊湊型佈局:
要實現這樣的效果也很簡單, 只需要配置如下程式碼:
[](https://github.com/anuraghazra/github-readme-stats)
複製程式碼更多的配置大家可以在 github 慢慢挖掘, 該專案的 github 地址如下:
這裡也展示一下我通過配置之後的 github 個人主頁的介面效果:
三. 使用 git-emoji 讓你的程式碼提交視覺化
git-emoji 是 git 提交資訊的 emoji 指南, 我們按照它的規範提交 log 日誌, 將會生成形象易懂的提交表情, 如下:
我們看到的比較有名的開源專案提交都會有形象的 emoji, 也都是遵循了對應的提交規範. 下面是它的介紹網站:
線上地址: gitmoji.js.org/
我們可以使用它的指南來輕鬆優化我們開源的提交 log, 趕緊來試試吧~
最後
這裡分享一個我配置好的 github README模版, 大家可以參考一下: 美化你的github個人主頁, 後期我會在資料視覺化和工程化上輸出更多實用的開源專案和框架，如果有其他問題或需求，可以和筆者交流學習。
如果這篇文章對你有幫助，希望能給筆者 點贊+收藏 以此鼓勵作者繼續創作前端硬核文章。也可以關注作者公眾號 趣談前端 第一時間推送前端好文。