これは私が以前 GitHub を見ていて見つけた面白いもので、個人の GitHub ページにスネークアニメーションを追加する方法です。以下は効果です:
スネークは、私たちが GitHub に提出したコードの記録を食べます。つまり、緑色のセルを食べます。
前述のように、GitHub の個人ページでスネークの小さなアニメーションを実現するにはどうすればよいですか?
非常に簡単です。コードをコピーするだけで、このスネークの小さなアニメーションのコードは、GitHub のユーザー@L1cardo の個人ページから取得できます。
- GitHub の ID と同じ名前のリポジトリ内に
assets
フォルダを作成します。
GitHub は空のフォルダをサポートしていないため、一時的にファイルを配置してから削除することをお勧めします。 - このコードを自分の 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'
- コードをコピーした後、生成された svg ファイルを GitHub の ID と同じ名前のリポジトリの README ドキュメント に配置する必要があります。これにより、個人のホームページに表示されます。
README ドキュメントは Markdown 形式で編集されているため、svg ファイルをインポートするには以下の形式を使用する必要があります。
![](https://cdn.jsdelivr.net/gh/xxx/xxx@main/assets/github-contribution-grid-snake.svg)
xxx を自分の GitHub のユーザー名に変更してください。
上記の手順を完了すると、自分の GitHub のメインページでこのアニメーションを見ることができます。とてもクールです。