fluid主题归档页添加git贪吃蛇动画

fluid主题归档页添加git贪吃蛇动画

之前在归档页面只是添加了git提交记录的图片
昨天在逛github的时候发现有人的主页是将git的提交记录做成了贪吃蛇的动画，觉得非常有趣，于是就萌生了一些想法，🤭哈哈哈~

本文记录如何将git提交记录做成贪吃蛇动画并添加到归档页

前置条件

1.github账号

2.git提交记录（提交记录不能少，不然蛇都没东西可吃）

有了前置条件后就可以开始操作啦~

创建git仓库

新建一个与你GitHub用户名同名的仓库。
示例：如用户名为bin862324915，所以需要建一个仓库bin862324915

因为我已经创建过了，所以提示已经有这个仓库了

进入action

在刚创建仓库中【点击】action

点击New workflow

编写代码

新建文件snake.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.SNAKE_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.SNAKE_TOKEN }}

点击右上角的Commit changes…

这个时候需要创建自动化工作流的token，不然运行没有权限会报以下错误

创建好github的token之后复制保存好，回到刚刚创建的仓库

按以下图所示步骤操作添加token变量。变量名为：SNAKE_TOKEN，值为你刚刚复制的token

创建好之后就可以手动运行一次生成贪吃蛇的动画了

运行结束后将以下链接的user跟repo的参数修改为你的用户名即可

#浅色模式
https://githubusercontent.zohan.tech/snk.svg?user=bin862324915&repo=bin862324915&branch=output&path=github-contribution-grid-snake.svg#gh-light-mode-only

#深色模式
https://githubusercontent.zohan.tech/snk.svg?user=bin862324915&repo=bin862324915&branch=output&path=github-contribution-grid-snake-dark.svg#gh-dark-mode-only

插入模板代码

在主题文件夹下的layout文件夹找到归档页的模板文件archive.ejs，复制以下代码替换即可（记得替换链接里的用户名）

<%
page.layout = "archive"
page.title = theme.archive.title || __('archive.title')
page.subtitle = theme.archive.subtitle || __('archive.subtitle')
page.banner_img = theme.archive.banner_img
page.banner_img_height = theme.archive.banner_img_height
page.banner_mask_alpha = theme.archive.banner_mask_alpha
%>
<div  style="padding: 2vh 0 5vh 0" >
  <a href="https://github.com/bin862324915" target="_blank"><img src="https://githubusercontent.zohan.tech/snk.svg?user=bin862324915&repo=bin862324915&branch=output&path=github-contribution-grid-snake.svg#gh-light-mode-only" alt="My Github Chart" width=100% position='relative'>
</a>
</div>
<%- partial('_partials/archive-list.ejs', { params: { key: page.layout, postTotal: site.posts.length } }) %>

示例

本次记录结束