今天分享的內容我想每一位對開源感興趣的朋友都或多或少的知道， 也是我在做開源專案中用到的一些強大的工具， 可以讓我們的開源專案和
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
效果：
地址： mitu-editor | 輕量且強大的圖片編輯器
二。 使用github-readme-stats自動生成個人統計分析報表
我們都知道
github
的個人主頁預設的配置很單調， 但是我們看很多大佬的
github
主頁， 展現非常漂亮， 比如這位大大：
這是為什麼呢？ 實不相瞞， 上圖大佬就是發明美化
github個人主頁
工具的作者， 我們可以看到他的個人主頁有非常漂亮的統計圖， 而生成這種動態統計圖的工具就是
github-readme-stats
。 它可以在我們的
README
中獲取動態生成的
GitHub
統計資訊， 而我們的使用方法也很簡單， 只需要在自己
github
主頁的
README
中加入如下程式碼：
［！［Anurag‘s GitHub stats］（https：//github-readme-stats。vercel。app/api？username=anuraghazra）］（https：//github。com/anuraghazra/github-readme-stats）
我們只需要更改
？username=
的值為我們自己的
GitHub
使用者名稱即可。
定製自己的統計資料主題
同時， 我們還可以輕鬆定製統計卡片的主題， 該工具預設提供的主題如下：
同樣， 我們只需要在
README
中加入如下程式碼：
！［Anurag’s GitHub stats］（https：//github-readme-stats。vercel。app/api？username=anuraghazra&show_icons=true&theme=radical）
這樣就能輕鬆選擇自己喜歡的主題， 更強大的是我們還可以自定義主題顏色， 大家可以在
github
上親自體驗一下。
新增自己專案的熱門語言卡片
熱門語言卡片顯示了我們在
GitHub
上的開源專案常用的程式語言， 展示如下：
當然也可以設定成緊湊型佈局：
要實現這樣的效果也很簡單， 只需要配置如下程式碼：
［！［Top Langs］（https：//github-readme-stats。vercel。app/api/top-langs/？username=anuraghazra&layout=compact）］（https：//github。com/anuraghazra/github-readme-stats）
更多的配置大家可以在
github
慢慢挖掘， 該專案的
github
地址如下：
github-readme-stats
這裡也展示一下我透過配置之後的
github
個人主頁的介面效果：
三。 使用 git-emoji 讓你的程式碼提交視覺化
git-emoji
是
git
提交資訊的
emoji
指南， 我們按照它的規範提交
log
日誌， 將會生成形象易懂的提交表情， 如下：
我們看到的比較有名的開源專案提交都會有形象的
emoji
， 也都是遵循了對應的提交規範。 下面是它的介紹網站：
線上地址： https：//gitmoji。js。org/
我們可以使用它的指南來輕鬆最佳化我們開源的提交
log
， 趕緊來試試吧~
最後
這裡分享一個我配置好的
github README
模版， 大家可以參考一下： 美化你的github個人主頁， 後期我會在資料視覺化和工程化上輸出更多實用的開源專案和框架，如果有其他問題或需求，可以一起交流學習。
如果這篇文章對你有幫助，希望能給筆者
點贊+收藏
以此鼓勵作者繼續創作前端硬核文章。也可以在
趣談前端
第一時間推送前端好文。
