Xlenco

Xlenco

github
zhihu
email

GitHubの個人ページに面白いスネークアニメーションを追加する

これは私が以前 GitHub を見ていて見つけた面白いもので、個人の GitHub ページにスネークアニメーションを追加する方法です。以下は効果です:
image

スネークは、私たちが GitHub に提出したコードの記録を食べます。つまり、緑色のセルを食べます。

前述のように、GitHub の個人ページでスネークの小さなアニメーションを実現するにはどうすればよいですか?

image

非常に簡単です。コードをコピーするだけで、このスネークの小さなアニメーションのコードは、GitHub のユーザー@L1cardo の個人ページから取得できます。

  1. GitHub の ID と同じ名前のリポジトリ内にassetsフォルダを作成します。
    GitHub は空のフォルダをサポートしていないため、一時的にファイルを配置してから削除することをお勧めします。
  2. このコードを自分の GitHub の ID と同じ名前のリポジトリの .github/workflows パスにコピーする必要があります。
Snake.yml を生成する#
# GitHub Action for generating a contribution graph with a snake eating your contributions.
name: Generate Snake
on:
  schedule:
    - cron: "0 0 * * *"
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/[email protected]
      - name: Generate Snake
        uses: Platane/snk@master
        id: snake-gif
        with:
          github_user_name: ${{ github.repository_owner }}
          gif_out_path: ./assets/github-contribution-grid-snake.gif
          svg_out_path: ./assets/github-contribution-grid-snake.svg
      - name: Push to GitHub
        uses: EndBug/[email protected]
        with:
          branch: main
          message: 'Generate Contribution Snake'
  1. コードをコピーした後、生成された svg ファイルを GitHub の ID と同じ名前のリポジトリの README ドキュメント に配置する必要があります。これにより、個人のホームページに表示されます。

README ドキュメントは Markdown 形式で編集されているため、svg ファイルをインポートするには以下の形式を使用する必要があります。

![](https://cdn.jsdelivr.net/gh/xxx/xxx@main/assets/github-contribution-grid-snake.svg)

xxx を自分の GitHub のユーザー名に変更してください。

上記の手順を完了すると、自分の GitHub のメインページでこのアニメーションを見ることができます。とてもクールです。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。