Github主页添加贪吃蛇小组件

效果图

1. 创建仓库

首先在github创建一个与用户名同名的仓库,这样仓库的 README 就会自动展示在我们的个人首页。创建时勾选创建 README.md 文件,后边我们要在 README 中写入内容。

2. 创建文件、文件夹
  • 创建 snake.yml 文件

目录结构如下图所示

snake.yml 代码如下:

yml 复制代码
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:
    - 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
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          
          
      # 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 }}
3. 修改README

README.md 内容:

md 复制代码
![snake](https://raw.githubusercontent.com/仓库名/仓库名/output/github-contribution-grid-snake.svg)

注意:将链接中的仓库名替换为自己的仓库名(即用户名)

4. 修改权限执行工作流
  • 先按下图修改 Actions 的权限
  • 然后执行 Run Workflow
  • 执行成功
  • 回到首页查看效果


相关推荐
掘金安东尼1 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github
老马啸西风3 小时前
v0.29.1 敏感词性能优化之内部类+迭代器内部类
性能优化·开源·nlp·github·敏感词
杨杨杨大侠5 小时前
第5章:实现Spring Boot集成
java·github·eventbus
杨杨杨大侠5 小时前
第6章:高级特性与性能优化
java·github·eventbus
HelloGitHub5 小时前
这款开源调研系统越来越“懂事”了
前端·开源·github
ruanCat5 小时前
配置 github workflow 工作流文件,实现仓库自动更新 github page 站点
github
绝无仅有6 小时前
面试总结之Nginx 经验常见问题汇总第二篇
后端·面试·github
绝无仅有7 小时前
面试实战总结之Nginx配置经验第一篇
后端·面试·github
掘金安东尼7 小时前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
至善迎风17 小时前
版本管理系统与平台(权威资料核对、深入解析、行业选型与国产平台补充)
git·gitee·gitlab·github·svm