发布于 2026-01-05 13 阅读
0

如何为蛇形贡献图启用 GitHub Actions 🐍 snk

如何启用 GitHub Actions 以创建蛇形贡献图 🐍

很多人都在讨论和分享他们的 GitHub 个人资料 README 文件。这是我们去年推出的一个项目,开发者们都很喜欢它。随着这项功能越来越受欢迎,越来越多的开发者开始构建模板、插件和应用程序,供您在个人资料中使用。

Supritha的这篇文章引起了我的注意。我喜欢她讨论应该在 GitHub 个人资料 README 文件中添加哪些代码片段的方式。

Guillaume Falourd的一条评论提到了Platane的一个非常酷的项目。

GitHub 标志 Platane / snk

🟩⬜ 根据 GitHub 用户贡献图生成贪吃蛇游戏,并将屏幕截图输出为动画 SVG 或 GIF。

GitHub 工作流状态 GitHub 发布 GitHub 市场 类型定义 代码风格

根据 GitHub 用户贡献图生成贪吃蛇游戏

GitHub 贡献网格蛇形动画

拉取 GitHub 用户的贡献图,将其制作成贪吃蛇游戏,生成一条蛇形路径,使细胞按顺序被吃掉。

生成GIFSVG图像。颜色可 定义

可作为 GitHub Action 使用。它可以每天自动生成一张新图片,非常适合用作GitHub 个人资料 README 文件。

用法

GitHub Action

- 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
Enter fullscreen mode Exit fullscreen mode

它使用 GitHub Actions 来构建和更新用户的贡献图,然后让一条蛇吃掉你所有的贡献。输出结果会生成一个 GIF 文件,你可以把它添加到你的 GitHub 个人资料 README 文件中。我觉得这很酷,所以就把它添加到我的个人资料里了。

第一步:设置 GitHub Actions

在开始这个项目之前,首先要确保你已设置好 GitHub Actions。前往你的个人资料页面,确认“Actions”选项卡已启用。现在所有用户都应该拥有此功能。

操作按钮

接下来,前往Platane 的 Action(可在 Marketplace 获取),复制代码。您需要将此代码片段添加到您的 Actions 文件中。

步骤 2:创建 GitHub Actions yaml 文件

这绝对是我卡住的地方。查看代码时,我不太确定应该把Marketplace上提到的那些代码行添加到哪里

在研究了 Platane 的 Actions 文件设置方式之后,我能够生成代码(当然,也得到了Bdougie的一些帮助)。

我在下面添加了完整的代码片段,并添加了许多注释(希望能够容易理解)。

您可以将此代码直接复制到空白的 *.yml 文件中。请确保在以下目录下创建一个新的 *.yml 文件:

你的 GitHub 用户名 --> .github --> workflows --> FILE_NAME.yml


# GitHub Action for generating a contribution graph with a snake eating your contributions.

name: Generate Snake

# Controls when the action will run. This action runs every 6 hours.

on:
  schedule:
      # every 6 hours
    - cron: "0 */6 * * *"

# This command allows us to run the Action automatically from the Actions tab.
  workflow_dispatch:

# The sequence of runs in this workflow:
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:

    # Checks repo under $GITHUB_WORKSHOP, so your job can access it
      - uses: actions/checkout@v2

    # Generates the snake  
      - uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: mishmanners
          # these next 2 lines generate the files on a branch called "output". This keeps the main branch from cluttering up.
          gif_out_path: dist/github-contribution-grid-snake.gif
          svg_out_path: dist/github-contribution-grid-snake.svg

     # show the status of the build. Makes it easier for debugging (if there's any issues).
      - run: git status

      # Push the changes
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: master
          force: true

      - uses: crazy-max/ghaction-github-pages@v2.1.3
        with:
          # the output branch we mentioned above
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

步骤 3. 运行 GitHub Actions

添加并提交上述代码后,请转到“操作”选项卡。在“工作流”下,您应该可以看到上面创建的“生成蛇”操作。

工作流程

点击“运行工作流”,即可观看工作流运行情况。您甚至可以展开工作流,实时查看其运行状态。

运行操作

工作流运行完毕后,您应该会看到一个绿色的✅“构建”对勾。如果是这样,说明您的操作运行正常。如果没有,您需要检查代码并找出错误所在。“构建”状态应该能帮助您找到错误所在。您还可以将其与我 GitHub 个人资料 README 中的 yaml 文件进行比较。

绿色建设

如果“构建”状态显示为绿色 ✅,那就一切就绪。返回仓库的“代码”目录,并将分支切换到“output”。在这里,你会看到两个版本的贡献图,图中蛇正在吞噬它:一个 *.gif 文件和一个 *.svg 文件。这些文件的好处在于,每次 Action 运行时,它们都会被覆盖。因此,你的贡献图将始终保持最新状态。

代码输出

第四步:在你的个人资料中添加一条吞噬贡献的蛇

最后一步是将此文件添加到您的个人资料中。找到您的 *.gif 文件所在位置。它应该类似于:

https://github.com/YOUR_USERNAME/YOUR_USERNAME/blob/output/github-contribution-grid-snake.gif

将此内容添加到您的个人资料中,方法是将文件路径复制到 Markdown 文件的新行中:

![snake gif](https://github.com/YOUR_USERNAME/YOUR_USERNAME/blob/output/github-contribution-grid-snake.gif)

现在你应该能看到一条看起来很酷的蛇在吃你的捐款了!

食蛇者

希望本指南对您有所帮助,并为您在个人资料中添加更多操作打下良好的基础。您在 GitHub 个人资料 README 文件中添加了哪些内容?还有其他值得关注的实用操作吗?

文章来源:https://dev.to/mishmanners/how-to-enable-github-actions-on-your-profile-readme-for-a-contribution-graph-4l66