學會這幾招，輕松讓你的Github脫穎而出
今天分享的內容我想每一位對開源感興趣的朋友都或多或少的知道, 也是我在做開源項目中用到的一些強大的工具, 可以讓我們的開源項目和 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 中加入如下代碼:
- [](https://github.com/anuraghazra/github-readme-stats)
我們只需要更改 ?username= 的值為我們自己的 GitHub 用戶名即可。
定制自己的統計數據主題
同時, 我們還可以輕松定制統計卡片的主題, 該工具默認提供的主題如下:
同樣, 我們只需要在 README 中加入如下代碼:
- 
這樣就能輕松選擇自己喜歡的主題, 更強大的是我們還可以自定義主題顏色, 大家可以在 github 上親自體驗一下.
添加自己項目的熱門語言卡片
熱門語言卡片顯示了我們在 GitHub 上的開源項目常用的編程語言，展示如下:
當然也可以設置成緊湊型布局:
要實現這樣的效果也很簡單, 只需要配置如下代碼:
- [](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個人主頁, 后期我會在數據可視化和工程化上輸出更多實用的開源項目和框架，如果有其他問題或需求，可以和筆者交流學習。
本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。
