GitHub 主页个性化总览（下）#

上篇介绍了 [[GitHub 主页个性化总览(上)|打字机效果和萌萌计数器]] ，这篇继续介绍静态徽章和技术栈图标。

Compare GitHub Repositories — Star History这个显示星星数的趋势图我也想玩，但是可惜我没有starred过。

Shields.io 静态徽章#

GitHub 官方只提供少量特定用途的徽章，主要用于 GitHub Actions 工作流状态、仓库状态等官方场景。不能自由定制。对于Logo、跳转链接等，GitHub 官方并不提供对应徽章

GitHub Actions 状态徽章官方教程：添加工作流状态徽章

一般使用 Shields.io 统一生成，既能自定义样式，也能接入 GitHub、npm、PyPI 等平台的动态数据。

静态徽章可以用来展示社交平台和联系方式，Shields.io 也支持从外部服务获取数据的动态徽章。

静态徽章官网：Shields.io

静态徽章生成页面：Static Badge | Shields.io

徽章图标查询：Simple Icons

其他教程：

在Markdown中使用 Shields.io 生成的徽章 - 厚礼蝎 - 博客园

用 Shields.io 数据牌 + GitHub 统计卡片美化你的 GitHub profile - 知乎

只介绍静态徽章，不介绍自动更新数据的动态徽章。

基础格式#

静态徽章的基本地址格式如下：

1
https://img.shields.io/badge/左侧文字-右侧文字-颜色

https://img.shields.io/badge/Blog-Visit-8A2BE2中blog为左侧文字，visit为右侧文字。

效果如下：

添加图标#

Logos | Shields.ioSimpleIcons 和 logoColor parameter 两节有相关教程

在链接后添加 logo 和 logoColor 参数：

