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

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

image.png


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


image.png


太难了,一些卡片的链接放到掘金里会自动转化掘金的域名,出现问题,会变成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>


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)


image.png



提交活动图


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

这里面有教程链接

有趣的图片和动图



目录
相关文章
|
21天前
|
开发工具 git 开发者
2024最简七步完成 将本地项目提交到github仓库方法
该文章提供了一个简洁的七步教程,指导用户如何将本地项目提交到GitHub仓库。
2024最简七步完成 将本地项目提交到github仓库方法
|
C语言
加速github 下载速度的方法
加速github 下载速度的方法
1994 1
|
3月前
|
程序员 Python
GitHub爆赞!最适合新手入门的教程——笨方法学Python 3
“Python 是一门既容易上手又强大的编程语言。”这句话本身并无大碍,但需要注意的是,正因为它既好学又好用,所以很多 Python 程序员只用到了其强大功能的一小部分。 今天给小伙伴们分享的这份手册以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现。
|
4月前
|
编译器 定位技术 开发工具
分布式版本控制系统Git的下载、安装与使用其复制GitHub项目代码的方法
分布式版本控制系统Git的下载、安装与使用其复制GitHub项目代码的方法
|
4月前
|
Linux 数据库
大学生参与GitHub开源项目的方法
大学生参与GitHub开源项目的方法
68 0
Github邮件联系项目源代码作者简单方法
Github邮件联系项目源代码作者简单方法
1750 0
Github邮件联系项目源代码作者简单方法
|
缓存 网络协议 程序员
解决GitHub下载速度太慢问题的方法汇总(持续更新,建议收藏)
解决GitHub下载速度太慢问题的方法汇总(持续更新,建议收藏)
|
Shell 网络安全 开发工具
Git的使用--如何将本地项目上传到Github(三种简单、方便的方法)(二)(详解)
Git的使用--如何将本地项目上传到Github(三种简单、方便的方法)(二)(详解)
1337 2
Git的使用--如何将本地项目上传到Github(三种简单、方便的方法)(二)(详解)
GitHub英译中设置方法
GitHub英译中设置方法
5968 0
GitHub英译中设置方法
|
Linux 开发工具 git
linux 将本地代码提交至github上(新版图文详解)
linux 将本地代码提交至github上(新版图文详解)
linux 将本地代码提交至github上(新版图文详解)