1. 创建仓库

创建一个以自己的用户名命名的仓库,并添加一个README.md的自述文件

2. 编辑文本

现在,我们在自述文件当中进行操作,将相关的链接以适当格式写入文件,就可以引入图标,本文中提到的图标和样式只是我的主页上使用的,大家可以通过浏览GitHub上大佬的仓库来找到自己喜欢的图标。

(1) 信息统计

样式

pp56Hc8.jpg

代码如下:

1
<div align="center"> <img src="https://metrics.lecoq.io/username?template=classic&config.timezone=Asia%2FShanghai"> </div>

将上述代码中的username替换为你自己的GitHub用户名,复制到文件中即可

(2)GitHub统计卡片

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

这是统计卡片在GitHub上官方的文档,里面详细记录了卡片的代码和样式,供大家自行使用,在此不多赘述。

(3)使用语言统计

GitHub - anuraghazra/github-readme-stats: Dynamically generated stats for your github readmes

样例代码:

1
<div align="center"> <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=username&hide_title=true&hide_border=true&layout=compact&langs_count=6&text_color=000&icon_color=fff&bg_color=0,52fa5a,4dfcff,c64dff&theme=graywhite" /> </div>

(4)github徽章

1
<span > <img src="https://img.shields.io/badge/-HTML5-E34F26?style=flat-square&logo=html5&logoColor=white" /> <img src="https://img.shields.io/badge/-CSS3-1572B6?style=flat-square&logo=css3" /> <img src="https://img.shields.io/badge/-JavaScript-oringe?style=flat-square&logo=javascript" /> </span>

相关的徽章还有很多,当然大家感兴趣也可以到Shields官网上寻找更多的样式

ps:上面的代码中将图标名更改也可以得到其他语言的徽章

(5)GitHub访问徽章

1
<div align="center"> <img src="https://visitor-badge.glitch.me/badge?page_id=username" /> </div>

(6)GitHub活动统计图

pp5c3HH.md.jpg

GitHub - Ashutosh00710/github-readme-activity-graph: A dynamically generated activity graph to show your GitHub activities of last 31 days.

样例代码:

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

同样,大家可以在详细文档中找自己喜欢的样式

(7)GitHub 连续打卡

代码:

1
<div align="center"> <img src="https://github-readme-streak-stats.herokuapp.com/?user=sun0225SUN" /> </div>

(8)打字特效

1
<h1 align="center"> <a href="https://sunguoqi.com/"> <img src="https://readme-typing-svg.herokuapp.com/?lines=console.log(%22Hello%2C%20World!%22);小孙同学祝您今天愉快!&center=true&size=27"> </a> </h1>

(9)其他图标

1
2
3
4
5
6
<img src="https://camo.githubusercontent.com/72fd54faa8a39aed97354ea788e55524a47c30e1da23dd321331260ab133a2b5/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f667345615a6c644e43384131504a336d77702f67697068792e676966" style="width:100px">
<img src="https://camo.githubusercontent.com/a3ccfae79c559d3ff0c7ece89882c93bf278d01f0d2a1d908e19497630dca49d/68747470733a2f2f692e67697068792e636f6d2f6d656469612f4c4d7439363338644f38646674416a74636f2f3230302e77656270" style="width:100px">
<img src="https://camo.githubusercontent.com/4d67389739aa53e876a878719fa61eeebea468ae0be6af71903fa8c4c9b72018/68747470733a2f2f692e67697068792e636f6d2f6d656469612f49647941514a564e326b56504e55726f6a4d2f3230302e77656270" style="width:100px">
<img src="https://camo.githubusercontent.com/ece04e9e6d8e7370a88024f41d544915e01ce71b5457326c08349cc282ccf2d4/68747470733a2f2f6d65646961332e67697068792e636f6d2f6d656469612f6c6e377a32655772696951416c6c6656636e2f323030772e77656270" style="width:100px">
<img src="https://camo.githubusercontent.com/0cad3f969b0946abd0e5f16e9ed1ff78a2495a40c2bb5c6414aefd4be76505aa/68747470733a2f2f692e67697068792e636f6d2f6d656469612f4b7a4a6b7a6a676766474e355079366e6b542f3230302e77656270" style="width:100px">
<img src="https://camo.githubusercontent.com/6d5046175630c6957619837efde1456cb34a30a463234660afc87c412abdd99d/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6b64466338667562675333316238447356752f67697068792e676966" style="width:100px">

这是我的主页上使用的一些常用语言的标示图,供大家参考