GitHub实现贪吃蛇动画

先看效果图😋

效果的实现基于这个仓库👉snk,感兴趣的可以自行了解哈!

教程

创建一个与你用户名相同的公开仓库,添加一个README.md文件

再创建一个.github文件夹.

在.github文件夹下创建workflows文件夹

在workflows文件夹下创建main.yml文件

结构图如下:

- .github
   - workflows
       - main.yml
- README.md

在main.yml文件夹下写入如下代码，无脑粘贴过去就行.

name: generate animation

on:
  # 每24小时自动运行一次
  schedule:
    - cron: "0 */24 * * *" 

  # 允许随时手动运行
  workflow_dispatch:

  # 在主分支上的每次推送时运行
  push:
    branches:
    - master



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

    steps:
      # 生成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
        env:
          GITHUB_TOKEN: ${
   
   {
   
    secrets.GITHUB_TOKEN }}


      # 推送到分支
      - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
      # output是自动的，不用手动创建
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${
   
   {
   
    secrets.GITHUB_TOKEN }}

在Actions中运行一下generate animation工作流

在README.md文件中展示

记得把steam-404替换为自己的

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

大功告成!!!

鼠鼠我呀,真厉害捏😋!