最近比较忙，所以都是更新学习的一些东西或者就是直接没有更新博客，这两天看了一下博客，发现博客好多功能都受到了约束，必须先实现什么其他功能才能实现当前这个功能，刚好看到随机三个友情链接目前是通过友链朋友圈实现的，每次都需要抓取。看了下目前随机友链的功能，想起来hexo内置了过滤器可以实现。

实现

这个实现是在butterfly主题基础上进行实现，其他主题参照即可。

新建themes/butterfly/scripts/helpers/inject_elements.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/inject_elements.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
})