GitHub个人主页美化
效果展示
展示为静态效果,动态效果请查看我的GitHub页面
创建GitHub仓库
创建与GitHub
用户名相同的仓库,当仓库名与用户名相同时,此仓库会被视作特殊仓库,其README.md
(自述文件)会展示在GitHub
个人主页,以我的GitHub
举例,我GitHub
用户名是gzzzxx
,就要创建一个名为gzzzxx
的仓库
注意:此仓库须设置为公开状态!
顶部和底部动图
开源项目
页面顶部
1 | <p align="center"> |
页面底部
1 | <p align="center"> |
打字机效果
开源项目
代码
1 | <p align="center"> |
GitHub数据概览、项目语言比例
开源项目
代码
将代码中username=
后面改为你自己的用户名1
2
3
4
5
6
7
8
9
10
11
12
13
14<picture>
<source
srcset="https://github-readme-stats.vercel.app/api?username=gzzzxx&show_icons=true&hide_border=true&line_height=24&theme=dark"
media="(prefers-color-scheme: dark)"
/>
<img src="https://github-readme-stats.vercel.app/api?username=gzzzxx&show_icons=true&hide_border=true&line_height=24" />
</picture>
<picture>
<source
srcset="https://github-readme-stats.vercel.app/api/top-langs/?username=gzzzxx&layout=compact&hide_border=true&langs_count=8&theme=dark"
media="(prefers-color-scheme: dark)"
/>
<img src="https://github-readme-stats.vercel.app/api/top-langs/?username=gzzzxx&layout=compact&hide_border=true&langs_count=8" />
</picture>
贡献折线图
开源项目
代码
将代码中username=
后面改为你自己的用户名1
<img width="800" src="https://github-readme-activity-graph.vercel.app/graph?username=gzzzxx&theme=github-compact&hide_border=true&area=true" />
技术栈图标展示
开源项目
代码
1 | <img align="center" src="https://go-skill-icons.vercel.app/api/icons?i=java,html,css,js,jquery,nodejs,ts,md,vue,vite,py,docker,linux,nginx"> |
徽章
开源项目
代码
代码中给出的是我个人页面的内容,请根据自己需求进行修改1
2
3
4
5
6
7<p align="center">
<a href="https://github.com/gzzzxx"><img src="https://img.shields.io/badge/GitHub-gzzzxx-blue?logo=github" /></a>
<a href="https://gitee.com/gzzzxx"><img src="https://img.shields.io/badge/Gitee-gzzzxx-red?logo=gitee&logoColor=rgb(199, 29, 35)" /></a>
<a href="https://blog.csdn.net/weixin_41386222?type=blog"><img src="https://img.shields.io/badge/CSDN-Gzzz__-green?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAB+FBMVEUAAABqMy7wroeAUEvuso1vOTNwOzbxt5WKYFyniYm/qKLe3s1sNTBsNjGQVkhvODR6Rj7ip4XutZOCU07wtpXxupnst5eKXFmJXlrwu5qKbWryv6Hzx62gfXuwiYb44tNvODNWNSuKUUbwr4iKUkXwsImCVUZ3Qjt5UkN3QjvwsYtGLSfws454SERyPzp4RD/ws4/ws49xPzvvtI/xtJBPODJ7S0Z7SkXWnIFiTkbVnIGCU0/ps5TxvaDwvqGSaWWSaGiOaGSTb2uPamXzx7HxyrCjhHrwrYVqMi3wrITuq4RrMy63eF9jPS/Cg2fupoLqqIHopoDfn3rXlnXAfmSwcluNWkfioHzmkXrihXXccW2zdFypbFehZlKFWUVzSTlwSTh7QThuNS9VMyjto4HlpH7ionzjh3bXmXXOkG/Mi22tb1l/UUB9TT15TDxtRzZcNytZNypRMCVPLiTrnn/cnXnZm3fZmHbhgXTddG7IiGvMgGrPY2S2gGK+e2K1dl7CXV6uel28WlqocFika1WnalWdbFOaYk6dYE6SYUySVkaQVUaIVkSCV0OHVEOJTkF4UD2CRTxmQTJaLCZXKyVNKyJJJR9EIx0+IRrTknLffXLabWzZbGzFi2u5emGucFqicVeXaFCSXUp1STpdOy1hNyxdMilXMCfoEl0hAAAAR3RSTlMA/vqLn+7meVAWDgX59/X13LSGgoF7c2hdVlJQLSklEff18/Ly7+zs5ubi4djX1szHxMG5uLSjnZaJhn1pXldEPT05Ny4nGbaUVn8AAAIPSURBVDjLvdNFlxpBEMDxBgLsknX3jbu7e1I1wzC4OyzusO7u7nFPvmYGwr4HWZJc8vI71at/H/rQTf65g3/pReclTX/qj0rKL175fW4ViBCRd0HQWjC/uFGCWaU3i/f3hyLMIXq873alKJVma3oqL8rvTw7Ns+qeALOCuMIEetTsvPBpbpdUsBSk0SMjdGag2ApJzgEBC4qxJdtQJtJDNtuYAjSCvfpMfKeMUslkOp3MoQTwxNLTup4uuyVuSfcqPoTeUfbIicN2JqoDsEW1p9zh6CowIeDXEXIfaMNasHtr+fb1nWXG7fEmGXvT2e2ZlCq4ZqChmVwC46Ar+DYe2dndjAzHk6nEsGx7d+NTPNDvGvTBVXKGMo3ie3/K8n3jm0WT6PK7NTNbm1/Nya4QjvbBOXIZjOPoVK4vmq1mzdwSUKtzGq2VWYwpnTjug2vkAdADiFa12z45EZZ5AVRfwhOTnxPdVsQBit9MiJivkqJ0Vv0x5vig1FOU3jPtcEz7Z7mlil9LOC33TiOiUwEAL139rEvNDQontzpZ95z8VI2IC8BRar16rSI9LXCrarKnWIhogTwWRGHOo2jgoRnA4Ms0ymgA0CKvgeS4y5sC6DAZ5UB19PbJAaZ4ApKn/gjNnXj1xmR63ct1+lg9+UVbJXDknZ1y4FS2Ffgytcch62hN4f/T3lhzgFPV2E7+qx9xsqq+PsbsOwAAAABJRU5ErkJggg==" /></a>
<a href="https://blog.gzzz.pro"><img src="https://img.shields.io/badge/Blog-blog.gzzz.pro-pink?logo=Blogger&logoColor=rgb(135, 206, 250)" /></a>
<a href="https://github.com/gzzzxx"><img src="https://komarev.com/ghpvc/?username=gzzzxx&abbreviated=true&color=yellow" ></a>
</p>
完成
完整README.md
文件可参考我的GitHub
地址:https://github.com/gzzzxx/gzzzxx
参考自「GitHub 个人主页的究极美化攻略」