卡片动画
参考：https://akilar.top/posts/abab51cf/
-
安装插件 npm install hexo-butterfly-wowjs --save
-
在站点配置文件_config.yml 或者主题配置文件_ config.butterfly.yml 中添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| wowjs:
enable: true
priority: 10
mobile: false
animateitem:
- class: recent-post-item
style: animate__zoomIn
duration: 2s
delay: 1s
offset: 100
iteration: 2
- class: card-widget
style: animate__zoomIn
animate_css: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css
wow_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js
wow_init_js: https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js
|
参数说明：
| 参数 |
备选值/类型 |
释义 |
| enable |
true/false |
【必选】控制开关 |
| priority |
number |
【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| mobile |
true/false |
控制移动端是否启用，默认移动端禁用 |
| animateitem.class |
class |
【可选】添加动画类名，只支持给class添加 |
| animateitem.style |
text |
【可选】动画样式，具体类型参考animate.css |
| animateitem.duration |
time,单位为s或ms |
【可选】动画持续时间，单位可以是ms也可以是s。例如3s，700ms。 |
| animateitem.delay |
time,单位为s或ms |
【可选】动画开始的延迟时间，单位可以是ms也可以是s。例如3s，700ms。 |
| animateitem.offset |
number,单位为px |
【可选】开始动画的距离（相对浏览器底部）。 |
| animateitem.iteration |
number,单位为s或ms |
【可选】动画重复的次数 |
| animate_css |
URL |
【可选】animate.css的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css |
| wow_js |
URL |
【可选】wow.min.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js |
| wow_init_js |
URL |
【可选】wow_init.js的CDN链接,默认为https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js |
随机文章封面
在 source 目录下新增 pics.txt 内容如下：
一样一个链接🔗
1
2
3
4
5
6
| https://s2.loli.net/2023/04/20/mxoJkj4HVcCXOWz.webp
https://s2.loli.net/2023/04/20/PihJLrHKFCYztw2.webp
https://s2.loli.net/2023/04/20/gecoF1BZRt4CakW.webp
https://s2.loli.net/2023/04/20/qJxGHMaosjf7Uwl.webp
https://s2.loli.net/2023/04/20/9p58u6WJDHSlsv7.webp
https://s2.loli.net/2023/04/20/2MptkSV39BhXylO.webp
|
修改主题文件 /butterfly/scripts/filters/random_cover.js
在方法randomCoverFn 加入随机封面代码；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const path = require('path')
const randomCoverFn = () => {
const pics = hexo.render.renderSync({ path: path.join(hexo.source_dir, '/pics.txt') }).replace(/(^\s*)|(\s*$)/g, '')
const arr = pics.split('\n')
if(arr.length>0){
const num = Math.floor(Math.random() * arr.length)
return arr[num]
}
const theme = hexo.theme.config
if (!(theme.cover && theme.cover.default_cover)) return false
if (!Array.isArray(theme.cover.default_cover)) return theme.cover.default_cover
const num = Math.floor(Math.random() * theme.cover.default_cover.length)
return theme.cover.default_cover[num]
}
|
hexo 三连即可！
三方链接跳转提示
Hexo Butterfly 4.8.1
参考：https://www.yichkhun.com/p/9b8131b0.html
hexo new page redirect 增加页面；删除 index.md 并添加 index.html 如下所示：
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三方网站跳转提示</title>
<link rel="shortcut icon" href="/assets/images/favicon.svg">
<style>
.box {
height: 100vh;
background-color: #f4f5f5;
}
.box .tip-box {
position: absolute;
left: 50%;
top: 30%;
max-width: 650px;
width: 86%;
background-color: #fff;
transform: translateX(-50%);
padding: 30px 40px 0;
box-sizing: border-box;
border: 1px solid #e5e6eb;
border-radius: 2px;
}
.box .tip-box .content .title {
font-size: 18px;
line-height: 24px;
}
.box .tip-box .content #link {
padding: 16px 0 24px;
border-bottom: 1px solid #e5e6eb;
position: relative;
color: gray;
font-size: 14px;
}
.box .tip-box .content .btn {
display: block;
margin: 20px 0 24px auto;
color: #fff;
border-radius: 3px;
border: none;
background: #007fff;
height: 32px;
font-size: 14px;
padding: 0 14px;
cursor: pointer;
outline: 0;
}
#site-name {
color: #3858F6;
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<div class="tip-box">
<div class="content">
<div class="content">
<div class="title">
即将离开 <a href="https://blog.lichenghao.cn" target="_blank"
id="site-name">「故事的程序猿👨🏻💻」</a>前往第三方网站，请注意账号财产安全！
</div>
<div id="link"></div>
<button class="btn" onclick="navigateToTarget()">继续访问</button>
</div>
</div>
</div>
</div>
<script>
const query = window.location.href.split("?")[1] || "";
let target = query.split("target=")[1] || "";
target = window.decodeURIComponent(target);
document.getElementById("link").innerText = target
var navigateToTarget = function () {
if (!target) {
return;
}
window.location.href = target;
}
</script>
</body>
</html>
|
还需要到根目录的 _config.yml 文件里，搜索 skip_render ，给它加上我们新建的这个页面路径(注意缩进)：
1
2
| skip_render:
- "redirect/**"
|
然后在主题文件目录 themes/butterfly/scripts/filters 增加 redirect.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
|
'use strict'
hexo.extend.filter.register('after_post_render', function (data) {
var siteUrl = hexo.config.url
var domain = siteUrl.match(/[^.\/]+\.[^.\/]+$/)[0]
var content = data.content
var hrefRegExp = /href="(https?[^"]*)"*/gi
content = content.replace(hrefRegExp, (url) => {
const domainRegExp = /href="(https?[^"]*)"*/i
const domainMatch = url.match(domainRegExp)
if (domainMatch !== null && domainMatch[1].indexOf(domain) === -1) {
return 'href=/redirect/?target=' + domainMatch[1]
}
})
data.content = content
return data
})
|
hexo 三连即可！
小原理：
-
取 _config.yml 中的 url 属性作为域名的白名单；
-
利用插件在渲染后找到所有超链接中的 href="https://www.baidu.cn"，判断域名不是本站的，那么将链接替换成http://domain/redirect/?target=https://www.baidu.com ；
-
redirect 页面中会获取上面的链接，然后跳转到对应 target 地址；
-
有个缺点，评论中的链接处理不了。
如下测试：
百度 故事的程序猿👨🏻💻
