【butterfly】站点图片批量半自动截图

这里使用的是 @ChenYFan 大佬的项目，通过调用 thum.io 提供的接口，配合 Github Action，自动下载站点截图到 Github 中，再配合 jsdelivr+Github 图床来引用图片。

1. 首先 fork 项目到自己的 Github 仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据 thum.io 提供的接口文档修改了参数，使得站点截图较小。（用我自己的站点截图作为示例，两者大小是 1.2MB：34KB 的程度，缩小了将近 40 倍。当然清晰度也不可同日而语，酌情选择）

2. 获取 Token，访问 Github-> 头像（右上角）->Settings->Developer Settings->Personal access tokens->generate new token, 创建的 Token 名称随意，但必须勾选 repo 项和 workflow。

3. 在你 fork 的项目仓库设置中，新建 secrets。变量名为 TOKEN，必须严格大写。

4. 将项目 clone 到本地。

1

https://github.com/[GithubUsername]/ScreenShot.git

5. 然后打开项目中的 ScreenShot\.github\workflows\get.yml, 按照示例添加你的友链地址。

1

curl https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://<YourDomain>/ -o <YourDoamin>.jpg

6. 记得将 curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.* 中的 [GithubUsername] 改为你自己的 Github 账号名。

7. 之后每次提交就会自动启动 Github Action，将图片下载到 ScreenShot 的 gh-pages 分支。并且通过 purge.jsdelivr.net 刷新缓存。

8. 最后，在友链配置中，就能用 https://cdn.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/[friend_link].jpg 来引用站点缩略图了。

1
2
3
4
5
6
7
8

- class_name: 
  class_desc: 
  link_list:
    - name: 雷雷屋头
      link: https://ll.sc.cn
      avatar: https://ll.sc.cn/img/avatar.png
      descr: 假装是个室内设计师的工地搬砖狗。
      siteshot:   # 留空则调用API自动截图

9. 可能遇到的 bug

• 没有启动 Github Action：请到仓库中找到 Action，将其启用。
• 图片缓存未刷新：purge.jsdelivr.net 的强制刷新也是玄学，这种时候只能等待了。或者手动发布 release，然后使用版本号。这个是 jsdelivr 的使用技巧，不多做讨论。