743 字
4 分钟
GitHub主页添加贪吃蛇贡献图(github美化一)
TIP

这个功能的原理是基于 snk 项目,通过 GitHub Action 读取贡献数据,将其渲染成一个贪吃蛇动画,输出成 SVG/GIF 格式。

准备工作:创建 Profile README 仓库#

在开始之前,您需要一个特殊的 GitHub 仓库来展示您的个人主页。这个仓库的名称必须与您的 GitHub 用户名完全相同。

创建步骤#

  1. 登录您的 GitHub 账户,在页面右上角点击 + 号,然后选择 New repository(新建仓库)。
  2. Repository name(仓库名称)字段中,输入与您的 GitHub 用户名完全匹配的名称。
  3. 将仓库设置为 Public(公开)。
  4. 勾选 Add a README file(添加一个 README 文件)选项。
  5. 点击 Create repository(创建仓库)完成创建。

创建成功后,这个仓库中的 README.md 文件内容将会自动显示在您的 GitHub 个人主页顶部。


核心步骤:配置 GitHub Action#

通过 GitHub Actions 自动化生成和更新贪吃蛇动画。

第一步:创建 Workflow 文件#

在您的 Profile README 仓库中创建以下目录结构:

.github/
└── workflows/
    └── snake.yml

第二步:编写 snake.yml 文件#

将以下 YAML 代码复制到 snake.yml 文件中:

name: Generate Snake Animation

# 控制工作流的触发时机
on:
  # 每天 UTC 时间午夜 00:00 自动运行
  schedule:
    - cron: "0 0 * * *"
  # 允许在 Actions 标签页手动触发
  workflow_dispatch:
  # 当推送到 main 分支时触发
  push:
    branches:
      - main

jobs:
  generate:
    permissions:
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
      # 生成贪吃蛇动画文件
      - name: Generate snake.svg
        uses: Platane/snk@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-snake.svg
            dist/github-snake-dark.svg?palette=github-dark
            dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

      # 将生成的文件推送到 output 分支
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v4
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

第三步:配置仓库权限#

为 GitHub Action 授予正确的权限:

  1. 在仓库页面点击 Settings(设置)。
  2. 在左侧导航栏选择 Actions -> General
  3. 向下滚动到 Workflow permissions(工作流权限)部分。
  4. 选择 Read and write permissions(读写权限)。
  5. 点击 Save(保存)。

第四步:运行 Action 并验证结果#

  1. 提交 snake.yml 文件后,前往仓库的 Actions 标签页。
  2. 点击 Generate Snake Animation 工作流。
  3. 等待自动运行或点击 Run workflow 手动触发。
  4. 成功运行后(显示绿色对勾),切换到 output 分支。
  5. 您会看到生成的 github-snake.svggithub-snake-dark.svgocean.gif 文件。

最后一步:在主页展示贪吃蛇#

编辑 README.md 文件,添加以下代码片段:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/您的用户名/您的用户名/output/github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/您的用户名/您的用户名/output/github-snake.svg" />
  <img alt="github-snake" src="https://raw.githubusercontent.com/您的用户名/您的用户名/output/github-snake.svg" />
</picture>

重要提示:请将代码中的 您的用户名 替换为您自己的 GitHub 用户名。


自定义配置#

您可以根据喜好自定义贪吃蛇的样式,主要通过 outputs 参数配置:

参数说明示例
color_snake蛇的颜色orange
color_dots点的颜色(逗号分隔)#bfd6f6,#8dbdff
palette预设调色板github-dark

更多配置选项请参考 snk 官方文档

GitHub主页添加贪吃蛇贡献图(github美化一)
https://blog.ai-nous.com/posts/github主页添加贪吃蛇贡献图/
作者
PankitGG
发布于
2026-05-08
许可协议
CC BY-NC-SA 4.0