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 animation

on:
  # run automatically every 24 hours
  schedule:
    - cron: "0 */24 * * *" 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the master branch
  push:
    branches:
    - master
    
jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    
    steps:
      # 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.svg
        uses: Platane/snk/svg-only@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/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 branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
        env:
          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: write
    runs-on: ubuntu-latest
    timeout-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.svg
  uses: Platane/snk/svg-only@v3
  with:
    github_user_name: ${{ github.repository_owner }}
    outputs: |
      dist/github-contribution-grid-snake.svg
      dist/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 branch
  uses: crazy-max/ghaction-github-pages@v3.1.0
  with:
    target_branch: output
    build_dir: dist
  env:
    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 活动数据的「贪吃蛇」动画了。