給“她”一個有愛的Github主頁

?

前言：哈嘍，我是樹醬。先聊聊本文的起源，某天在水群的時候看到某大佬的Github賬戶主頁，顏值簡直爆棚。反觀看樹醬的Github主頁，簡直就是“陋室”，難以入眼！或者很多開發(fā)的小伙伴跟我一樣，平時在github上參與開源少了，可能操作最多的無非就是fork與star，就不會考慮花時間去打理。其實github主頁也是我們另一種名片的呈現(xiàn)方式，更好的展示可以給她留下一個好的印象

?

1 準(zhǔn)備

首先我們需要在github創(chuàng)建一個跟你github賬號名稱一致的倉庫，并且創(chuàng)建一個README.md。就可以開始你的自定義github 主頁了,SHOW TIME!

2.展示面

上圖是開發(fā)者的github展示面的實例，基本上展示都是開發(fā)者本身github相關(guān)的信息，這個咋實現(xiàn)的呢？其實本質(zhì)上結(jié)合GitHub Readme Stats 提供的api，使得你的README可以 獲取動態(tài)生成的 GitHub 統(tǒng)計信息

2.1  GitHub 統(tǒng)計卡片

上圖中的展示區(qū)域，其實它只要一行代碼就可以解決!

[![tree's GitHub stats](https://github-readme-stats.vercel.app/api?username=littleTreeme&
hide=contribs,prs&show_icons=true&theme=radical)](https://github.com/anuraghazra/github-readme-stats)

只不過需要配置下信息

• username：需要跟你github賬戶名稱一致 （最關(guān)鍵）
• hide ：需要屏蔽的數(shù)據(jù) 比如 prs 等
• show_icons: 是否顯示圖表
• theme:  主題選擇
• include_all_commits - 統(tǒng)計總提交次數(shù)而不是僅統(tǒng)計今年的提交次數(shù)  (boolean)

更多api請查閱：github-readme-stats

2.2 擅長語言卡片

上圖中的展示區(qū)域，同樣是由GitHub Readme Stats 提供的api實現(xiàn)的

一行代碼搞定！

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)

2.3 github 關(guān)注活躍圖表

上圖展示區(qū)域是github關(guān)注的曲線圖，是由github-readme-activity-graph 提供的api實現(xiàn)的

一行代碼搞定！跟上文提到的一樣，同樣都需要配置username

[![Ashutosh's github activity graph](https://activity-graph.herokuapp.com/graph?username=Ashutosh00710&theme=dracula)](https://github.com/ashutosh00710/github-readme-activity-graph)

2.4 徽章shield

在github開源項目中，我們經(jīng)?？梢钥吹筋愃粕蠄D風(fēng)格的徽章，那這個是這么展示出來呢？它就是shields

如何在線制作呢？還想手把手教學(xué)呢，自己看著去 鏈接

• 靜態(tài)展示的徽章

![](https://img.shields.io/badge/-Nodejs-43853d?style=flat-square&logo=Node.js&logoColor=white)
![](https://img.shields.io/badge/-WebRTC-008000?style=flat-square&logo=WebRTC&labelColor=90EE90&color=fff)
![](https://img.shields.io/badge/-JavaScript-e5cd0c?style=flat-square&logo=JavaScript&labelColor=f7df1e&logoColor=000)
![](https://img.shields.io/badge/-Vue.js-29beb0?style=flat-square&logo=vue.js&labelColor=ffffff&color=4FC08D)
![](https://img.shields.io/badge/-React-29beb0?style=flat-square&logo=React&labelColor=ffffff&color=61DAFB)

• 數(shù)據(jù)統(tǒng)計類型的徽章

npm 下載量統(tǒng)計：

總下載量：https://img.shields.io/npm/dt/{項目名稱}.svg
月下載量：https://img.shields.io/npm/dm/{項目名稱}.svg
周下載量：https://img.shields.io/npm/dw/{項目名稱}.svg

比如 axios請求庫的總下載量

其他徽章工具推薦：https://badgen.net/

2.5 動態(tài)訪問量徽章

• visitor-badge

訪問量徽章會在刷新時，自動累計加一的操作。一行代碼搞定！前提你確認(rèn)好你的page_id

![](https://visitor-badge.glitch.me/badge?page_id=littleTreeme)

更多信息：閱讀官網(wǎng)文檔：https://visitor-badge.glitch.me/#docs)

• antzuhl 二次元展示訪問量

二次元的朋友也可以嘗試使用這個計數(shù)器，二次元風(fēng)一行代碼搞定！

![](http://antzuhl.cn:4000/get/@littleTreeme)

2.6 Git EMOJi

用emoji圖標(biāo)來做為git message提交的信息是不是好看多了？同時使用「emoji」可以讓「識別提交的目的或者意圖」變得「簡單」

而且一種圖表代表一種提交風(fēng)格，還有相關(guān)統(tǒng)一的文檔

閱讀：gitmoji | git 提交信息的 emoji 指南