學(xué)會(huì)這幾招，輕松讓你的Github脫穎而出
今天分享的內(nèi)容我想每一位對(duì)開源感興趣的朋友都或多或少的知道, 也是我在做開源項(xiàng)目中用到的一些強(qiáng)大的工具, 可以讓我們的開源項(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 讓你的代碼提交記錄可視化
一. 如何讓你的開源項(xiàng)目有個(gè)漂亮的README.md ?
逛了一圈社區(qū)之后小夕發(fā)現(xiàn)了 readme-md-generator.
readme-md-generator 通過掃描我們的 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)大，開源免費(fèi)的H5可視化頁(yè)面配置解決方案，致力于提供一套簡(jiǎn)單方便、專業(yè)可靠、無(wú)限可能的H5落地頁(yè)最佳實(shí)踐。技術(shù)棧以react為主， 后臺(tái)采用nodejs開發(fā)。",
- "author": "作者信息",
- "license": "開源協(xié)議",
- "homepage": "主頁(yè)地址",
- "repository": {
- "type": "git",
- "url": "git倉(cāng)庫(kù)地址"
- },
- "bugs": {
- "url": "供他人提issue的地址"
- },
- "engines": {
- "npm": ">=5.5.0",
- "node": ">=9.3.0"
- }
- }
大家在做開源項(xiàng)目的時(shí)候也可以參考如上規(guī)范, 讓自己的開源項(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è)?GitHub 上的開源項(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
這里也展示一下我通過配置之后的 github 個(gè)人主頁(yè)的界面效果:
三. 使用 git-emoji 讓你的代碼提交可視化
git-emoji 是 git 提交信息的 emoji 指南, 我們按照它的規(guī)范提交 log 日志, 將會(huì)生成形象易懂的提交表情, 如下:
我們看到的比較有名的開源項(xiàng)目提交都會(huì)有形象的 emoji, 也都是遵循了對(duì)應(yīng)的提交規(guī)范. 下面是它的介紹網(wǎng)站:
在線地址: https://gitmoji.js.org/
我們可以使用它的指南來(lái)輕松優(yōu)化我們開源的提交 log, 趕緊來(lái)試試吧~
最后
這里分享一個(gè)我配置好的 github README模版, 大家可以參考一下: 美化你的github個(gè)人主頁(yè), 后期我會(huì)在數(shù)據(jù)可視化和工程化上輸出更多實(shí)用的開源項(xiàng)目和框架，如果有其他問題或需求，可以和筆者交流學(xué)習(xí)。
本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系趣談前端公眾號(hào)。
