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

  1. 首先fork项目到自己的Github仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据thum.io提供的接口文档修改了参数,使得站点截图较小。(用我自己的站点截图作为示例,两者大小是1.2MB:34KB的程度,缩小了将近40倍。当然清晰度也不可同日而语,酌情选择)
  1. 获取Token,访问Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token名称随意,但必须勾选repo项和workflow

如果你的Tokenrepoworkflow权限可以不用重新获取。

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

  2. 将项目clone到本地。

1
https://github.com/[GithubUsername]/ScreenShot.git
  1. 然后打开项目中的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
  1. 记得将curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.*中的[GithubUsername]改为你自己的Github账号名。

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

  3. 最后,在友链配置中,就能用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自动截图
  1. 可能遇到的bug
  • 没有启动Github Action:请到仓库中找到Action,将其启用。
  • 图片缓存未刷新:purge.jsdelivr.net的强制刷新也是玄学,这种时候只能等待了。或者手动发布release,然后使用版本号。这个是jsdelivr的使用技巧,不多做讨论。
05-分类磁贴插件版 03-友链卡片样式