这是我目前的 Github 首页

Github Profile Readme美化效果汇总 - 图1

酷吧，虽然咱代码不会写，首先气势不能输，逼格总是要先装起来的，装着装着，说不定，就会写代码了呢！！！（大误 😄）

0 准备工作

需要新建一个和 Github 用户名相同的仓库，新建时会有下面这样的提示

Github Profile Readme美化效果汇总 - 图2

默认生成的 Readme 有注释文字，但是咱不用它（或许你想要在 Readme 简要介绍自己，也可）斤斤计较斤斤计较急急急急急急

  2. <!--
  3. **Achuan-2/Achuan-2** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
  5. Here are some ideas to get you started:
  7. - 🔭 I’m currently working on ...
  8. - 🌱 I’m currently learning ...
  9. - 👯 I’m looking to collaborate on ...
  10. - 🤔 I’m looking for help with ...
  11. - 💬 Ask me about ...
  12. - 📫 How to reach me: ...
  13. - 😄 Pronouns: ...
  14. - ⚡ Fun fact: ...
  15. -->

接下来开搞吧

1 打字特效

Github 地址：DenverCoder1/readme-typing-svg

打字特效生成网站：Readme Typing SVG - Demo Site

Github Profile Readme美化效果汇总 - 图3

效果图：

Github Profile Readme美化效果汇总 - 图4

  1. <p align="center">
  2.    <img src="https://readme-typing-svg.herokuapp.com?color=28696B&size=21&center=true&lines=%E9%97%AA%E9%97%AA%E5%8F%91%E4%BA%AE%EF%BC%8C%E9%97%AA%E9%97%AA%E5%8F%91%E4%BA%AE;Achuan-2+%E7%A5%9D%E4%BD%A0%E4%BB%8A%E6%97%A5%E6%84%89%E5%BF%AB" alt="typing-svg">
  3. </p>

2 社交关注者数目

用 Substats 配合 Shields.io 制作动态小牌子

📜 教程：用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子 - 少数派 (sspai.com)

📜Substats API 文档：Home | Substats Docs (spencerwoo.com)

动态图标

创建动态图标方法：点击进入这个网页 shields.io dynamic-badge

  • data type 选择 json 。
  • label 选择数据牌左侧你想展示的东西，比如我想展示的是 GitHub。
  • data url,找到自己想展示的 API URL，比如我的 GitHub URL 就是：https://api.spencerwoo.com/substats/?source=github&queryKey=Achuan-2。一般都只需要修改 source 后面的目标服务器以及 queryKey 后面的请求数据标签，前者一般都是平台名，后者一般都是用户名。
  • query 填： $.data.totalSubs。
  • color 填写一个十六进制的颜色代码，前面不加#。
  • 剩下两个分别是数据牌右侧展示数据的前缀和后缀，前缀可以不填，后缀可选填 followers

Github Profile Readme美化效果汇总 - 图5

生成结果点击此处查看：Github Followers

Github Profile Readme美化效果汇总 - 图6

