共计 2487 个字符,预计需要花费 7 分钟才能阅读完成。
前言:哈喽,我是树酱。先聊聊本文的起源,某天在水群的时候看到某大佬的 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 指南