打造属于自己的 GitHub 主页：设计与优化记录

**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，都能成为贡献图上的一抹绿色；也愿你的每一个开源项目，都能遇见志同道合的伙伴。🌟