Github 添加貪喫蛇動畫

前言

我們都知道，對於Github來說，當你選擇你的賬戶時，可以看到自己的提交記錄。

於是就有大神動腦筋了，這些commit記錄都是一些豆，如果弄一條蛇來，不就可以搞個貪喫蛇了嗎？

有道理有道理，本文就來講一下如何弄一條蛇出來。

 

創建步驟

創建個人倉庫

個人倉庫是一個特殊的倉庫，名字就是你的Github Account Name，比如我叫ErYoung2，我就建立一個叫做ErYoung2的倉庫。

創建Github Actions

創建.github/workflow/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 master branch
  push:
    branches:
      - master



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@v2
        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/[email protected]
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

生成SVG文件

點擊Github Actions，選擇上面添加的yml文件的workflow，進行構建。

構建完畢之後，會發現倉庫多了一個output分支，下面有兩個SVG文件。

添加README文件

編輯README.md文件，添加你想添加的內容。在最後一行，可以添加SVG文件來運行貪喫蛇，可選擇亮色或者暗色。

![亮色](https://raw.githubusercontent.com/<你的賬號名>/<你的倉庫名>/output/github-contribution-grid-snake.svg)


![暗色](https://raw.githubusercontent.com/<你的賬號名>/<你的倉庫名>/output/github-contribution-grid-snake-dark.svg)

 

運行

然後就跑起來了，是不是很不錯捏？