**GitHub** 对于开发者而言，不仅是代码托管平台，更是一张公开的“数字名片”。
当别人点开你的 GitHub 主页时，首先映入眼帘的往往不是你的项目，而是 **Profile README**。一个设计精美、内容丰富的主页，能够更直观地展示你的技术栈、开发经历和个人特色
不过，我的个人主页长期处于一个默认状态，近期准备公开一波我的源代码，所以我决定美化我的Github主页
成品展示: [Github主页](https://github.com/sirvffg)
本文将记录我美化 GitHub 主页的整个过程，从 Profile README 的创建开始，到徽章（Shields）、GitHub Stats、贡献图、技能图标、动态打字效果、访问统计以及更多实用组件的配置，带你一步步打造一个属于自己的高颜值 GitHub 主页。希望这篇文章能够为正在美化 GitHub Profile 的你提供一些参考和灵感。
#### 第一步: 创建仓库
我们首先在 GitHub 上新建一个仓库，仓库名和自己 Github 用户名相同，然后添加一个 README.md 自述文件，在该文件里添加信息即可。
创建完成之后
可以看到右上角有个提示：
> **sirvffg/sirvffg** is a special repository.
> Its README.md will appear on your public profile.
> 这是一个特殊的仓库。
> 它的
README.md 会出现在你的首页中。
#### 主页侧边栏美化
在讲解如何定制之前，我们先关注下左侧也有个人信息展示
这个可以直接在个人首页上，点击左侧的 Edit profile 进行编辑
可以修改名字、签名（Bio）、邮箱、网站等等 . 按需填写你的主要信息即可。
#### 修改 README.md
接下来，你就可以通过修改 README.md 来定制主页了。由于是 Markdown 文件，扩展性很高，并且全面支持 emoji。
GitHub 上也有不少人收集优秀案例
[awesome-github-profile-readme](https://github.com/abhisheknaiidu/awesome-github-profile-readme)
[awesome-github-profiles](https://github.com/EddieHubCommunity/awesome-github-profiles)
[beautify-github-profile](https://github.com/rzashakeri/beautify-github-profile)
> **Tips**
>
> **注: **不过这些README.md 有些展示链接会有失效
##### README 布局设计
我将整个 README 分为了几个模块：
* 👋 顶部欢迎语
* 🙋 关于我（About Me）
* 🛠️ 技术栈（Tech Stack）
* 📊 GitHub 数据统计
* 📈 活跃贡献图（Contribution Graph）
* 🐍 Snake 贡献动画
##### 1.顶部底部开头结束动图
调用了 **Capsule Render** 生成波浪横幅，一个作为**页眉（Header）**，一个作为**页脚（Footer）**。
---
**顶部开头**
```html
```
### 参数说明
| 参数 | 作用 | 示例 |
| --------------------------- | ---------------- | -------- |
| `type=waving` | 横幅样式，使用波浪效果 | `waving` |
| `color=0:6C5CE7,100:a29bfe` | 渐变颜色，从 0% 到 100% | 紫色渐变 |
| `height=250` | 图片高度 | 250px |
| `section=header` | 作为顶部横幅 | `header` |
| `text=Galaxy` | 中间的大标题 | Galaxy |
| `fontSize=90` | 标题字体大小 | 90 |
| `fontAlignY=35` | 标题纵向位置 | 35 |
| `animation=fadeIn` | 淡入动画 | fadeIn |
| `fontColor=white` | 字体颜色 | 白色 |
| `desc=星尘为墨，落雨成章` | 副标题 | 自定义 |
| `descAlignY=55` | 副标题位置 | 55 |
---
**结束页脚 Footer**
```html
```
### 参数说明
```text
type=waving // 波浪样式
color=0:6C5CE7,100:a29bfe // 与顶部保持一致的渐变颜色
height=120 // 页脚高度
section=footer // 指定为底部
```
---
##### 2. 关于我（About Me）
GitHub Profile 的主体内容，通常都会先从 **About Me** 开始。
这一部分相当于一张个人简介，可以让访问者快速了解你的身份、开发方向以及联系方式，因此不建议写得过于冗长，突出重点即可。
**我的 About Me 如下：**
我使用了徽章（Shields.io）给大家简单介绍一下
例如，我主页中的联系方式：
```html
```
最终效果就是一排按钮：
***Shields.io 常用参数***
| 参数 | 作用 | 示例 |
| :--- | :--- | :--- |
| 左侧文字 | 徽章左侧显示的内容 | `Email` |
| 右侧文字 | 徽章右侧显示的内容 | `2648181326%40qq.com` |
| `color` | 设置徽章颜色，可填写颜色名称或十六进制颜色 | `red`、`blue`、`green`、`yellow`、`6C5CE7` |
| `style` | 设置徽章样式 | `flat`、`flat-square`、`plastic`、`for-the-badge`、`social` |
| `logo` | 设置左侧 Logo 图标，图标来自 **Simple Icons** | `github`、`git`、`java`、`php`、`docker` |
| `logoColor` | 设置 Logo 图标颜色 | `white`、`black`、`red` |
---
##### 3. 技术栈
我使用 **Skill Icons** 来生成我技术栈图标
| 参数 | 说明 | 示例 |
| :--- | :--- | :--- |
| `i` | 指定需要显示的图标，多个图标使用英文逗号 `,` 分隔 | `java,php,python,docker` |
| `perline` | 每行显示的图标数量 | `9` |
| `theme` | 设置图标主题（可选） | `light`、`dark` |
---
##### 4. 社区贡献
除了 GitHub Stats 之外，我选择了 **GitHub Profile Summary Cards** 来展示个人的 GitHub 数据统计。
它能够生成一系列卡片，例如：
* GitHub 统计信息（Stats）
* 各语言仓库数量（Repos per Language）
* 最常提交语言（Most Commit Language）
* 提交时间统计
* 提交日历
* 个人概览
**常用参数**
| 参数 | 作用 | 示例 |
| :--------- | :------------ | :------------------------------ |
| `username` | GitHub 用户名 | `sirvffg` |
| `theme` | 卡片主题（可选） | `github`、`tokyonight`、`dracula` |
| `width` | 图片宽度（HTML 属性） | `33%`、`300px` |
---
**常用卡片**
| 卡片 | API |
| :---------- | :--------------------------- |
| GitHub 数据统计 | `cards/stats` |
| 仓库语言占比 | `cards/repos-per-language` |
| 最常提交语言 | `cards/most-commit-language` |
| 提交时间统计 | `cards/productive-time` |
| 个人资料概览 | `profile-details` |
---
> **小提示：** 这些卡片都是通过 GitHub API 动态生成的，因此无需手动更新。每当你的 GitHub 数据发生变化，README 中展示的统计信息也会自动同步更新。
---
##### 4. Snake 贡献动画（贪吃蛇动画）
```html
```
参数说明
| 标签/参数 | 作用 |
| :------------- | :---------------------------- |
| `
` | 根据不同环境加载不同图片 |
| `` | 指定不同主题下加载的图片 |
| `media` | 判断当前 GitHub 使用浅色还是深色主题 |
| `srcset` | 对应主题下需要显示的 SVG 图片 |
| `` | 默认显示的图片（浏览器不支持 `picture` 时使用） |
| `width="100%"` | 图片宽度占满整个 README |
---
media 参数
GitHub 会自动识别用户当前使用的是浅色模式还是深色模式。
因此这里使用了：
| 参数 | 说明 |
| :---------------------------- | :------------------------------------------------ |
| `prefers-color-scheme: dark` | 深色主题时加载 `github-contribution-grid-snake-dark.svg` |
| `prefers-color-scheme: light` | 浅色主题时加载 `github-contribution-grid-snake.svg` |
这样不同主题下都会拥有最佳的显示效果。
---
### srcset
这里填写的是 GitHub Actions 自动生成的 SVG 文件。
例如：
```text
https://raw.githubusercontent.com/用户名/用户名/output/github-contribution-grid-snake.svg
```
如果你的用户名是：
```text
sirvffg
```
那么对应就是：
```text
https://raw.githubusercontent.com/sirvffg/sirvffg/output/github-contribution-grid-snake.svg
```
需要将其中的 **用户名** 修改为自己的 GitHub 用户名即可。
> **注意：** 这些 SVG 文件并不是手动上传的，而是通过 GitHub Actions 自动生成并更新。因此，在使用前需要先配置对应的 Action，否则链接会返回 404。
**注: 由于篇幅限制使用Chatgpt生成了图片我直接贴出yml文件**
[📎 snake.yml](/uploads/files/snake.yml)
将其中的 用户名 修改为自己的 GitHub 用户名即可 然后放入.github/workflows/ 目录中 运行Actions
### 最后我直接贴出我的README.md 下方直接可以下载
[📎 README.mdsirvffg.zip](/uploads/files/README.mdsirvffg.zip)
# 结语
至此，我的 GitHub Profile 就基本搭建完成了。
主页美化并没有固定的模板，也没有所谓的"标准答案"。有人喜欢简洁清爽，有人偏爱科技炫酷，还有人会加入各种有趣的动画和小彩蛋。真正重要的，并不是堆砌多少组件，而是能够通过这个页面展示自己的技术方向、兴趣爱好以及正在做的事情。
本文介绍的大部分组件都支持高度自定义，你可以根据自己的需求自由组合，也可以继续探索更多有趣的 GitHub README 项目，让主页变得更加丰富。
最后，如果本文对你有所帮助，欢迎给我的 GitHub 点一个 ⭐，或者一起交流 GitHub README 的更多玩法。如果你还有其他有趣的美化组件，也欢迎在评论区分享，我们一起完善这份 GitHub 主页美化指南。
愿你的每一次 Commit，都能成为贡献图上的一抹绿色；也愿你的每一个开源项目，都能遇见志同道合的伙伴。🌟 
