如何在GitHub首页放条蛇？(贪吃蛇效果)

🎨 效果展示

把commit记录，以贪吃蛇的方式来展示。

📖 实现步骤

1. 点击右上角头像，选择Settings

2. 点击侧边栏菜单Developer settings

3. 选择Generate new token (classic)

4. 进行权限配置

5. 点击底部的Generate token

token名称可以自定义，只要和.github/workflows/snake.yml对应起来就可以。

6. 生成token之后，会出现在列表中

7. 然后配置工作流

在项目根目录创建 .github/workflows/snake.yml

name: generate animation

on:
  # run automatically every 12 hours
  schedule:
    - cron: "0 2 * * *"

  # allows to manually run the job at any time
  workflow_dispatch:

  # run on every push on the main branch
  push:
    branches:
      - main

jobs:
  generate:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    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
      - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v4
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}

8. 在README.md中添加内容

把Jinming6替换成你的项目名即可

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Jinming6/Jinming6/output/github-contribution-grid-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Jinming6/Jinming6/output/github-contribution-grid-snake.svg" />
  <img width="100%" alt="github-snake" src="https://raw.githubusercontent.com/Jinming6/Jinming6/output/github-contribution-grid-snake.svg" />
</picture>

9. 最后把上述的配置提交到GitHub即可

每12小时会生成一个贪吃蛇效果。

🔗 其他优秀文章

• GitHub 主页美化 & 显示掘金最近发布文章 Top10 🔥