美化你的GitHub主页！

VGtime
738 阅读1分钟

众所周知，GitHub集成了一个功能，能够把与用户名相同的仓库的 README.md 直接展示到主页，这里我收集了绝大部分常见的功能组件

由于掘金的编辑器把图片转了一下，导致图片不是很清晰，可以去原仓库查看

仓库地址: github.com/peterroe/aw…

Awesome profile widget

Gathering all the awesome things in README.md

Badge

Case:

JavaScript Vue.js Visual Studio Code Node.js Stylus Rust pnpm

Template:

https://img.shields.io/badge/{name}-${bgColor}?style=${style}&logo=${logoName}&logoColor=${logoColor}&labelColor=${logoColor}

Visit: shields.io/

Demo

Vue.js


![Vue.js](https://img.shields.io/badge/Vue.js-4FC08D?style=flat-square&logo=Vue.js&logoColor=white)

param

name


Custom name

param

bgColor logoColor labelColor


Hex color or text color eg: ff02fA、red、blue

param

style


  • plastic
  • flat-square
  • for-the-badge
  • social

param

logoName


All effective value are here

Icons

Case:

Template:

https://cdn.jsdelivr.net/npm/simple-icons/icons/${logoName}.svg

Visit: github.com/simple-icon…

Demo


<img src="https://cdn.jsdelivr.net/npm/simple-icons/icons/redis.svg" width="40"/>

Param

logoName


All effective value are here

Case:

Template:

Visit: icon-sets.iconify.design/

https://api.iconify.design/${name}.svg?color=%23${logoColor}

Demo


<img src="https://api.iconify.design/carbon:4k-filled.svg?color=%23213ac3" width="40"/>

Demo


<img src="https://api.iconify.design/file-icons:test-typescript.svg?color=%23b5a43c" width="40"/>

Param

logoColor


Hex color

Logos

Case:

Template:

https://www.vectorlogo.zone/logos/${logoName}/{logoType}.svg

Visit: www.vectorlogo.zone/

Demo

img


![img](https://www.vectorlogo.zone/logos/pugjs/pugjs-ar21.svg)

Emoji

Case:

🤪 👻 🙊 🤴 🌶 ⏰ 🎁 ⚽ 🎲 📔

Template:

Visit: www.emojiall.com/en/all-emoj…

Demo

🌓 🎯 💻 📦 🗑 🚖 🔑 🏀 🌈


🌓 🎯 💻 📦 🗑 🚖 🔑 🏀 🌈

Top language

Case:

Template:

Visit: github.com/anuraghazra…

Visit: github.com/vn7n24fzkq/…

Demo

img


![img](https://github-readme-stats.vercel.app/api/top-langs/?username=peterroe)

Demo

img


![img](https://github-profile-summary-cards.vercel.app/api/cards
/most-commit-language?username=peterroe&theme=solarized_dark)

Stats

Case:

peterroe peterroe

Template:

Visit: github.com/anuraghazra…

Visit: github.com/ryo-ma/gith…

Demo

img


![img](https://github-readme-stats.vercel.app/api?username=peterroe)

Demo

img


![img](https://github-profile-trophy.vercel.app/?username=peterroe)

Demo

img


![img](https://github-profile-summary-cards.vercel.app/api/cards/stats
?username=peterroe&theme=solarized)

Streak

Case:

Template:

Visit: github.com/DenverCoder…

Demo

img


![img](https://github-readme-streak-stats.herokuapp.com/?user=peterroe)

Contribution Gragh

Case:

Template:

Visit: github.com/Ashutosh007…

Visit: github.com/vn7n24fzkq/…

Demo

img


![img](https://activity-graph.herokuapp.com/graph?username=peterroe&theme=github)

Demo

img


![img](https://github-profile-summary-cards.vercel.app/api/cards/profile-details
?username=peterroe&theme=monokai)

Demo

img


![img](https://github-profile-summary-cards.vercel.app/api/cards
/productive-time?username=peterroe)

Profile views

Case:

img

img

Template:

Visit: count.getloli.com/

Visit: github.com/antonkomare…

Demo

img


![img](https://count.getloli.com/get/@peterroe?theme=rule34)

Demo

img


![img](https://komarev.com/ghpvc/?username=peterroe&&style=flat-square)

Demo

img


![img](https://profile-counter.glitch.me/peterroe/count.svg)

Github skyline

Case:

2022 GitHub Skyline

Template:

Visit: skyline.github.com/

Demo

img


![img](https://skyline.github.com/peterroe/2022.png)

Stark Overflow

Case:

Template:

https://github-readme-stackoverflow.vercel.app/?userID=${userId}&theme=${theme}&layout={layout}

Visit: github.com/omidnikrah/…

Demo

img


![img](https://github-readme-stackoverflow.vercel.app/?userID=19174750&theme=dark)

Repos

Case:

Template:

https://github-readme-stats-anuraghazra1.vercel.app/api/pin/?username=${username}&repo={reponame}&theme=${theme}

Visit: github.com/anuraghazra…

Demo


<img src="https://github-readme-stats-anuraghazra1.vercel.app/api/pin/
?username=ungeui&repo=ungeui"/>

Octodex

Case:

Template:

https://octodex.github.com/images/${name}.png

Visit: octodex.github.com/

Demo


<img src="https://octodex.github.com/images/electrocat.png" width="200"/>

Support

Case:

Template:

https://cdn.buymeacoffee.com/buttons/default-${bgColor}.png https://cdn.buymeacoffee.com/buttons/v2/default-${bgColor}.png

Demo


<img src="https://cdn.buymeacoffee.com/buttons/default-pink.png" width="200"/>

Params

bgColor


red, green and other text colors are available.

avatar
文章
阅读
粉丝