gitHub的readme页的卡片和提交活动图的制作方法经常逛gitHub就会发现，有很多用户的介绍页面花里胡哨的各种

经常逛gitHub就会发现，有很多用户的介绍页面花里胡哨的各种 GitHub 数据卡片和徽章，今天就跟大家分享一下，这些东西怎么做！

😭😭😭太难了，一些卡片的链接放到掘金里会自动转化掘金的域名，出现问题，会变成p3-juejin.byteimg.com这个域名，手动改了几个，太痛苦了

后续我会把这些放到这个 readme-become-better 项目里了

GitHub 卡片

Github 有很多动态生成的官方统计信息，利用这些统计信息我们可以更清晰地展现个人 Github 中的提交、分类、热门等信息。

自述记录统计数据

卡片链接:https://github-readme-streak-stats.herokuapp.com?user=dongyuanwai&theme=radical

👇把下面的这段代码复制到你的README.md文档中,将username=自己的gitHub名字,就可以得到卡片样式

<div align="center">
  <img  src="https://github-readme-streak-stats.herokuapp.com?user=dongyuanwai&theme=onedark&date_format=M%20j%5B%2C%20Y%5D" />
</div>

在这个网站上👉GitHub Readme Streak Stats👈您可以直接选择样式，或者自己设计颜色搭配方式

统计卡片

stats卡片链接：https://github-readme-stats.vercel.app/api?username=dongyuanwai&theme=dark&show_icons=true

👇把下面的这段代码复制到你的README.md文档中,将username=自己的gitHub名字,就可以得到卡片样式

![Dong Yuanwai's GitHub stats](https://github-readme-stats.vercel.app/api?username=dongyuanwai&theme=dark&show_icons=true)

gitHub-readme文档可以不仅可以使用mardown语法，还支持html语法。所以你可以进行插入图片、设置位置等操作

👇把下面的这段代码复制到你的README.md文档中,将username=自己的gitHub名字,就可以得到卡片样式

<div align="center">
  <img  src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5391ef2e449b4483b61a907c43e0af62~tplv-k3u1fbpfcp-zoom-1.image" />
</div>

通过对卡片链接的操作,您可以进行修改theme值进行改变样式，hide隐藏图标、数据等操作

更多的内容可以查看官方的文档 👉 GitHub Readme Stats 👈

提交活动图

提交活动图链接:https://activity-graph.herokuapp.com/graph?username=dongyuanwai

👇把下面的这段代码复制到你的README.md文档中,将username=自己的gitHub名字,就可以得到卡片样式

![Dong Yuanwai's github activity graph](https://activity-graph.herokuapp.com/graph?username=dongyuanwai&theme=dracula)

通过对链接尾部传不同的参数，可以控制卡片的布局，和样式

👇把下面的这段代码复制到你的README.md文档中,将username=自己的gitHub名字,就可以得到卡片样式

<div align="center">
  <img  src="https://activity-graph.herokuapp.com/graph?username=dongyuanwai&theme=minimal" />
</div>

你可以修改主题颜色，自定义背景色和标题名等

更多的内容可以查看官方的文档 👉 Github Readme Activity Graph 👈

数据牌-徽章

在浏览 GitHub 项目的时候，经常可以发现很多项目使用数据牌进行展示项目的数据，不仅实用，还有美化的作用

静态徽章

静态徽章链接:https://img.shields.io/badge/

👇把下面的这段代码复制到你的README.md文档中,将左面文案-右边文案-右边背景色,就可以得到静态徽章样式

动态数据牌

把自己的项目地址复制进去，就可以获取到 issues数、star数、fork数等

更多制作方式你可以访问它的官网👉 shields数据牌 👈

制作徽章的地址

探索

😭😭😭太难了，一些卡片的链接放到掘金里会自动转化掘金的域名，出现问题

后续我会把这些放到这个 readme-become-better 项目里了

还有其他的一些更好玩的东西和教程，目前正在继续探索和发掘，

👉 readme-become-better 👈

这里面有教程链接

有趣的图片和动图

gitHub的readme页的卡片和提交活动图的制作方法

GitHub 卡片

自述记录统计数据

统计卡片

热门语言卡片

提交活动图

数据牌-徽章

静态徽章

动态数据牌

制作徽章的地址

探索