1
![Blog](https://img.shields.io/badge/Blog-Visit-8A2BE2?logo=github&logoColor=red)

logo=github表示使用 github 图标。

logoColor=red表示将图标设置为红色。

可以在 Simple Icons 中搜索图标名称。

如果图标没有显示，通常是图标名称写错，或者 Shields.io 暂时不支持这个图标。

效果如下:

Blog

添加跳转链接#

GitHub Markdown 基础语法这个可以参考

只有图片时，点击徽章不会跳转：

1
![Blog](https://img.shields.io/badge/Blog-Visit-8A2BE2)

可以在图片外面套一层链接：

1
[![Blog](https://img.shields.io/badge/Blog-Visit-8A2BE2?logo=porkbun&logoColor=white)](https://springfieldcafe.github.io/404/)

也可以使用 HTML：

1
<a href="https://springfieldcafe.github.io/404/">
2
  <img
3
    src="https://img.shields.io/badge/Blog-Visit-8A2BE2?logo=porkbun&logoColor=white"
4
    alt="Blog"
5
  />
6
</a>

效果如下：

Blog

居中展示多个徽章#

Quickstart for writing on GitHub

页面开头的 Introduction 部分说明 Markdown 可以配合部分 HTML 标签使用；Adding an image to suit your visitors 部分给出了在 README 中使用 HTML 图片标签的示例。

Markdown 不方便精确控制多个徽章的位置和间距，所以这里使用 HTML。

每个 <a> 标签负责跳转，内部的 <img> 标签负责展示徽章。

普通换行和缩进产生的空白距离不方便控制，因此这里使用   明确设置徽章间距。

为了避免徽章之间出现细蓝线，可以把 <a> 和内部的 <img> 写在同一行，不要在链接标签内部保留换行和缩进空白。

下面的写法本身没有语法错误，但在部分 Markdown 渲染器或博客主题中，<a> 标签内部的换行和缩进可能形成空白链接区域，并被显示成细蓝线：

1
<p align="center">
2
  <a href="https://example.github.io/">
3
    <img
4
      src="https://img.shields.io/badge/Blog-Visit-8A2BE2?logo=githubpages&logoColor=white"
5
      alt="Blog"
6
    />
7
  </a>
8
  <a href="https://space.bilibili.com/example">
9
    <img
10
      src="https://img.shields.io/badge/Bilibili-Follow-00A1D6?logo=bilibili&logoColor=white"
11
      alt="Bilibili"
12
    />
13
  </a>
14
</p>

徽章之间的间距使用   控制，并且要放在 </a> 标签外面。

1
<p align="center">
2
  <a href="https://example.github.io/"><img src="https://img.shields.io/badge/Blog-Visit-8A2BE2?logo=githubpages&logoColor=white" alt="Blog" /></a>&nbsp;
3
  <a href="https://space.bilibili.com/example"><img src="https://img.shields.io/badge/Bilibili-Follow-00A1D6?logo=bilibili&logoColor=white" alt="Bilibili" /></a>&nbsp;
4
  <a href="https://www.zhihu.com/people/example-user"><img src="https://img.shields.io/badge/Zhihu-Read-0084FF?logo=zhihu&logoColor=white" alt="Zhihu" /></a>&nbsp;
5
  <a href="https://blog.csdn.net/example_user"><img src="https://img.shields.io/badge/CSDN-Blog-FC5531?logo=csdn&logoColor=white" alt="CSDN" /></a>&nbsp;
6
  <a href="mailto:example@example.com"><img src="https://img.shields.io/badge/Email-Contact-D14836?logo=gmail&logoColor=white" alt="Email" /></a>
7
</p>

效果如下：

修改徽章样式#

Shields.io 支持多种样式：

1
flat
2
flat-square
3
plastic
4
for-the-badge
5
social

1
![Blog](https://img.shields.io/badge/Blog-Visit-8A2BE2?style=for-the-badge&logo=porkbun&logoColor=white)

效果如下：

Blog

未指定style时默认使用 flat

技术栈图标#

技术栈图标可以直观展示自己使用过的语言、框架和工具。

我参考了这几个网址：

Skill Icons

免费的剪贴画和插图——矢量的SVG、PNG图像，下载的Ouch图像

Getting Started

DEVICON | All programming languages and development tools related icons font

还是认为skill icons最好，其他几个虽然图标比 Skill Icons 多，但是需要一个个下载，或者一个个输入 Markdown 在线网址，非常麻烦。Skill Icons 在线引用，一行html就可以搞定。

技术栈图标官网：Skill Icons

技术栈图标仓库和完整图标列表：tandpfun/skill-icons

基础写法#

1
[![My Skills](https://skillicons.dev/icons?i=py,c,cpp)](https://skillicons.dev)

效果如下：

把 i= 后面的内容换成需要展示的图标名称，图标之间使用英文逗号分隔：

1
i=py,c,cpp

图标名称需要在 Skill Icons 仓库的图标列表中查找，如果仓库里面没有写上去的图标，它就不会显示。

设置明暗主题#

不写的时候，默认是theme=dark

深色主题：

1
![My Skills](https://skillicons.dev/icons?i=py,c,cpp&theme=dark)

浅色主题：

1
![My Skills](https://skillicons.dev/icons?i=py,c,cpp&theme=light)

设置每行数量#

使用 perline 可以控制每行显示多少个图标：

1
![My Skills](https://skillicons.dev/icons?i=py,c,cpp,cmake,latex,md,html,ts,js,css&perline=5)

这里表示每行显示五个图标。

图标较多时可以使用 perline 自动换行，也可以自己拆成多行。

展示示例#

1
## 🛠️ My Skills
2

3
---
4

5
### Languages
6

7
<p align="center">
8
  <img
9
    src="https://skillicons.dev/icons?i=py,c,cpp,cmake,latex"
10
    alt="Languages"
11
  />
12
</p>
13

14
<p align="center">
15
  <img
16
    src="https://skillicons.dev/icons?i=md,html,ts,js,css"
17
    alt="Languages"
18
  />
19
</p>
20

21
---
22

23
### Frameworks
24

25
<p align="center">
26
  <img
27
    src="https://skillicons.dev/icons?i=pytorch,opencv,sklearn,qt,django,flask,fastapi"
28
    alt="Frameworks"
29
  />
30
</p>
31

32
<p align="center">
33
  <img
34
    src="https://skillicons.dev/icons?i=ros,astro,react,vue"
35
    alt="Frameworks"
36
  />
37
</p>
38

39
---
40

41
### Dev Tools / DevOps
42

43
<p align="center">
44
  <img
45
    src="https://skillicons.dev/icons?i=git,github,linux,docker,vscode,anaconda"
46
    alt="Development Tools"
47
  />
48
</p>
49

50
<p align="center">
51
  <img
52
    src="https://skillicons.dev/icons?i=obsidian,notion,postman,ps,pr,ae"
53
    alt="Other Tools"
54
  />
55
</p>

🛠️ My Skills#

Languages#

$Languages$

Frameworks#

Frameworks

Dev Tools / DevOps#

Other Tools

GitHub 主页个性化总览（下）#

Shields.io 静态徽章#

基础格式#

添加图标#

添加跳转链接#

居中展示多个徽章#

修改徽章样式#

技术栈图标#

基础写法#

设置明暗主题#

设置每行数量#

展示示例#

🛠️ My Skills#

Languages#

Frameworks#

Dev Tools / DevOps#

音乐

文章目录

GitHub 主页个性化总览(下)

GitHub 主页个性化总览（下）#

Shields.io 静态徽章#

基础格式#

添加图标#

添加跳转链接#

居中展示多个徽章#

修改徽章样式#

技术栈图标#

基础写法#

设置明暗主题#

设置每行数量#

展示示例#

🛠️ My Skills#

Languages#

Frameworks#

Dev Tools / DevOps#

音乐

文章目录