前言

需要先更换成新美化的页脚再往下看，因为挺多小伙伴问我这个功能是怎么实现的，所以今天把bug修的差不多了，我就来写一遍小教程，希望能帮助到有需要的小伙伴们。鸣谢Leonus大佬提供的脚本代码😁!!!

预览

效果如下图：

添加js功能

1. 生成友链数据的功能实现

博客项目的根目录下新建link.js文件，用于生成友链数据，文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
const YML = require('yamljs')
const fs = require('fs')

let ls   = [],
    data = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));

data.forEach((e, i) => {
    ls = ls.concat(e.link_list)  //获取link.yml文件内所有的数据
});
fs.writeFileSync('source/link.json', `{"link_list": ${JSON.stringify(ls)},"length":${ls.length}}`)
console.log('友链文件已生成。');
1
2
3
4
5
6
7
8
9
10
11
12
const YML = require('yamljs')
const fs = require('fs')

let ls   = [],
    data = YML.parse(fs.readFileSync('source/_data/link.yml').toString().replace(/(?<=rss:)\s*\n/g, ' ""\n'));

data.forEach((e, i) => {
    let j = data.length-1;  //获取友链数组的范围（除了最后一栏，前面的都获取）
    if (i != j) ls = ls.concat(e.link_list) 
});
fs.writeFileSync('source/link.json', `{"link_list": ${JSON.stringify(ls)},"length":${ls.length}}`)
console.log('友链文件已生成。');

将link.js脚本放至博客根目录
使用node运行link.js脚本来生成友链的json数据

1
2
3
#在博客根目录下运行下面命令，运行完会生成json格式的友链数据
npm i yamljs  #安装依赖的yamljs模块
node link.js  #生成友链json数据

运行后，在source目录下会生成一个link.json文件，里面就是json格式的友链数据。

2. 保存/读取友链数据的功能实现

新建source/js/flink_random.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
var flink_random = {
    saveData: (e,t)=>{
        localStorage.setItem(e, JSON.stringify({
            time: Date.now(),
            data: t
        }))
    },
    loadData: (e,t)=>{
        let n = JSON.parse(localStorage.getItem(e));
        if (n) {
            let e = Date.now() - n.time;
            if (e < 60 * t * 1e3 && e > -1)
                return n.data
        }
        return 0
    },
    randomLink: ()=>{
        let e = flink_random.loadData("links", 30);
        if (e) {
            let t = document.querySelectorAll("#friend-links-in-footer .footer-item");
            if (!t.length)
                return;
            for (let n = 0; n < 5; n++) {
                let o = parseInt(Math.random() * e.length);
                t[n].innerText = e[o].name,
                t[n].href = e[o].link,
                e.splice(o, 1)
            }
        } else{
            fetch("/link.json").then((e=>e.json())).then((e=>{
                flink_random.saveData("links", e.link_list),
                flink_random.randomLink()
            }
            ))
        }
    },
}
flink_random.randomLink();

修改pug模板

找到themes\butterfly\layout\includes\footer.pug，修改内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  .footer-group
    h3.footer-title
      | 友链 
      button(
        href="javascript:;"
-        onclick="shine.randomLink()"
+        onclick="flink_random.randomLink()"
        title="换一批"
        class="fa-rotate-righ-button"
      )
        i.fa-rotate-right.fa-solid
    .footer-links#friend-links-in-footer
      a.footer-item(href="")
      a.footer-item(href="")
      a.footer-item(href="")
      a.footer-item(href="")
      a.footer-item(href="")
      a.footer-item(data-pjax-state="" href="/link/") 查看更多

引入js脚本

1
2
3
4
5
6
7
8
9
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    # 自定义css
  bottom:
    # 自定义js
+    - <script async data-pjax src="/js/flink_random.js"></script>  #添加的自定义js文件

Hexo三连

1
hexo clean && hexo g && hexo s