--- theme: fancy --- ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/77579073adc343cc90ec6423f484b292~tplv-k3u1fbpfcp-watermark.image) > 前言：哈喽，我是树酱。先聊聊本文的起源，某天在水群的时候看到某大佬的Github账户主页，颜值简直爆棚。反观看树酱的Github主页，简直就是“陋室”，难以入眼！或者很多开发的小伙伴跟我一样，平时在github上参与开源少了，可能操作最多的无非就是`fork`与`star`，就不会考虑花时间去打理。其实github主页也是我们另一种名片的呈现方式，更好的展示可以给她留下一个好的印象 ### 1 准备首先我们需要在github创建一个跟你github账号名称一致的仓库，并且创建一个`README.md`。就可以开始你的自定义github 主页了,`SHOW TIME!` **![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27e7e083638a4e239a0c52eab4ad9295~tplv-k3u1fbpfcp-watermark.image)** ### 2.展示面 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/841cf2c7c85f46f7ad7ee1413ef31c72~tplv-k3u1fbpfcp-watermark.image) 上图是开发者的github展示面的实例，基本上展示都是开发者本身github相关的信息，这个咋实现的呢？其实本质上结合`GitHub Readme Stats` 提供的api，使得你的README可以获取动态生成的 GitHub 统计信息 #### 2.1 [GitHub 统计卡片](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md#GitHub-%E7%BB%9F%E8%AE%A1%E5%8D%A1%E7%89%87) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/192e88b4d9834593a8188aed3a9647bb~tplv-k3u1fbpfcp-watermark.image) 上图中的展示区域，其实它只要一行代码就可以解决! ``` [![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](https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_cn.md) ### 2.2 擅长语言卡片 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4c2831a662040e6b4734a86cd9f5fd3~tplv-k3u1fbpfcp-watermark.image) 上图中的展示区域，同样是由`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 关注活跃图表 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbd779f0d3554ae8b8420b6bba759cdd~tplv-k3u1fbpfcp-watermark.image) 上图展示区域是github关注的曲线图，是由[github-readme-activity-graph](https://github.com/Ashutosh00710/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 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/550fb42b2c5f45b58bc137c8d7d4895a~tplv-k3u1fbpfcp-watermark.image) 在github开源项目中，我们经常可以看到类似上图风格的徽章，那这个是这么展示出来呢？它就是`shields` 如何在线制作呢？还想手把手教学呢，自己看着去 [链接](https://shields.io/) - 静态展示的徽章 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b1fb7cbcf9b4be9a2e9fca970db33d3~tplv-k3u1fbpfcp-watermark.image) ``` ![](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/dt/%7B%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0%7D.svg)\ 月下载量：[https://img.shields.io/npm/dm/{项目名称}.svg](https://img.shields.io/npm/dm/%7B%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0%7D.svg)\ 周下载量：[https://img.shields.io/npm/dw/{项目名称}.svg](https://img.shields.io/npm/dw/%7B%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0%7D.svg) 比如 axios请求库的总下载量 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f0af994c3df4b2e86e635ed8fcfc733~tplv-k3u1fbpfcp-watermark.image) 其他徽章工具推荐： https://badgen.net/ ### 2.5 动态访问量徽章 - visitor-badge ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98dfeac03acd46f5b30231b6d6ebd7ef~tplv-k3u1fbpfcp-watermark.image) 访问量徽章会在刷新时，自动累计加一的操作。一行代码搞定！前提你确认好你的`page_id` ``` ![](https://visitor-badge.glitch.me/badge?page_id=littleTreeme) ``` 更多信息：阅读官网文档：https://visitor-badge.glitch.me/#docs) - antzuhl 二次元展示访问量 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da1a31858c474187a9c733e95b445c6e~tplv-k3u1fbpfcp-watermark.image) 二次元的朋友也可以尝试使用这个计数器，二次元风一行代码搞定！ ``` ![](http://antzuhl.cn:4000/get/@littleTreeme) ``` ### 2.6 Git EMOJi ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aef537f06a0c4a25be5f1be2090605a4~tplv-k3u1fbpfcp-watermark.image) 用emoji图标来做为git message提交的信息是不是好看多了？同时使用**emoji**可以让**识别提交的目的或者意图**变得**简单** 而且一种图表代表一种提交风格，还有相关统一的文档阅读：[gitmoji | git 提交信息的 emoji 指南](https://gitmoji.js.org/) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35a668a124ab464b9ae3b0110630024c~tplv-k3u1fbpfcp-watermark.image)

往期热门文章📖：

你好，我是🌲 树酱，请你喝杯🍵 记得三连哦～ 1.阅读完记得点个赞哦，有👍 有动力 2.关注公众号前端那些趣事，陪你聊聊前端的趣事 3.文章收录在Github frontendThings 感谢Star✨