TIP这个功能的原理是基于 snk 项目,通过 GitHub Action 读取贡献数据,将其渲染成一个贪吃蛇动画,输出成 SVG/GIF 格式。
准备工作:创建 Profile README 仓库
在开始之前,您需要一个特殊的 GitHub 仓库来展示您的个人主页。这个仓库的名称必须与您的 GitHub 用户名完全相同。
创建步骤
- 登录您的 GitHub 账户,在页面右上角点击 + 号,然后选择 New repository(新建仓库)。
- 在 Repository name(仓库名称)字段中,输入与您的 GitHub 用户名完全匹配的名称。
- 将仓库设置为 Public(公开)。
- 勾选 Add a README file(添加一个 README 文件)选项。
- 点击 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 授予正确的权限:
- 在仓库页面点击 Settings(设置)。
- 在左侧导航栏选择 Actions -> General。
- 向下滚动到 Workflow permissions(工作流权限)部分。
- 选择 Read and write permissions(读写权限)。
- 点击 Save(保存)。
第四步:运行 Action 并验证结果
- 提交
snake.yml文件后,前往仓库的 Actions 标签页。 - 点击 Generate Snake Animation 工作流。
- 等待自动运行或点击 Run workflow 手动触发。
- 成功运行后(显示绿色对勾),切换到
output分支。 - 您会看到生成的
github-snake.svg、github-snake-dark.svg和ocean.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 官方文档。