我的代码，在 Readme 放入

  1. <p align="center">
  2. <a title="Hits" target="_blank" href="https://github.com/Achuan-2/Achuan-2"><img src="https://hits.b3log.org/Achuan-2/Achuan-2.svg" ></a>
  3. <a title="github" target="_blank" href="https://github.com/Achuan-2"><img src="https://img.shields.io/badge/dynamic/json?label=GitHub&suffix=%20followers&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dgithub%26queryKey%3DAchuan-2&labelColor=282c34&color=353940&logo=github&longCache=true" ></a>
  4. <a title="weibo" target="_blank" href="https://weibo.com/2139813304/profile"><img src="https://img.shields.io/badge/dynamic/json?labelColor=e71f19&color=353940&label=Weibo&suffix=%20followers&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dweibo%26queryKey%3D2139813304&logo=sina-weibo&longCache=true" ></a>
  5. <a title="zhihu" target="_blank" href="https://www.zhihu.com/people/achuan-2"><img src="https://img.shields.io/badge/dynamic/json?color=353940&labelColor=0084ff&label=Zhihu&suffix=%20followers&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dzhihu%26queryKey%3Dachuan-2&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjMzMjY1Mzc4NzU2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUxNTMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTc2LjggODA3LjUyaDU3LjI4bDIwLjggNzIuNDggMTAwLjgtNzIuNDhoMTQxLjkyVjIyOS4yOEg1NzYuOHogbTY3Ljg0LTUxMy45Mkg4MzJ2NDQ4aC02Ni4yNGwtODUuMTIgNjQuOTYtMTguNTYtNjQuOTZoLTE3LjQ0ek0xMjYuNCA4ODQuNDhhMTQ5LjQ0IDE0OS40NCAwIDAgMCAxMjMuODQtMTAuNGM2MC45Ni0zNiAxMDUuOTItMTk0LjU2IDEwNS45Mi0xOTQuNTZsMTQ0IDE3Ny40NHMxMy4xMi04NC40OC0yLjI0LTEwOC4zMi05OS4wNC0xMTkuODQtOTkuMDQtMTE5Ljg0bC0zNi42NCAzMiAyNi4wOC0xMDQuOTZINTQ0czAtNjEuNzYtMzAuNTYtNjUuMjgtMTI1LjQ0IDAtMTI1LjQ0IDB2LTE5Mkg1MjhzLTEuNi02NC0yOC44LTY0SDI3MC41NmwzNS41Mi0xMDQuNjRzLTU3LjYgMy4zNi03Ny45MiAzOS4zNi04Ni40IDIyMS42LTg2LjQgMjIxLjYgMjEuOTIgMTAuMjQgNTkuMi0xNy4yOGExNDcuNjggMTQ3LjY4IDAgMCAwIDQ5LjI4LTc1LjUybDY3Ljg0LTMuMzZMMzIwIDQ5MS4ycy0xMTYuOTYtMS43Ni0xNDAuNjQgMC0zNy4yOCA2NS4yOC0zNy4yOCA2NS4yOEgzMjBzLTE1LjIgMTA4LjE2LTYwLjk2IDE4Ny4yLTEzMi42NCAxNDAuOC0xMzIuNjQgMTQwLjh6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI1MTU0Ij48L3BhdGg+PC9zdmc+&longCache=true" ></a>
  6. <a title="bilibili" target="_blank" href="https://space.bilibili.com/349243695"><img src="https://img.shields.io/badge/dynamic/json?color=353940&labelColor=f27596&label=Bilibili&suffix=%20followers&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dbilibili%26queryKey%3D349243695&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAD7ElEQVR4nO2dW9WrMBCFK6ESkFAJSKiESqgEHCABCZWAhEpAAhL2ecik5dDc/pXLBDLfWnlqy0xmJ5BMQnq5CIIgCIIgCIIgCIIgCEIBAHQAemYfrgCunD6wAKAHsEKxALgx+bCQD8/S9tmgVqeDr1lLigDgZvDhXso+K9TyTBQRwRJ8AHjntl0Flh5QRAQK/mKxPeayWx2OXpBNBKiHvi34b7T2MC4pAvW6twR/RwkRKPizBN8CgEcuESj4Lwm+BwBjahEk+H8EwJRKhOaCDzW8e1JLfkUUH1NgmR3XmHffHR1l+72BSs8d7w8U+JDAnZERQMcV+CtUi7dNqFqibB4J7vtrq7xKCuAasbTMXCL4T+5aVk6+2xHUrWdhruAR6HIJcOeu2UHI8zyAe2ytWfEdWz9PVvQ8YAmIQ5dDAB9LFsMVAv8oMO2zAGrC5WNIarRiAuKR9jYEd9pY08aa6uUzIHGRdkgKd8pY0yc1WjEBAqypDYoAG0QAZkQAZkQAZkQAZk4vANQenjsSzS3I/wcSbXU5jQBUkRtdf4Rar90v8kSv3+I3ffCCSpk8I/w+lgDkdI/v2rEp2CaiWm1AsDQLlDAD+dlFXLMeAaCSeLZdaSFE5VUQNot38cKuEeBgAsSuG0flVZBmEanbXfNQAsS0fgBYIn2fIu3/BBMHEyBmDXlFfA8IzeHb+Ems4WAChKykrVA9ZfsQTL57jXzRg4A5wC/A8N4ADiZAZwm2XjW75Qh2KOTfA0p4kygPw28OJcCVgn3nDnYo2EwEYRgGH0qAMyICMCMCMCMCMCMCMCMCMCMCfP3qwHDOQ4AAUekTk8FaBRihJnZdYbvtCGC7LvmkM63GjVDINPFrQgCq5ETXfmMzI90FXzPvfqt7x4rEu/ZaEcCUxFvgz2zO+BUn6UkoaEEAsptiMSX5e8FoRYCN7cVgb4Vq7U/H50Pq4JNP7Qiw8UFnJwcK+tXy+Wj6PLEvPgHSHv5UgwA1IQIwwyFAyLJin9RoxYgAzAQIkPwNmf26busC+OIx5TDqo5nDT+F/SS/9CYzwb+No49zNy2evkYv0LywGGAXUvp6eSneycqOic0w20k7CNgKE7jJunSGLACTCxF27ylmQc98T5MQUH49swd+I0HPXslLKnT0N+wnkrTKi9JZL/L9i1SorMmdeQ4TQQ7OFMxIMzGD45w8nUL1im7efENZLJpgPSw0pfz0cdt4U3230Td/Tvx2R6d2FrHhEWLkq5PELOMsRPHCPnAZGv1xJteL7jbJiaW3sB2nDvPC/osSYvjRQz4cJ6n7KO3rYQL7M+L6nVtfDVRAEQRAEQRAEQRAEIZ5/SAXmdfXaoQsAAAAASUVORK5CYII=&longCache=true" ></a>
  7. <a title="coolapk" target="_blank" href="https://www.coolapk.com/u/787649"><img src="https://img.shields.io/badge/dynamic/json?color=30343b&labelColor=17a15e&label=Coolapk&suffix=%20followers&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dcoolapk%26queryKey%3D787649&logo=data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik0xMjcuODkzIDQyNi42NjdjMjkuOTItNjYuOTg3IDk0LjUwNy0xMTYuNjk0IDE2Ni40LTEzMC4zNDcgNTUuNzg3LTkuNiAxMTIuOTYgNS4wNjcgMTYxLjkyIDMxLjk0N0M0OTcuNzYgMzQ5LjQ0IDUzNC40IDM3OC44OCA1NjcuOTQ3IDQxMS4wNGMtMTYuMTYgMTguNC0zOS4wOTQgMjguODUzLTU3LjQ5NCA0NC43NDctNDYuMTMzLTM4Ljg4LTk2LjY0LTc3LjcwNy0xNTcuOTczLTg3LjA5NC03OC45MzMtMTMuMTczLTE1OC41NiA0OS4yMjctMTcwLjUwNyAxMjcuMTQ3LTguNjkzIDQ1LjkyIDEwLjEzNCA5NC42NjcgNDUuMTc0IDEyNC45MDcgMzkuNjggMzQuOTg2IDk3LjIyNiA0NC41ODYgMTQ3LjYyNiAzMS4yNTMgNTcuNi0xMy45MiAxMDEuOTc0LTU3LjA2NyAxMzYuODU0LTEwMi43NzMgNTQuMDgtNzIuMTA3IDk5LjItMTUwLjQgMTQ3Ljg0LTIyNi4xMzQgMTMuOTItMTkuMTQ2IDQ3LjQxMy0xNy4yMjYgNTguNzIgMy44NCA2My42MjYgMTA5LjAxNCAxMjYuMDggMjE4LjcyIDE4OS42IDMyNy43ODcgNy41NzMgMTUuMDkzIDQuNDI2IDM1Ljc4Ny05LjYgNDYuMTMzLTEzLjA2NyAxMC42MTQtMzMuMzM0IDEwLjI0LTQ2LjEzNC0uNjkzYTk3MDY2LjU1OCA5NzA2Ni41NTggMCAwMS0yMjYuMTg2LTE2Mi43MmMxOC44OC0xNS4wNCAzOC40LTI5LjMzMyA1Ny45NzMtNDMuNDY3IDIzLjczMyAxMi45MDcgNDMuNzg3IDMzLjE3NCA2OS42IDQxLjY1NC0yMC4zNzMtMzkuNTc0LTQzLjYyNy03Ny43MDctNjYuMzQ3LTExNS45NDctNDIuNjY2IDU5LjE0Ny03Ny4wNjYgMTI0LjIxMy0xMjMuMTQ2IDE4MS4wNjdDNTE2IDY2My40NjcgNDQ4LjggNzE2Ljk2IDM2OC42NCA3MjguNDhjLTM4Ljg4IDMuNDEzLTc5LjMwNyA0LjIxMy0xMTYuMzczLTkuOTczLTUzLjQ5NC0xOS4xNDctMTAwLjMyLTU4LjcyLTEyNC41ODctMTEwLjU2LTI4LjIxMy01Ni4xMDctMjYuNzczLTEyNS4wMTQuMjEzLTE4MS4yOHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=&longCache=true" ></a>
  8. </p>

