博客页脚之前使用的是友联朋友圈部署随机获取的，前段时间突然发现无法访问了，重启才恢复正常，所以想将这部分独立出来，不再依赖友联朋友圈，废话不多说，开整

效果预览

介绍两种魔改方案，一种是通过json方式来读取，另一种是通过hexo内置过滤器来实现

魔改方案

方案一通过json方式实现

此方式就是需要手动创建json，每次添加友联补充进json文件即可

1. 【新建】butterfly/source/frendlink.json

   [{
       "class_name": "推荐",
       "class_desc": "参与本站开发、提供设计灵感、捐助本站的优秀博主，综合排序",
       "class_mode": "MxBlog",
       "link_list": [
           { "name": "满心", "link": "https://blog.lovelu.top" },
           { "name": "Jayhrn", "link": "https://blog.jayhrn.com" }
       ]
   },
   {
       "class_name": "资源",
       "class_desc": "寻找资源不迷路",
       "class_mode": "MxBlog",
       "link_list": [
           { "name": "steven安", "link": "https://chenjunan.top/" },
           { "name": "MacApp分享", "link": "https://macapp.org.cn/" },
           { "name": "精品MAC", "link": "https://pomac.cc/" }
       ]
   }
   ]

2. js中添加如下

   var mx = {
   addFriendLinksInFooter: function () {
     var fetchUrl = "/mx/friendlink.json";
     fetch(fetchUrl)
         .then((res) => res.json())
         .then((json) => {
             var result = [];
             var prevIndex = -1;
             for (const item of json) {
                 const links = item.link_list;
                 for (let i = 0; i < Math.min(links.length, 1); i++) {
                     let index = Math.floor(Math.random() * links.length);
                     while (index === prevIndex && links.length > 1) {
                         index = Math.floor(Math.random() * links.length);
                     }
   
                     prevIndex = index;
                     result.push({
                         name: links[index].name,
                         link: links[index].link,
                     });
                     links.splice(index, 1);
                 }
             }
             //删除result中最后一个元素
             result.pop();
   
             var htmlText = "";
             for (let i = 0; i < result.length; ++i) {
                 var item = result[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;
         });
   }
   }

3. 【修改】butterfly/layout/includes/additional-js.pug

   //- 初步进入需要加载的函数
   .js-pjax
   script.
   mx.addFriendLinksInFooter()

   该方法，每天添加友联后，在json文件对应类别中添加即可

方案二（推荐）

此方式较为简单，无需json文件，直接读取，此方案来源于jayhrn

1. 【新建】butterfly/scripts/helpers/random.js

   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
   })

2. js

   addFriendLinksInFooter: function() {
   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;
   }

3. 【修改】butterfly/layout/includes/additional-js.pug

   //- 初步进入需要加载的函数
   .js-pjax
   script.
   mx.addFriendLinksInFooter()

   该方法较为简单，推荐使用