GitHub主页添加贪吃蛇贡献图(github美化一)
758 字
4 分钟
GitHub主页添加贪吃蛇贡献图(github美化一)
你可以点击我的主页查看效果
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 官方文档。
支持与分享
如果这篇文章对你有帮助,欢迎分享给更多人或赞助支持!
GitHub主页添加贪吃蛇贡献图(github美化一)
https://blog.ai-nous.com/posts/github主页添加贪吃蛇贡献图/ 相关文章 智能推荐
1
阿里PageAgent初试水,网页自动化agent
技术分享 2026-04-22
2
一小时基于pi-mono实现类似openclaw的agent系统,pi-agent上手实践(云端agent系列 二)
技术分享 2026-04-21
3
一小时基于E2B实现一个完整的云端Agent,做一个云端沙盒助手(云端agent系列 一)
技术分享 2026-04-17
4
仿openclaw调度,手搓一个免安装的windows个人助手,我管他叫智心一梦
技术分享 2026-03-05
5
2028全球智能危机(译)
技术思想 如果我们对人工智能(AI)的看涨预期继续被证明是正确的……但如果事实证明这实际上是利空的呢?
随机文章 随机推荐