Github Profile Readme美化效果汇总 - 图7Github Profile Readme美化效果汇总 - 图8Github Profile Readme美化效果汇总 - 图9Github Profile Readme美化效果汇总 - 图10Github Profile Readme美化效果汇总 - 图11

知乎、哔哩哔哩、酷安的图标，我是使用 base64 将 svg 进行转码的，所以很长~~

静态图标

如果不想显示关注者数目，则使用静态图标，以语雀徽标为例，填入

Github Profile Readme美化效果汇总 - 图12

得到 https://img.shields.io/badge/Yuque-blog-63cd77，Github Profile Readme美化效果汇总 - 图13

如果不想加文字，则去掉中间的文字，https://img.shields.io/badge/Yuque-63cd77，变为 Github Profile Readme美化效果汇总 - 图14

如果想加语雀的图标，则可以去图标网站下载语雀的 svg，然后转成 base64，

在后面加一个 ?logo=[base64 代码]

具体如下

  1. <a title="yuque" target="_blank" href="https://www.yuque.com/achuan-2"><img src="https://img.shields.io/badge/Yuque-5bd171?logo=data:image/svg+xml;base64,PHN2ZyB0PSIxNjMzNzAyNjAwNzQ0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM1ODkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDUxMm0tNTEyIDBhNTEyIDUxMiAwIDEgMCAxMDI0IDAgNTEyIDUxMiAwIDEgMC0xMDI0IDBaIiBmaWxsPSIjNUJEMTcxIiBwLWlkPSIzNTkwIj48L3BhdGg+PHBhdGggZD0iTTc2NS4yNDA4ODkgNDQyLjExMnM4LjMzNDIyMi0xMi43NDMxMTEgMTMuMDg0NDQ0LTI1LjUxNDY2N2M2LjIwMDg4OS0xNi4xMjggNy4zOTU1NTYtMzYuNTc5NTU2IDcuMzk1NTU2LTM2LjU3OTU1NWw0MC45MDMxMTEtNDEuNjQyNjY3LTUxLjg1NDIyMi01Ljc3NDIyMmMtMTEuOTE4MjIyLTI5LjM4MzExMS0yNi40MjQ4ODktNDMuMDkzMzMzLTQwLjY3NTU1Ni01Mi40OC0yOC43ODU3NzgtMTkuMDI5MzMzLTcwLjY1Ni0yNi43Mzc3NzgtMTMyLjUyMjY2Ni0yMy4zNTI4ODktNjIuMDY1Nzc4IDMuMzU2NDQ0LTEwMy43MDg0NDQgMjQuODAzNTU2LTExNS41OTgyMjMgMzAuODA1MzMzIDE5Ljk2OCA1Ljc3NDIyMiAyOC43ODU3NzggNy43MDg0NDQgNDEuNjE0MjIzIDE3LjU3ODY2NyAxMi44NTY4ODkgOS44NzAyMjIgMzMuMDgwODg5IDM4Ljk2ODg4OSAxNi42Njg0NDQgNzcuMDI3NTU2LTE2LjY2ODQ0NCAzOC4wMzAyMjItMzMwLjE4MzExMSAzNjcuMDc1NTU2LTM1MC44OTA2NjcgMzg4LjQ5NDIyMi0xMC45NTExMTEgMTEuMDkzMzMzIDEwMi41NDIyMjIgMjcuOTMyNDQ0IDE4OS42MTA2NjcgMjcuOTMyNDQ0IDc3LjUzOTU1NiAwIDEyOC45MTAyMjItMjcuMTkyODg5IDE2Ny43MDg0NDQtNjAuNjcyIDMxLjQwMjY2NyA4LjQ0OCAxMTAuNTkyIDIyLjM4NTc3OCAxNzguMTc2LTM5LjIyNDg4OSA4NC42NzkxMTEtNzcuMjU1MTExIDY4LjAxMDY2Ny0xNjYuNTcwNjY3IDY0LjY4MjY2Ny0xODQuNjA0NDQ0LTYuMTcyNDQ0LTMzLjQ3OTExMS0yMS42MTc3NzgtNTkuOTYwODg5LTI4LjMwMjIyMi03MS45NjQ0NDV6IiBmaWxsPSIjRkFGQkZDIiBwLWlkPSIzNTkxIj48L3BhdGg+PHBhdGggZD0iTTc2NC40MTYgNDQyLjM5NjQ0NGM1LjQwNDQ0NC02LjU5OTExMSA5LjE1OTExMS0xMy4wMjc1NTYgMTMuOTM3Nzc4LTI1Ljc5OTExMSA2LjE3MjQ0NC0xNi4xMjggNy4zMzg2NjctMzYuNTc5NTU2IDcuMzM4NjY2LTM2LjU3OTU1NWw0MC45MzE1NTYtNDEuNjQyNjY3LTUxLjg1NDIyMi01Ljc3NDIyMmMtMTEuOTE4MjIyLTI5LjM4MzExMS0yNi40MjQ4ODktNDMuMDkzMzMzLTQwLjY3NTU1Ni01Mi40OC0yOC43ODU3NzgtMTkuMDI5MzMzLTcwLjY1Ni0yNi43Mzc3NzgtMTMyLjUyMjY2Ni0yMy4zNTI4ODktNjIuMDY1Nzc4IDMuMzU2NDQ0LTEwMy43MDg0NDQgMjQuODAzNTU2LTExNS41OTgyMjMgMzAuODA1MzMzIDE5Ljk2OCA1Ljc3NDIyMiAyOC43ODU3NzggNy43MDg0NDQgNDEuNjE0MjIzIDE3LjU3ODY2NyAxMi44NTY4ODkgOS44NzAyMjIgMzMuMDgwODg5IDM4Ljk2ODg4OSAxNi42Njg0NDQgNzcuMDI3NTU2LTE2LjY2ODQ0NCAzOC4wMzAyMjItMzMwLjE4MzExMSAzNjcuMDc1NTU2LTM1MC44OTA2NjcgMzg4LjQ5NDIyMi0xMC45NTExMTEgMTEuMDkzMzMzIDEwMi41NDIyMjIgMjcuOTMyNDQ0IDE4OS42MTA2NjcgMjcuOTMyNDQ0IDc3LjUzOTU1NiAwIDEyOC45MTAyMjItMjcuMTkyODg5IDE2Ny43MDg0NDQtNjAuNjcyIDM3LjI2MjIyMi0zMy42NzgyMjIgODMuMDg2MjIyLTEwOC4wODg4ODkgMTAwLjIwOTc3OC0xNDEuMDI3NTU1IDYzLjY1ODY2Ny0xMjIuNTM4NjY3IDEwOC4xNDU3NzgtMTQ3LjkxMTExMSAxMTMuNTIxNzc4LTE1NC41MTAyMjN6IiBmaWxsPSIjRThFOUVCIiBwLWlkPSIzNTkyIj48L3BhdGg+PHBhdGggZD0iTTc2My44NDcxMTEgNDQyLjM5NjQ0NGM1LjQwNDQ0NC02LjU5OTExMSA5LjE1OTExMS0xMy4wMjc1NTYgMTMuOTA5MzMzLTI1Ljc5OTExMSA2LjE3MjQ0NC0xNi4xMjggNy4zOTU1NTYtMzYuNTc5NTU2IDcuMzk1NTU2LTM2LjU3OTU1NWw0MC45MDMxMTEtNDEuNjQyNjY3LTUxLjg4MjY2Ny01Ljc3NDIyMmMtMTEuODg5Nzc4LTI5LjM4MzExMS0yNi4zOTY0NDQtNDMuMDkzMzMzLTQwLjY3NTU1NS01Mi40OC0yOC43ODU3NzgtMTkuMDI5MzMzLTcwLjY1Ni0yNi43Mzc3NzgtMTMyLjQ5NDIyMi0yMy4zNTI4ODktNjIuMDk0MjIyIDMuMzU2NDQ0LTEwMy43MDg0NDQgMjQuODAzNTU2LTExNS41OTgyMjMgMzAuODA1MzMzIDE5Ljk2OCA1Ljc3NDIyMiAyOC43ODU3NzggNy43MDg0NDQgNDEuNjE0MjIzIDE3LjU3ODY2NyAxMi44NTY4ODkgOS44NzAyMjIgMzMuMDgwODg5IDM4Ljk2ODg4OSAxNi42Njg0NDQgNzcuMDI3NTU2LTExLjI2NCAyNS42ODUzMzMtMTU3Ljg2NjY2NyAxODQuMDM1NTU2LTI1OC4yNzU1NTUgMjkwLjgxNiAwIDAgMjA5LjIzNzMzMyA4My41OTgyMjIgMzQzLjk3ODY2Ni0xMTAuNTYzNTU2IDcwLjQ1Njg4OS0xMTEuNzI5Nzc4IDEyOS4wODA4ODktMTEzLjQzNjQ0NCAxMzQuNDU2ODg5LTEyMC4wMzU1NTZ6IiBmaWxsPSIjREVERkUwIiBwLWlkPSIzNTkzIj48L3BhdGg+PC9zdmc+" ></a>

