最近比较忙，所以都是更新学习的一些东西或者就是直接没有更新博客，这两天看了一下博客，发现博客好多功能都受到了约束，必须先实现什么其他功能才能实现当前这个功能，刚好看到随机三个友情链接目前是通过友链朋友圈实现的，每次都需要抓取。看了下目前随机友链的功能，想起来hexo内置了过滤器可以实现。
实现
这个实现是在butterfly主题基础上进行实现，其他主题参照即可。
新建themes/butterfly/scripts/helpers/random.js文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| hexo.extend.filter.register('after_render:html', function (data) {
const flinks = []
hexo.locals.get('data').link.map(function (list) {
list.link_list.map(function (flink) {
flinks.push(flink)
})
})
data += `<script>
let flinks=${JSON.stringify(flinks)} // 自己进行选择，可要可不要，本主题写了其他函数需要使用
function getRandomFlink(num) {
let randomLinks = [];
while (randomLinks.length < num && flinks.length > 0) {
let index = Math.floor(Math.random() * flinks.length);
randomLinks.push(flinks.splice(index, 1)[0]);
}
return randomLinks;
}
</script>`
return data
})
|
上面就是实现了将所有友链对象放入flinks数组中，我们只需要在使用的地方调用getRandomFlink(num)函数即可，num根据自己需要填写参数即可。
如果你还想根据flinks对象书写其他函数实现其他功能，可以直接再script标签中实现，这样子就可以不需要再创建一个过滤器了
如果你是和张洪Heo一样实现了页脚随机三个友链的功能，可以就可以不需要再通过友链朋友圈获取链接啦，换成如下就可以。
1
2
3
4
5
6
7
8
9
10
| function addFriendLinksInFooter() {
let randomFriendLinks=getRandomFlink(3)
let htmlText = '';
for (let i = 0; i < randomFriendLinks.length; ++i) {
let item = randomFriendLinks[i]
htmlText += `<a class='footer-item' href='${item.link}' target="_blank" rel="noopener nofollow">${item.name}</a>`;
}
htmlText += `<a class='footer-item' href='/link'>更多</a>`
document.getElementById("friend-links-in-footer").innerHTML = htmlText;
}
|
修复版本
经过刘洪亮的测试，发现这个方式获取会导致每次随机之后友情链接的数量会越来越少，最后页脚刷新获取不到友情链接了。
发现问题：原来是每次在获取友链的时候，链接在被拆分导致越来越少了，所以需要每次需要定义一个变量获取全部的友链，如下是改进版本，其实也就是在函数里面定义一个变量存储下就可以了。
更新themes/butterfly/scripts/helpers/random.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| hexo.extend.filter.register('after_render:html', function (data) {
const flinks = []
hexo.locals.get('data').link.map(function (list) {
list.link_list.map(function (flink) {
flinks.push(flink)
})
})
data += `<script>
function getRandomFlink(num) {
let AllFinlks=${JSON.stringify(flinks)}
let randomLinks = [];
while (randomLinks.length < num && AllFinlks.length > 0) {
let index = Math.floor(Math.random() * AllFinlks.length);
randomLinks.push(AllFinlks.splice(index, 1)[0]);
}
return randomLinks;
}
</script>`
return data
})
|