Github 贪吃蛇 主页设置

参考：https://github.com/Platane/Platane/tree/master

首先写个自动化脚本 .github/workflows/snake.yml，GitHub Actions 会按计划去生成并提交最新版的 “贪吃蛇” SVG。紧接着，再在你的 README.md 中引用它，就能看到效果啦！

自动化脚本

这一部分是 每天／每次你推代码／手动运行 时，自动生成最新的两张 SVG：浅色和深色「贪吃蛇贡献动画」；然后把它们提交到 output 分支。

首先，登录后，点击仓库页面上方的 Add file → Create new file，在 “Name your file…” 的输入框中，直接输入路径：.github/workflows/snake.yml，在下方的大编辑区域，粘贴 workflow 内容：

# workflow name
name: generate animationon:# run automatically every 24 hoursschedule:- cron: "0 */24 * * *" # allows to manually run the job at any timeworkflow_dispatch:# run on every push on the master branchpush:branches:- masterjobs:generate:permissions: contents: writeruns-on: ubuntu-latesttimeout-minutes: 5steps:# generates a snake game from a github user (<github_user_name>) contributions graph, output a svg animation at <svg_out_path>- name: generate github-contribution-grid-snake.svguses: Platane/snk/svg-only@v3with:github_user_name: ${{ github.repository_owner }}outputs: |dist/github-contribution-grid-snake.svgdist/github-contribution-grid-snake-dark.svg?palette=github-dark# push the content of <build_dir> to a branch# the content will be available at https://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file> , or as github page- name: push github-contribution-grid-snake.svg to the output branchuses: crazy-max/ghaction-github-pages@v3.1.0with:target_branch: outputbuild_dir: distenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

这段 GitHub Actions 的 YAML 文件是用来定时（和按需／每次推送）自动生成「贪吃蛇贡献动画」SVG，然后把它们发布到指定分支上的。

顶部元信息

name: generate animation

• 给这个 Workflow 起了个名字 “generate animation”。

触发条件（on:）

on:schedule:- cron: "0 */24 * * *"workflow_dispatch:push:branches:- master

1. schedule

   • cron: "0 */24 * * *" 表示每天整点触发一次（等同于“每 24 小时执行一次”）。

2. workflow_dispatch

   • 允许你在 GitHub 界面上手动点击 “Run workflow” 来触发。

3. push 到 master 分支

   • 只要有人往 master 分支 push 代码，就会触发这个 Workflow。
   • 当你在仓库的 master（或 main）分支上做任何提交／推送操作时，GitHub 都会发出一个 “push” 事件，触发对应配置中定义了 push: branches: [master] 的工作流。

这样就保证了：

• 自动定时更新
• 可以手动随时更新
• 每次推 master 时也会更新

Tip：现在很多仓库默认主分支名字是 main 而不是 master，如果你的主分支叫 main，记得把配置改成：

on:push:branches:- main

这样才会在你真正常用的主分支推送时触发工作流。

• 进入你仓库主页，在页面正中偏上，有一个下拉框写着 “Branch: …”，它默认显示的那个分支，就是你的主分支名称（比如 main 或 master）。
• 或者点进 Settings → Branches（左侧菜单），在 “Default branch” 一栏就能看到。

作业（jobs:）

jobs:generate:permissions: contents: writeruns-on: ubuntu-latesttimeout-minutes: 5

• generate：作业 ID，随便起名。
• permissions: contents: write：给这个作业写权限，才能往分支里提交文件。
• runs-on: ubuntu-latest：在最新的 Ubuntu 虚拟机上跑。
• timeout-minutes: 5：如果跑超 5 分钟还没结束，就强制终止。

步骤（steps:）

1. 生成 SVG

- name: generate github-contribution-grid-snake.svguses: Platane/snk/svg-only@v3with:github_user_name: ${{ github.repository_owner }}outputs: |dist/github-contribution-grid-snake.svgdist/github-contribution-grid-snake-dark.svg?palette=github-dark

• uses: Platane/snk/svg-only@v3
  调用了社区提供的 Platane/snk Action，只要给它 GitHub 用户名，就能抓取该用户的过去一年贡献热图，并在上面绘制“贪吃蛇”动画。

• github_user_name: ${{ github.repository_owner }}
  自动传入仓库的拥有者用户名（也就是你自己的 GitHub 用户名），无需硬编码。

• outputs

  • dist/github-contribution-grid-snake.svg：生成的浅色主题 SVG。
  • dist/github-contribution-grid-snake-dark.svg?palette=github-dark：生成的深色主题 SVG（通过 query 参数切换配色）。

生成后会把两个文件都放进工作目录下的 dist/ 文件夹。

2. 推送到 output 分支

- name: push github-contribution-grid-snake.svg to the output branchuses: crazy-max/ghaction-github-pages@v3.1.0with:target_branch: outputbuild_dir: distenv:GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

• uses: crazy-max/ghaction-github-pages@v3.1.0
  这是一个方便把某个目录内容发布到指定分支（通常用于 GitHub Pages 或存放生成文件）的 Action。
• target_branch: output
  把 dist/ 目录下的文件推送到当前仓库的 output 分支。
• build_dir: dist
  指定要发布的本地目录就是前一步生成的 dist/。
• GITHUB_TOKEN
  内置的 secrets.GITHUB_TOKEN 用来做认证，允许写入 output 分支。

Commit & Push

编辑完上述 .github/workflows/snake.yml 后，Commit & Push 到 GitHub，等 Action 跑完，检查 output 下是否有两张 svg。

在 README 里引用

更新 README 中的 链接指向这两个 SVG，

<picture><source media="(prefers-color-scheme: dark)"srcset="https://raw.githubusercontent.com/你的用户名/你的仓库/output/github-contribution-grid-snake-dark.svg"><source media="(prefers-color-scheme: light)"srcset="https://raw.githubusercontent.com/你的用户名/你的仓库/output/github-contribution-grid-snake.svg"><img alt="🐍 Snake eating contributions"src="https://raw.githubusercontent.com/你的用户名/你的仓库/output/github-contribution-grid-snake.svg">
</picture>

再次 Commit & Push，刷新你的个人主页，就能看到「贪吃蛇吃你的贡献」在 README 里动起来了 🎉

这样，你的个人主页上就会不断更新，展示一个真正基于你自己 GitHub 活动数据的「贪吃蛇」动画了。