最后更新时间为 2021-01-22 (暂停更新相关内容)

灵感来源

之前在Buttrfly群里看到有人问网站截图API、然后想起 ChenYFan 大佬有关于友链截图的项目、并且友链和Butterfly的友链页面类似,于是就写了一个爬取博客友链截图的小项目:https://github.com/zykjofficial-actions/screen_shot

具体效果:

使用技术

  • Python (正则和requests)
  • Github Actions(用于每周定时执行)

使用Python获取博客的友链Gitee Issue的友链(如果有)并且截图

基本介绍

访问我的 友链 查看效果

简单原理

curl 命令下载图片:

  • 图片大小比较小

    1
    curl https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://<YourDomain>/ -o <YourDoamin>.jpg
  • 图片大小比较大

    1
    curl https://image.thum.io/get/width/1024/crop/768/https://<YourDomain>/ -o <YourDoamin>.jpg

可以在https://gcore.jsdelivr.net/gh/zykjofficial-actions/screen_shot@gh-pages/ 查看友链图片 可能不适配pjax

使用

  1. fork https://github.com/zykjofficial-actions/screen_shot
  2. https://github.com/settings/tokensGenerate new token、名字随便填、勾选 repo、再点击Generate token 复制好token、在这个仓库Settings > Secrets > new New secret、Name 中填写 TOKENValue 为生成的token。(放入 Secrets 中能防止 token 泄露) (默认存在一个TOKEN、可以不需要创建)

编辑 screen_shot.py

1
2
3
4
if __name__ == '__main__':
getLinkFriends("https://blog.zykjofficial.top/link/")
getGiteeFriends("zykjofficial", "friends")
downloadFriends()
  • getLinkFriends函数里的内容替换成你自己的友链页面
  • getGiteeFriends函数里替换成 gitee用户名ISSUE仓库、如果你不使用Gitee Issue友链、请将这一行用#注释
  • 如果你使用的是其他截图网站API、downloadFriends第一个参数为截图网站API、格式类似https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/https://、第二个参数为下载图片的后缀(默认jpg),或者类似https://s0.wordpress.com/mshots/v1/https://zykj.js.org?w=1280&h=960的API、第一个参数为截图网站前缀https://s0.wordpress.com/mshots/v1/https://、第二个参数为截图网站后缀?w=1280&h=960、第三个参数为下载图片的后缀(默认jpg)

修改完成你的配置、就可以在Action查看是否运行成功

配置

注意:此操作只支持Butterfly主题 : 鼠标放在友链上可以显示友链截图

灵感来自: https://blog.cyfan.top/links/ 不过是通过JS来操作

如果Butterfly主题开启了pjax、建议排除以免出现问题

1
2
3
4
pjax:
enable: true
exclude:
- /link/ # link是我的友链页面

针对新版:https://gcore.jsdelivr.net/npm/butterfly-friend@latest/dist/friend.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src='https://gcore.jsdelivr.net/npm/butterfly-friend@latest/dist/friend.min.js'></script>
<script src="https://gcore.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/js/screen_shot.js"></script>
<script>
var obj = {
el:"#friend1",
owner:"zykjofficial",
repo:"friends",
direction_sort:"asc",
sort_container:["乐特专属","大佬们"],
labelDescr:{
"乐特专属":"<span style='color:red;'>这是乐特大佬的博客哟!</span>",
"嘉神专属":"<span style='color:red;'>这是康特全球后援会(QQ群:939534493)的群主!</span>",
"大佬们":"大佬们的博客(不分前后、都是大佬)",
"傻逼菜狗":"一位隐藏的大佬",
"Butterfly主题":"主题官网: <a link='https://butterfly.js.org'>https://butterfly.js.org</a> ",
}
};
document.querySelector('.flink').insertAdjacentHTML('afterbegin', "<div id='friend1'></div>")
new Friend(obj)
getFriendsScreenShot({
user: "zykjofficial-actions", // github用户名
repo: "screen_shot", // github仓库名
})
</script>

screen_shot.js 源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
let getFriendsScreenShot = function (options) {
let user = options.user // github用户名
let repo = options.repo // github仓库名
let branch = options.branch ? options.branch : "gh-pages" // github分支
let suffix = options.suffix ? options.suffix : "jpg" // 文件后缀
let lazyImg = options.lazyImg ? options.lazyImg : "https://gcore.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/loading.gif" // 懒加载图片
let duration = options.duration ? options.duration : 5000 // 持续时间
let oldLength = document.querySelectorAll(".flink-list-item").length
window.onload = function () {
let links = document.querySelectorAll(".flink-list-item")
let screen_shot = document.createElement("div")
screen_shot.setAttribute("class", "screen-shot")
screen_shot.innerHTML = `<img src=${lazyImg} alt="ScreenShot">`
screen_shot.style.display = "none"
for (let i = 0; i < links.length; i++) {
links[i].onmouseover = function () {
screen_shot.style.cssText = `top:${this.offsetTop + this.clientHeight + 5}px;left:${this.offsetLeft + this.clientWidth / 2}px;max-width:200px;position:absolute;z-index:99;width:100%;box-shadow:0 0 20px -5px rgba(158,158,158,.2);border-radius:3px;margin:0;padding:0;`
let img = new Image()
img.src = `https://gcore.jsdelivr.net/gh/${user}/${repo}@${branch}/${this.children[0].href.replace(/(http|https):\/\//ig, "").replace(/^(\s|\/)+|(\s|\/)+$/g, '').replace("/",".")}.${suffix}`
img.onload = function () {
screen_shot.children[0].src = img.src
}
}
links[i].onmouseout = function () {
screen_shot.style.cssText = "display:none;"
screen_shot.children[0].src = lazyImg
}
}
let result = oldLength != document.querySelectorAll(".flink-list-item").length ? true : false
if (GLOBAL_CONFIG.Snackbar) {
var snackbarBg = document.documentElement.getAttribute('data-theme') === 'light' ? GLOBAL_CONFIG.Snackbar.bgLight : GLOBAL_CONFIG.Snackbar.bgDark
var snackbarPos = GLOBAL_CONFIG.Snackbar.position
Snackbar.show({
text: result ? "友链截图加载完毕" : "友链截图加载失败",
backgroundColor: snackbarBg,
duration: duration,
pos: snackbarPos,
actionText: result ? "" : "刷新",
actionTextColor: '#fff',
onActionClick: result ? null : function (e) { location.reload(true) }
})
} else {
var showBg = document.documentElement.getAttribute('data-theme') === 'light' ? '#49b1f5' : '#1f1f1f'
var cssText = `top: 0; background: ${showBg};`
document.getElementById('app-refresh').style.cssText = cssText
}
if(result) document.querySelector("body").appendChild(screen_shot)
}
}

添加Snackbar提示(确保Butterfly主题开启Snackbar)、当显示:友链截图加载完毕 就可以查看截图了、如果显示:友链加载失败,请刷新页面(有一定几率会加载失败)

何时运行

本项目会在At 9:00 AM, only on Sunday运行

如果想修改运行时间 、修改screen_shot/.github/workflows/screen_shot.yml

1
- cron: '0 0 * * 0'

运行可能需要很长时间

问题

  • 运行比较缓慢,毕竟下载图片需要一定时间
  • 正则表达式写的太菜了、如果大佬有更好的改进、欢迎提 Issue
  • 部分网站的图片可能抓取不到