前言：哈喽，我是树酱。先聊聊本文的起源，某天在水群的时候看到某大佬的Github账户主页，颜值几乎爆棚。反观看树酱的Github主页，几乎就是“陋室”，难以入眼！或者很多开发的小伙伴跟我一样，平时在github上参加开源少了，可能操作最多的无非就是fork与star，就不会思考花工夫去打理。其实github主页也是咱们另一种名片的出现形式，更好的展现能够给她留下一个好的印象

1 筹备

首先咱们须要在github创立一个跟你github账号名称统一的仓库，并且创立一个README.md。就能够开始你的自定义github 主页了,SHOW TIME!

2.展现面

上图是开发者的github展现面的实例，基本上展现都是开发者自身github相干的信息，这个咋实现的呢？
其实实质上联合GitHub Readme Stats 提供的api，使得你的README能够 获取动静生成的 GitHub 统计信息

2.1 GitHub 统计卡片

上图中的展现区域，其实它只有一行代码就能够解决!

[![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账户名称统一 （最要害）
  • hide ：须要屏蔽的数据 比方 prs 等
  • show_icons: 是否显示图表
  • theme: 主题抉择
  • include_all_commits - 统计总提交次数而不是仅统计往年的提交次数  (boolean)

更多api请查阅：github-readme-stats

2.2 善于语言卡片

上图中的展现区域，同样是由GitHub Readme Stats 提供的api实现的

一行代码搞定！

[![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 关注沉闷图表

上图展现区域是github关注的曲线图，是由github-readme-activity-graph 提供的api实现的

一行代码搞定！跟上文提到的一样，同样都须要配置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开源我的项目中，咱们常常能够看到相似上图格调的徽章，那这个是这么展现进去呢？ 它就是shields

如何在线制作呢？ 还想手把手教学呢，本人看着去 链接

  • 动态展现的徽章

![](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)
  • 数据统计类型的徽章

npm 下载量统计：

总下载量：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 动静访问量徽章

  • visitor-badge

访问量徽章会在刷新时，主动累计加一的操作。一行代码搞定！ 前提你确认好你的page_id

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

更多信息：浏览官网文档：https://visitor-badge.glitch....)

  • antzuhl 二次元展现访问量

二次元的敌人也能够尝试应用这个计数器，二次元风一行代码搞定！

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

2.6 Git EMOJi

用emoji图标来做为git message提交的信息是不是难看多了？ 同时应用emoji能够让辨认提交的目标或者用意变得简略

而且一种图表代表一种提交格调，还有相干对立的文档

浏览：gitmoji | git 提交信息的 emoji 指南