给hexo博客添加贪吃蛇热力图

最近在瞎逛的时候，偶然看到老何的博客有一个贪吃蛇的热力图，展示了其posts文章在时间上的分布，并且以一个贪吃蛇的小动画来吃掉一个一个小点，感觉很有趣，看着自己的提交空白一片，仅有的几个还被“小蛇”吃了也蛮有意思，于是想着也在自己的博客上实现一个，因为博客部署在github page上，自己发布的文章在github仓库里本来就是有热力数据的，很契合。

基础知识

依赖

依赖于github项目Platane/snk，感谢开源的代码

热力图 - Heatmap

热力图，是一种通过对色块着色来显示数据的统计图表。绘图时，需指定颜色映射的规则。例如，较大的值由较深的颜色表示，较小的值由较浅的颜色表示；较大的值由偏暖的颜色表示，较小的值由较冷的颜色表示，等等。

从数据结构来划分，热力图一般分为两种。第一，表格型热力图，也称色块图。它需要2个分类字段+1个数值字段，分类字段确定x、y轴，将图表划分为规整的矩形块。数值字段决定了矩形块的颜色。第二，非表格型热力图，或曰平滑的热力图，它需要3个数值字段，可绘制在平行坐标系中（2个数值字段分别确定x、y轴，1个数值字段确定着色）。

我们要生成的就是横轴为月份，纵轴为星期的表格型热力图（浅色下，颜色越深代表的当天contribution越多，反过来，深色主题下颜色越亮代表contribution越多）及对应的随时间的进度条

Markdown 内嵌 HTML 标签

戳Markdown官方教程这里有一些说明，关于markdown内嵌标签的一些示例，总之

对于 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 本身。如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可。

Fluid支持自定义CSS

使用Fluid主题是支持自定义css、js等的，贪吃蛇热力图不过就是两张透明svg图片，我们用Markdown内嵌html标签，插入日间、夜间主题对应的两张图片，然后通过自定义CSS来控制切换日夜主题时显示的svg即可如果你使用的是其他Hexo主题，大部分应当都支持一些自定义的方式，请查阅主题配置相关文档

指定自定义 css 文件路径，路径是相对 source 目录 custom_css: /css/custom.css

实现

github to do

新建一个仓库

新建一个Action

在github上，New repository，然后如图，Repository名称随意

点击Actions ，再点击"set up a workfllow yourself"，填入以下内容，然后Commit Changes： ::: info 记得替换$ github.repository_owner 为你的github用户名形如：

with:
  github_user_name: specialhua

:::

YAML

name: generate animation

on:
  # run automatically every 6 hours
  schedule:
    - cron: "0 */6 * * *"  # 每6小时运行一次 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the master branch
  push:
    branches:
    - master
    
  

jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    
    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
          
          
      # 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/[email protected]
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

运行workflow

获得两张svg图片

等待生成完毕，到code下，切换分支到output下，即可看到light和dark两张svg图片，保存两张图片的地址如：

https://github.com/specialhua/snk/blob/output/github-contribution-grid-snake-dark.svg https://github.com/specialhua/snk/blob/output/github-contribution-grid-snake.svg

blog to do

插入图片

在你想插入的页面，例如我是在关于页面，那就在关于页面的index.md下插入内容：

使用jsdelivr加速

简单的地方在于对链接做替换就行。但有时候jsdelivr，包括下面使用的的jsdelivr.net也会存在抽风的情况，对国内网络不友好，因此我还是使用了下面的图床。 ::: info 注意替换链接。这里为了让国内也访问，直接走的jsdelivr的cdn节点，仿照我的格式去替换就行。也尝试使用其他mirror镜像，如cdn.jsmirror等，由于缓存机制可能在图片已经更新后还未更新到新版本末尾的参数?t=1为强制带上时间戳刷新，以保证获取的图片为最新的 :::

HTML

