學(xué)會(huì)這幾招,輕松讓你的github脫穎而出
突破自我
關(guān)注并將「趣談前端」設(shè)為星標(biāo)
每天定時(shí)分享技術(shù)干貨/優(yōu)秀開(kāi)源/技術(shù)思維
今天分享的內(nèi)容我想每一位對(duì)開(kāi)源感興趣的朋友都或多或少的知道, 也是我在做開(kāi)源項(xiàng)目中用到的一些強(qiáng)大的工具, 可以讓我們的開(kāi)源項(xiàng)目和 github 主頁(yè)更加富有展現(xiàn)力, 最后會(huì)分享一個(gè)我自己的 github 主頁(yè)的 readme.md, 大家可以參考學(xué)習(xí)一下.
在讀完本文之后大家可以收獲:
使用 readme-md-generator 快速美化你的 README.md 使用 gitHub-readme-stats 自動(dòng)生成個(gè)人統(tǒng)計(jì)分析報(bào)表 使用 git-emoji 讓你的代碼提交記錄可視化
一. 如何讓你的開(kāi)源項(xiàng)目有個(gè)漂亮的README.md ?
逛了一圈社區(qū)之后小夕發(fā)現(xiàn)了 readme-md-generator.
readme-md-generator 通過(guò)掃描我們的
package.json和git配置來(lái)幫助我們生成對(duì)應(yīng)的 readme 結(jié)構(gòu)。
產(chǎn)生的 README.md 類似如下展現(xiàn)：
另外, 一個(gè)優(yōu)秀的 package.json 應(yīng)該包含如下幾個(gè)元數(shù)據(jù):
{
"name": "H5-Dooring",
"version": "1.1.3",
"description": "H5-Dooring是一款功能強(qiáng)大，開(kāi)源免費(fèi)的H5可視化頁(yè)面配置解決方案，致力于提供一套簡(jiǎn)單方便、專業(yè)可靠、無(wú)限可能的H5落地頁(yè)最佳實(shí)踐。技術(shù)棧以react為主， 后臺(tái)采用nodejs開(kāi)發(fā)。",
"author": "作者信息",
"license": "開(kāi)源協(xié)議",
"homepage": "主頁(yè)地址",
"repository": {
"type": "git",
"url": "git倉(cāng)庫(kù)地址"
},
"bugs": {
"url": "供他人提issue的地址"
},
"engines": {
"npm": ">=5.5.0",
"node": ">=9.3.0"
}
}
大家在做開(kāi)源項(xiàng)目的時(shí)候也可以參考如上規(guī)范, 讓自己的開(kāi)源項(xiàng)目更健壯美觀, 接下來(lái)分享一個(gè)我用這個(gè)工具生成的 readme.md 效果:
地址: mitu-editor | 輕量且強(qiáng)大的圖片編輯器
二. 使用 github-readme-stats 自動(dòng)生成個(gè)人統(tǒng)計(jì)分析報(bào)表
我們都知道 github 的個(gè)人主頁(yè)默認(rèn)的配置很單調(diào), 但是我們看很多大佬的 github主頁(yè), 展現(xiàn)非常漂亮, 比如這位大大:
這是為什么呢? 實(shí)不相瞞, 上圖大佬就是發(fā)明美化 github個(gè)人主頁(yè) 工具的作者, 我們可以看到他的個(gè)人主頁(yè)有非常漂亮的統(tǒng)計(jì)圖, 而生成這種動(dòng)態(tài)統(tǒng)計(jì)圖的工具就是 github-readme-stats. 它可以在我們的 README 中獲取動(dòng)態(tài)生成的 GitHub 統(tǒng)計(jì)信息, 而我們的使用方法也很簡(jiǎn)單, 只需要在自己 github 主頁(yè)的 README 中加入如下代碼:
[](https://github.com/anuraghazra/github-readme-stats)
我們只需要更改 ?username= 的值為我們自己的 GitHub 用戶名即可.
定制自己的統(tǒng)計(jì)數(shù)據(jù)主題
同時(shí), 我們還可以輕松定制統(tǒng)計(jì)卡片的主題, 該工具默認(rèn)提供的主題如下:
同樣, 我們只需要在 README 中加入如下代碼:
這樣就能輕松選擇自己喜歡的主題, 更強(qiáng)大的是我們還可以自定義主題顏色, 大家可以在 github 上親自體驗(yàn)一下.
添加自己項(xiàng)目的熱門語(yǔ)言卡片
熱門語(yǔ)言卡片顯示了我們?cè)?nbsp;GitHub 上的開(kāi)源項(xiàng)目常用的編程語(yǔ)言, 展示如下:
當(dāng)然也可以設(shè)置成緊湊型布局:
要實(shí)現(xiàn)這樣的效果也很簡(jiǎn)單, 只需要配置如下代碼:
[](https://github.com/anuraghazra/github-readme-stats)
更多的配置大家可以在 github 慢慢挖掘, 該項(xiàng)目的 github 地址如下:
github-readme-stats
這里也展示一下我通過(guò)配置之后的 github 個(gè)人主頁(yè)的界面效果:
三. 使用 git-emoji 讓你的代碼提交可視化
git-emoji 是 git 提交信息的 emoji 指南, 我們按照它的規(guī)范提交 log 日志, 將會(huì)生成形象易懂的提交表情, 如下:
我們看到的比較有名的開(kāi)源項(xiàng)目提交都會(huì)有形象的 emoji, 也都是遵循了對(duì)應(yīng)的提交規(guī)范. 下面是它的介紹網(wǎng)站:
在線地址: https://gitmoji.js.org/
我們可以使用它的指南來(lái)輕松優(yōu)化我們開(kāi)源的提交 log, 趕緊來(lái)試試吧~
最后
這里分享一個(gè)我配置好的 github README模版, 大家可以參考一下: 美化你的github個(gè)人主頁(yè), 后期我會(huì)在數(shù)據(jù)可視化和工程化上輸出更多實(shí)用的開(kāi)源項(xiàng)目和框架，如果有其他問(wèn)題或需求，可以和筆者交流學(xué)習(xí)。
如果這篇文章對(duì)你有幫助，希望能給筆者 點(diǎn)贊+收藏 以此鼓勵(lì)作者繼續(xù)創(chuàng)作前端硬核文章。也可以關(guān)注作者公眾號(hào) 趣談前端 第一時(shí)間推送前端好文。