预览：Github Profile Readme美化效果汇总 - 图15

3 GitHub Stats Card && Most used languages

Github 地址：anuraghazra/github-readme-stats

Github Profile Readme美化效果汇总 - 图16

Github Profile Readme美化效果汇总 - 图17

在 Readme 放入

  1. <div align="center">
  2. <span>  </span>
  3. <img height="170px" src="https://github-readme-stats.vercel.app/api?username=Achuan-2" /><span>  </span><img height="170px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Achuan-2&layout=compact&langs_count=8" />
  4. <span>  </span>
  5. </div>

4 GitHub streak（GitHub 连续打卡）

Github 地址：DenverCoder1/github-readme-streak-stats

Github Profile Readme美化效果汇总 - 图18

在 Readme 放入

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

5 GitHub Readme Activity Graph （GitHub 活动统计图）

Github 地址：Ashutosh00710/github-readme-activity-graph

Github Profile Readme美化效果汇总 - 图19

在 Readme 放入

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

6 贪吃蛇吃绿点

Github 地址： Platane/snk

Github Profile Readme美化效果汇总 - 图20

方法：

  1. 创建 ./.github/workflows/generate_snake.yml 文件，填入下面的代码，不需要修改 ```yaml

    GitHub Action for generating a contribution graph with a snake eating your contributions.

name: Generate Snake

on: watch: types: started schedule:

  1. - cron:  '0 0 * * *'

jobs: build: runs-on: ubuntu-latest

  1. steps:
  2.   - name: Checkout
  3.     uses: actions/checkout@v2.3.4
  5.   - name: Generate Snake
  6.     uses: Platane/snk@master
  7.     id: snake-gif
  8.     with:
  9.       github_user_name: ${{ github.repository_owner }}
  10.       gif_out_path: ./assets/github-contribution-grid-snake.gif
  11.       svg_out_path: ./assets/github-contribution-grid-snake.svg
  13.   - name: Push to GitHub
  14.     uses: EndBug/add-and-commit@v7.2.1
  15.     with:
  16.       branch: main
  17.       message: 'Generate Contribution Snake'
  2. 2. 在 Readme 放入 
  3.    - Gihub 默认地址 
  4. ```markdown
  5. <div align="center"><img src="https://raw.githubusercontent.com/Achuan-2/Achuan-2/main/assets/github-contribution-grid-snake.svg" ></div>
  • cdn 加速版本，但是 CDN 有缓存，需要手动刷新浏览器才能看到更新 
    1. <div align="center"><img src="https://cdn.jsdelivr.net/gh/Achuan-2/Achuan-2/assets/github-contribution-grid-snake.svg" ></div>