<div id="snake-pic">
  <img class="snake-light" src="https://cdn.jsdelivr.net/gh/specialhua/snk@output/github-contribution-grid-snake.svg?t=1" alt="GitHub Snake Light" />
  <img class="snake-dark" src="https://cdn.jsdelivr.net/gh/specialhua/snk@output/github-contribution-grid-snake-dark.svg?t=1" alt="GitHub Snake Dark" />
</div>

使用图床加速

我博客大部分的图片都是在七牛云的图床上，于是就考虑在github的workflow上直接进行同步。以下：

a.在github项目设置中新增Actions secrets

将七牛云后台管理中心的密钥，即AK和SK复制到github上图的secrets中新增

b.yml添加七牛云同步相关

首先在七牛云空间中新建个文件夹用来存放图片，我就起一个“snake”。其次在项目的github/workflows/下配置文件，也就是刚刚编辑的那个，添加以下代码：

YAML

- name: Install qiniu CLI
        run: |
          curl -sSL https://github.com/qiniu/qshell/releases/download/v2.13.0/qshell-v2.13.0-linux-amd64.tar.gz | tar -xz -C /usr/local/bin
          chmod +x /usr/local/bin/qshell
      
- name: Sync files to Qiniu
shell: bash
run: |
  # 使用 -- 标记参数结束
  qshell account -- "${{ secrets.QINIU_ACCESS_KEY }}" "${{ secrets.QINIU_SECRET_KEY }}" default
  
  # 上传文件
  qshell fput 空间名字 文件夹名/github-contribution-grid-snake.svg dist/github-contribution-grid-snake.svg --overwrite
  qshell fput 空间名字 文件夹名/github-contribution-grid-snake-dark.svg dist/github-contribution-grid-snake-dark.svg --overwrite

下面是我的完整的配置，请自行修改相关内容为自己的：

YAML

name: generate animation

on:
  # run automatically every 6 hours
  schedule:
    - cron: "0 */6 * * *"  # 每6小时运行一次 
  
  # allows to manually run the job at any time
  workflow_dispatch:
  
  # run on every push on the master branch
  push:
    branches:
    - master
    
  

jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    
    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
          
          
      # 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/[email protected]
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Install qiniu CLI
        run: |
          curl -sSL https://github.com/qiniu/qshell/releases/download/v2.13.0/qshell-v2.13.0-linux-amd64.tar.gz | tar -xz -C /usr/local/bin
          chmod +x /usr/local/bin/qshell
      
      - name: Sync files to Qiniu
        shell: bash
        run: |
          # 使用 -- 标记参数结束
          qshell account -- "${{ secrets.QINIU_ACCESS_KEY }}" "${{ secrets.QINIU_SECRET_KEY }}" default
          
          # 上传文件
          qshell fput specialhua snake/github-contribution-grid-snake.svg dist/github-contribution-grid-snake.svg --overwrite qshell fput specialhua snake/github-contribution-grid-snake-dark.svg dist/github-contribution-grid-snake-dark.svg --overwrite

c.图片调用地址写七牛云的地址

自然的，图片就应当用七牛云的图片。如此，国内访问也可以正常访问且不会掉了。

添加自定义css

在source/css/custom.css（如无，自行添加，并在_config.fluid.yml中定义开启）中添加如下： ::: info 这里不用自定义CSS的话，夜间主题下图片总是不透明，因此做了一个强制透明 :::

CSS

/* Snake */
.snake-dark {
    display: none;
}
.snake-light {
    display: block;
}

/* 夜间模式：确保背景透明，显示 dark 图像 */
[data-user-color-scheme='dark'] #snake-pic {
    background-color: transparent; /* 确保背景透明 */
}

[data-user-color-scheme='dark'] .snake-light {
    display: none; /* 隐藏 light 版本 */
}

[data-user-color-scheme='dark'] .snake-dark {
    display: block; /* 显示 dark 版本 */
}

/* 确保图片本身背景透明 */
#snake-pic img {
background-color: transparent;
}

hexo clean && hexo d

也可clean以后hexo s本地看看有没有问题