前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >制作github贪吃蛇贡献图

制作github贪吃蛇贡献图

作者头像
姓王者
发布2024-11-12 09:40:13
发布2024-11-12 09:40:13
350
举报
文章被收录于专栏:姓王者的博客

如图所示,非常有趣:)

xingwangzhe/xingwangzhe: My personal repository

你可以查看我的主页仓库来看具体效果:)

创建workflow

在你的主页目录下建立

.github/workflows/snake.yml

接下来你需要复制我仓库中的snake.yml中的代码,方便起见,我直接贴在下面

代码语言:javascript
复制
name: Generate snake animation

on:
  schedule:
    - cron: "0 0 * * *" # run daily at mignight UTC

  workflow_dispatch:

  push:
    branches:
    - main

jobs:
  generate:
    permissions:
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
    - name: generate snake.svg
      uses: Platane/snk@v3
      with:
        # github user name to read the contribution graph from (**required**)
        # using action context var `github.repository_owner` or specified user
        github_user_name: ${{ github.repository_owner }}

        # list of files to generate.
        # one file per line. Each output can be customized with options as query string.
        #
        #  supported options:
        #  - palette:     A preset of color, one of [github, github-dark, github-light]
        #  - color_snake: Color of the snake
        #  - color_dots:  Coma separated list of dots color.
        #                 The first one is 0 contribution, then it goes from the low contribution to the highest.
        #                 Exactly 5 colors are expected.
        outputs: |
          dist/github-snake.svg
          dist/github-snake-dark.svg?palette=github-dark
          dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

    - name: Deploy to GitHub Pages
      uses: crazy-max/ghaction-github-pages@v4
      with:
        target_branch: output
        build_dir: dist
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

然后点击上部导航栏的Actions查看snake.yml的状态,创建完毕后,会出现新的分支output。打开这个分支

你就会发现贪吃蛇的图了

引用使用

你需要把下面的路径中的xingwangzhe换成自己的github用户名

代码语言:javascript
复制
<!-- snake -->
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/xingwangzhe/xingwangzhe/blob/output/github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="https://github.com/xingwangzhe/xingwangzhe/blob/output/github-snake.svg" />
  <img alt="github-snake" src="github-snake.svg" />
</picture>

于是乎,大功告成!

参考

【教程】我在GitHub个人主页玩贪吃蛇_哔哩哔哩_bilibili

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-11-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 创建workflow
  • 引用使用
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档