【butterfly】站点图片批量半自动截图
📚 文档目录
01-添加自定义css和js文件02-footer栏03-友链卡片样式04-站点图片批量半自动截图05-分类磁贴插件版06-添加侧边栏电子钟07-侧边栏归档、分类修改08-标签云增加文章数上下标09-顶部加载渐变条10-导航栏魔改11.1-返回顶部按钮显示网页阅读进度11.2-添加白天夜间模式转换动画11.3-增加分享本页11.4-直达底部12-添加51统计13-404页面展示最近文章14-分类标签归档页增加文章索引15-新标签打开文章16-使用Algolia搜索17-文章双栏布局插件18-动态分类标签导航栏19-增加评论热评轮播功能20-链接卡片标签外挂21-新年倒计时卡片22-文章统计图页面23-隐藏部分文章不在首页显示
这里使用的是@ChenYFan大佬的项目,通过调用thum.io
提供的接口,配合Github Action
,自动下载站点截图到Github
中,再配合jsdelivr+Github
图床来引用图片。
- 首先
fork
项目到自己的Github
仓库。此处提供两个。一个是原项目。一个是我自己配置过的项目。区别在于我根据thum.io
提供的接口文档修改了参数,使得站点截图较小。(用我自己的站点截图作为示例,两者大小是1.2MB:34KB
的程度,缩小了将近40
倍。当然清晰度也不可同日而语,酌情选择)
- 获取
Token
,访问Github
->头像(右上角)->Settings
->Developer Settings
->Personal access tokens
->generate new token
,创建的Token
名称随意,但必须勾选repo
项和workflow
。
如果你的Token
有repo
和workflow
权限可以不用重新获取。
在你
fork
的项目仓库设置中,新建secrets
。变量名为TOKEN
,必须严格大写。将项目
clone
到本地。
1 | https://github.com/[GithubUsername]/ScreenShot.git |
- 然后打开项目中的
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 |
记得将
curl https://purge.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/*.*
中的[GithubUsername]
改为你自己的Github
账号名。之后每次提交就会自动启动
Github Action
,将图片下载到ScreenShot
的gh-pages
分支。并且通过purge.jsdelivr.net
刷新缓存。最后,在友链配置中,就能用
https://cdn.jsdelivr.net/gh/[GithubUsername]/ScreenShot@gh-pages/[friend_link].jpg
来引用站点缩略图了。
1 | - class_name: |
- 可能遇到的
bug
- 没有启动
Github Action
:请到仓库中找到Action
,将其启用。 - 图片缓存未刷新:
purge.jsdelivr.net
的强制刷新也是玄学,这种时候只能等待了。或者手动发布release
,然后使用版本号。这个是jsdelivr
的使用技巧,不多做讨论。