7 更新 hexo 博客和豆瓣动态

资料：利用 GitHub actions 在主页展示最近动态 - 知乎 (zhihu.com)

Github Profile Readme美化效果汇总 - 图21

  1. 创建 ./.github/workflows/update-events.yml 文件，填入，修改 blog_rss_link 和 douban_name ```yaml name: Update events

on: watch: types: started schedule:

  1. - cron:  '0 0 * * *'

jobs: update-social: runs-on: ubuntu-latest steps:

  1.   - name: Social Readme
  2.     uses: zylele/social-readme@master
  3.     with:
  4.       blog_rss_link: https://achuan-2.top/atom.xml
  5.       blog_limit: 10
  6.       douban_name: sjx270992395
  7.       douban_limit: 10
  2. 2. 在 Readme 放入 
  3. ```markdown
  4. ## 📺Social
  6. <table>
  7. <tbody>
  8.    <tr>
  9.        <td  valign="top" width="50%">
  11. ### 📝<a href="https://achuan-2.github.io/" target="_blank">Recent Blog</a>
  13. <!-- START_SECTION:blog -->
  15. <!-- END_SECTION:blog -->
  16. </td>
  17.        <td  valign="top" width="50%">
  19. ### 🎥 <a href="https://www.douban.com/people/sjx270992395/" target="_blank">Douban</a>
  21. <!-- START_SECTION:douban -->
  23. <!-- END_SECTION:douban -->
  24. </td>
  25.         </tr>
  26. </tbody>
  27. </table>

8 Dev Metrics in Readme

Github 地址：athul/waka-readme

Github Profile Readme美化效果汇总 - 图22

9 链滴动态

资料：使用 GitHub Actions 对 GitHub Profile 个人主页进行自动更新

Github Profile Readme美化效果汇总 - 图23

其他参考资料