【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的使用技巧，不多做讨论。