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

4,056 阅读3分钟

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

image.png

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

image.png

后续我会把这些放到这个 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>

image.png 在这个网站上👉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)

image.png 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>

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

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

热门语言卡片

热门语言链接:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6228c53cc09d41e3a7ddf14e27aa6b47~tplv-k3u1fbpfcp-zoom-1.image

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

![Top Langs](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7533b92fb76d499b9a7e713ff3057af2~tplv-k3u1fbpfcp-zoom-1.image)

Top Langs


提交活动图

提交活动图链接: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)

image.png

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

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

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

image.png

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

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

数据牌-徽章

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

image.png

静态徽章

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

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

image.png

动态数据牌

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

image.png

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

制作徽章的地址

探索

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

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

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

👉 readme-become-better 👈

这里面有教程链接

有趣的图片和动图