给自己的 GitHub Profile 做个贪吃蛇游戏

[WJCHumble]

前言

相信很多同学都自定了自己的 GitHub Profile，但是作为这个世界上最富有想象力的一个群体，我们总在不断地推成出新（造轮子）。

那么，对于 GitHub Profile 也是一样，这里我们直接看今天要实现的一个 GitHub Profile，贪吃蛇游戏：

这个 GitHub Profile 的想法来自 Platane ，它是根据 GitHub 的 Contributions 图来生成贪吃蛇游戏，最终会以 Gif 或 SVG 的形式展示。那么，下面我们就来亲自体验一番给自己的 GitHub Profile 设置贪吃蛇游戏！

设置 Git Action

Git Action 主要是根据你在当前仓库下的 .github/workflows 目录下的 .yml 文件生成对应的 Workflow。

那么，这里我们在任意一个仓库的 .github/workflows 目录下新建 .yml 文件，然后添加如下配置：

name: generate-snake

on:
  schedule:
    # 每 6 小时，执行一次
    - cron: "0 */6 * * *"
  workflow_dispatch:

jobs:
  generate-snake:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: Platane/snk@master
        with:
          # 你的 GitHub 的名称
          github_user_name: WJCHumble
          # 生成的 .gif 图存储的位置
          gif_out_path: dist/github-snake.gif
          # 生成的 .gif 图存储的位置
          svg_out_path: dist/github-snake.svg
      - uses: crazy-max/ghaction-github-pages@v2.5.0
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

接着，你就可以在该仓库的 Action 面板中，看到新建好的名为 generate-snake 的 Workflow：

启动 Git Action

由于我们在 .yml 配置了 workflow_dispatch 事件，所以我们可以直接通过点击面板中的 Run workflow 按钮来启动 Workflow：

等待 Workflow 运行结束后，我们就可以在该仓库的 output 分支中看到创建好的 dist 目录下会有 github-snake.gif 和 github-snake.svg 这 2 个文件。

这里是我最后生成的：

添加到你的 GitHub Profile

每个人的 GitHub Profile 就是以自己 GitHub Name 命名的仓库的 README.md。

那么，我们需要做的是在前面的 dist 目录下右键复制 Gif 图的地址，然后再添加到 GitHub Profile 的 README.md 中。

Gif 图的地址看起来会是这样：

https://github.com/WJCHumble/WJCHumble/blob/output/github-snake.gif?raw=true

至于为什么是复制 Gif 图的地址，而不是上传到自己的图床？

因为，我们前面设置的 Workflow 是每 6 个小时会执行一次，也就是这个 Gif 图也会随之更新，即同步你的 GitHub Contributions 生成贪吃蛇游戏。

结语

此外，Platane 还提供了在线地址可以输入指定的 GitHub Name 来获取其对应的 GitHub Contributions 生成贪吃蛇游戏的图片，有兴趣的同学可以体验一番。

最后，如果文中存在表达不当或错误的地方，欢迎各位同学提 Issue～

[yuluoqingcheng]

贪吃蛇不出现